💥 Angular Universal SEO - Arama Motoru Optimizasyonu

İçindekiler:

1. Giriş
2. SEO ve Angular Universal
3. Başlık Etiketi ve Meta Açıklaması
4. Başlık Etiketini Dinamik Olarak Ayarlama
5. Meta Açıklamasını Ayarlama
6. Arama Motoru Dostu Bir Uygulama Oluşturma
7. Google Arama Motoru ve Diğerleri
8. Başlık ve Açıklama Etiketlerinin Önemi
9. Angular Universal ile Başlık ve Açıklama Etiketlerini Ayarlama
10. Uygulamayı Derleme ve Sunucu Başlatma

Angular Uygulamalarında SEO Optimizasyonu Başlığı

Angular uygulamalarında SEO yani Arama Motoru Optimizasyonu yapmak, Angular Universal'ı kullanma nedenlerimizden biridir. Google dışında Bing gibi diğer arama motorları ve Twitter, Facebook gibi sosyal medya platformları için sayfalarımızın gezilebilir olması da önemlidir. Bu nedenle Angular Universal uygulamalarında SEO optimizasyonunu nasıl yapabileceğimize bakacağız. Başlamadan önce, Google'ın arama sonuçları sayfasında gördüğümüz metinlerin nereden geldiğini ve nasıl ayarlandığını anlamak önemlidir.

Giriş

Angular Universal kullanarak geliştirdiğimiz bir uygulamanın SEO dostu olması, sayfa başlığı ve meta açıklamasının doğru şekilde ayarlanmasına bağlıdır. Arama motorları, sayfanın başlığını ve açıklamasını belirliyor ve arama sonuçları sayfasında görüntülüyor. Bu nedenle, başlık etiketi ve meta açıklamasının, sayfanın içeriğine uygun şekilde dinamik olarak ayarlanması çok önemlidir.

SEO ve Angular Universal

Angular Universal, istemci tarafında değil sunucu tarafında oluşturulan bir Angular uygulamasıdır. Bu, uygulamamızın arama motorları tarafından indekslenmesini ve SEO açısından daha iyi performans göstermesini sağlar. Ancak, tek başına Angular Universal kullanmak yeterli değildir. Arama motorları, her bir sayfanın başlık etiketi ve meta açıklamasına ihtiyaç duyar. Bu etiketler, sayfanın içeriği hakkında bilgi sağlar ve arama sonuçlarında görünen metni belirler.

Başlık Etiketi ve Meta Açıklaması

Google gibi arama motorları, sayfa başlığını başlık etiketinden alır. Başlık etiketi, HTML sayfasının baş bölümünde bulunur ve <title> etiketi içine yazılır. Başlık etiketi, sayfanın içeriğini tanımlayan kısa ve öz bir metin olmalıdır. Sayfa hakkında bilgilendirici bir başlık, arama sonuçlarında daha iyi görünürlük sağlar.

Meta açıklaması ise, arama sonuçlarının altında sayfa hakkında bir özet olarak görünen metindir. Bu metin, HTML sayfasının baş bölümünde <meta name="description" content="AÇIKLAMA"> şeklinde tanımlanır. Meta açıklaması, sayfanın içeriğini özetleyen birkaç cümle olmalıdır. Kullanıcıların arama sonuçlarına bakarak sayfamızın içeriğini anlamasına yardımcı olur.

Başlık Etiketini Dinamik Olarak Ayarlama

Angular Universal ile sayfa başlığını, sayfanın içeriğine göre dinamik olarak ayarlamak mümkündür. Böylece her sayfa için özgün ve anlamlı başlıklar oluşturabiliriz. Bunun için Angular'ın Title servisini kullanacağız. Title servisi, sayfanın başlığını değiştirmemize olanak sağlayan bir enjekte edilebilir olarak sunulur.

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent {
  constructor(private titleService: Title) {}

  setPageTitle(title: string) {
    this.titleService.setTitle(title);
  }
}

Yukarıdaki kod örneğinde Title servisini kullanarak sayfa başlığını değiştiriyoruz. setPageTitle metodu, her sayfa için benzersiz bir başlık belirlemek için kullanılabilir. Örneğin, bir kurs sayfasında setPageTitle('Angular Temel Kursu') şeklinde bir çağrı yapabiliriz.

Meta Açıklamasını Ayarlama

Başlık etiketi gibi, meta açıklamasını da Angular Universal ile dinamik olarak ayarlayabiliriz. Bunun için Angular'ın Meta servisini kullanacağız. Meta servisi, sayfa başına meta etiketleri eklememize olanak sağlar.

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent {
  constructor(private metaService: Meta) {}

  setMetaDescription(description: string) {
    this.metaService.updateTag({ name: 'description', content: description });
  }
}

Yukarıdaki kod örneğinde Meta servisini kullanarak meta açıklamasını ayarlıyoruz. updateTag metodu, name ve content özelliklerinin bulunduğu bir yapıyla çağrılır. name özelliği description olarak ayarlanır ve content özelliği de açıklama metnini içeren bir değişkene bağlanır.

Arama Motoru Dostu Bir Uygulama Oluşturma

Dinamik başlık etiketi ve meta açıklaması ayarlamak, uygulamamızı arama motorlarına daha dost hale getirecektir. Her bir sayfa için benzersiz başlıklar ve açıklamalar kullanarak, arama sonuçlarında daha iyi bir sıralama elde edebiliriz. Bunun yanı sıra arama sonuçlarında görünen metinleri de metadan alacağız, bu nedenle içerikle uyumlu ve anlamlı bir şekilde ayarlanmaları önemlidir.

Google Arama Motoru ve Diğerleri

Google gibi bazı arama motorları, başlık etiketini ve meta açıklamasını sayfa kaynağından alırken, bazıları JavaScript ile oluşturulan değerleri okuyamaz. Ancak Google, dinamik olarak ayarlanmış başlık etiketlerini ve meta açıklamalarını okuyabilir. Diğer arama motorları bazı taktikleri anlamayabilir ve bu nedenle statik değerleri görüntüleyebilir.

Başlık ve Açıklama Etiketlerinin Önemi

Başlık etiketi ve meta açıklaması, arama sonuçlarında kullanıcıların ilgisini çekmek için önemli bir role sahiptir. Kullanıcılar, başlık etiketine bakarak sayfanın içeriğini anlamalı ve meta açıklamasına bakarak daha fazla bilgi edinmelidir. Bu nedenle, her sayfanın başlık etiketi ve meta açıklaması doğru şekilde ayarlanmalıdır.

Angular Universal ile Başlık ve Açıklama Etiketlerini Ayarlama

Angular Universal kullanarak, her sayfa için başlık etiketi ve meta açıklamalarını dinamik olarak ayarlayabiliriz. Bu, her sayfanın içeriğine uygun başlıklar ve açıklamalar sağlayarak arama sonuçlarında daha iyi bir görünürlük elde etmemizi sağlar. Başlık etiketini Title servisiyle, meta açıklamasını ise Meta servisiyle ayarlayabiliriz.

Uygulamayı Derleme ve Sunucu Başlatma

Angular Universal ile geliştirdiğimiz uygulamayı derleyip sunucuda çalıştırmak için aşağıdaki adımları izleyebiliriz:

1. İlk olarak, uygulamanın istemci tarafını derleyerek başlayalım. Bunun için terminalde npm run build client -- --prod komutunu çalıştırabiliriz.

2. İstemci tarafının başarıyla derlendiğini ve oluşturulan dosyaların dist/client dizinine yerleştirildiğini göreceksiniz.

3. Ardından, sunucu tarafını derleyelim. Bu işlem için terminalde npm run build server -- --prod komutunu kullanabiliriz.

4. Sunucu dosyaları da dist/server dizinine yerleştirilecektir.

5. Derleme işlemi tamamlandıktan sonra, Express sunucusunu başlatmak için terminalde npm run start komutunu çalıştırabiliriz.

6. Sunucu başarıyla başladıktan sonra, tarayıcınızda http://localhost:3000 adresine giderek uygulamay