Özelleştirilmiş Sayfa Başlığı ve Meta Etiketleri Ayarlama - Angular Universal SEO
İçindekiler
- Giriş
- Angular ile Özel Bir Başlık ve Açıklama Oluşturma
- Genel Başlık ve Açıklamanın Kullanımının Değiştirilmesi
- Sayfa Başlığını Özelleştirmek: Home Component
- Arama Motorları ve Başlık Güncellemeleri
- Arama Motoru Optimizasyonu için Sunucu Tarafı Renderlama
- Angular Universal ile Sunucu Tarafı Renderlama Aktivasyonu
- Sunucu Tarafı Renderlanmış Başlık ve Açıklama
- Arama Motorları ve Sunucu Tarafı Renderlama
- Sonuç
Angular ile Özel Bir Başlık ve Açıklama Oluşturma 💡
Angular kullanarak web sitemizin her sayfası için özel bir başlık ve açıklama oluşturmayı öğreneceğiz. Bu sayede çalışma zamanında genel başlık ve açıklama değil, her sayfanın kendine özgü başlık ve açıklamasını kullanabileceğiz. Örneğin, sayfa özel bir başlığa sahip değilse, index.html dosyasındaki başlığı kullanabileceğiz. Bu özellik, tüm sayfalarda başlık veya açıklama belirtilmemişse en azından index.html dosyasındaki başlığın kullanılmasını sağlar.
Bunun için başlık ve açıklamanın değiştirilmesi gerekmektedir. Öncelikle başlık için "Angular Universal Uygulaması" ve açıklama için ise "Angular Universal örnek uygulama" ifadelerini kullanacağız. Bu şekilde, sayfalarımızın özel bir başlık veya açıklaması olmadığında, en azından index.html dosyasındaki varsayılan başlığı ve açıklamayı kullanabileceğiz. Değişiklikleri kaydedip uygulamayı yenilediğimizde başlığın ve açıklamanın doğru bir şekilde güncellendiğini görebiliriz.
Genel Başlık ve Açıklamanın Kullanımının Değiştirilmesi
Angular kullanılırken, sayfalarımızın özel başlık ve açıklamaya sahip olabilmesi için bazı değişiklikler yapmamız gerekmektedir. Bunun için Home component'in constructorunda "title service" adlı bir Angular servisini enjekte edeceğiz. Bu servisi constructor'a ekleyerek kullanabiliriz. Ardından, ngOnInit metodunda, sayfa başlığını güncellemek için title service'i çağıracak bir kod bloğu ekleyeceğiz.
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private titleService: Title) { }
ngOnInit(): void {
this.titleService.setTitle('Angular Universal - Tüm Kurslar');
}
}
Bu şekilde, "Angular Universal - Tüm Kurslar" başlığını belirttiğimizde tarayıcının sekmesinde yeni başlığın görüneceğini görebiliriz. Uygulamayı yenilediğimizde, başlığın güncellendiğini görebiliriz. Bu sayede, Home component'inin başlığı client tarafında çalıştığında, tarayıcı başlığı güncellenir.
Arama Motorları ve Başlık Güncellemeleri
Arama motorları açısından önemli bir soru, başlığın nasıl güncellendiği ve sunucudan aldığımız başlığın ne olduğudur. Sayfa kaynağını görüntülediğimizde sunucudan aldığımız başlık değerini görebiliriz.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Angular Universal Uygulaması</title>
<meta name="description" content="Angular Universal örnek uygulama">
</head>
<body>
<app-root></app-root>
</body>
</html>
Görüldüğü gibi, sunucudan aldığımız başlık ve açıklama değerleri burada yer almaktadır. Ancak, uygulama çalıştığında, Angular sayfayı oluşturduğunda, sayfanın başlığı güncellenir ve önceki başlık yerine yeni değeri alır. Bu durumda, arama motorları hangi başlığı dikkate alacaklar?
Bu durum arama motoruna bağlıdır. Birkaç yıl önce, çoğu arama motoru sadece sunucu tarafında oluşturulan başlığı dikkate alırdı. Yani, JavaScript ile çalışma zamanında güncellenen başlıklar çoğu arama motoru tarafından yoksayılırdı. Ancak, Google arama motoru bu tür JavaScript güncellemelerini dikkate almaktadır. Günümüzde ise çoğu yaygın arama motoru çalışma zamanında JavaScript ile yapılan değişiklikleri dikkate almaktadır.
Ancak, hala güncelleme yapmayan bazı önemli arama motorları bulunmaktadır. Bu arama motorları için arama motoru optimizasyonu yapmak istiyorsak, başlığı ve açıklamayı sunucu tarafında renderlamamız gerekmektedir. Ancak, Google gibi modern arama motorlarında bu artık gerekli değildir. Bu nedenle, bu durumu göz önünde bulundurmanızı öneririz.
Arama Motoru Optimizasyonu için Sunucu Tarafı Renderlama
Sunucu tarafı renderlama ile arama motoru optimizasyonu yapabiliriz. Sunucu tarafında renderlanmış başlık ve açıklama, arama motorlarının bu yeni sürümünü doğru bir şekilde dizinlemesini sağlayacaktır. Bu durum, sadece en modern arama motorları tarafından dikkate alınan JavaScript ile oluşturulan içeriği anahtarlayan arama motorları için de geçerlidir.
Sunucu tarafında renderlama etkinleştirilmiş bir Angular Universal uygulamasını başlatabiliriz. Bunun için terminalde "npm run dev:ssr" komutunu kullanmamız gerekmektedir. Sunucu biraz zaman aldıktan sonra çalışmaya başlayacak ve güncellemeleri gerçekleştirecektir. Daha sonra, bu yeni Angular Universal uygulamasının davranışını, normal Angular tek sayfalı uygulamanın davranışıyla karşılaştırabiliriz.
Angular Universal ile Sunucu Tarafı Renderlama Aktivasyonu
Angular Universal ile sunucu tarafı renderlamayı etkinleştirelim. Bunun için terminalde "npm run dev:ssr" komutunu kullanacağız. Birkaç saniye sonra sunucu çalışmaya başlayacak ve güncellemeleri gerçekleştirecektir. Daha sonra, normal Angular tek sayfalı uygulamanın davranışıyla karşılaştırabileceğimiz bir pencereye geçelim.
npm run dev:ssr
Sunucu Tarafı Renderlanmış Başlık ve Açıklama
Sunucu tarafı renderlanmış Angular Universal uygulaması, tamamen sunucu tarafında oluşturulan başlık ve açıklamayı içeren bir HTML versiyonunu alır. Bu sayede uygulamanın doğru bir şekilde dizinlenmesi sağlanır. Aşağıdaki örnekte, sunucu tarafında renderlanan başlık ve açıklama değerlerini görebilirsiniz.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Angular Universal - Tüm Kurslar</title>
<meta name="description" content="Angular Universal örnek uygulama">
</head>
<body>
<app-root>
<!-- Sunucu tarafında oluşturulan HTML içeriği -->
</app-root>
</body>
</html>
Görüldüğü gibi, başlık ve açıklama değerleri tamamen sunucu tarafında renderlanmıştır. Bu, arama motorlarının bu versiyonu doğru bir şekilde dizinlemesini sağlar. Artık tüm arama motorları, runtime'da JavaScript tarafından oluşturulan içeriği dikkate almaktadır. Google gibi modern arama motorları, JavaScript tarafından oluşturulan başlıkları ve meta etiketlerini dikkate almaktadır. Ancak, sunucu tarafında renderlanmış başlık ve açıklama, hala bu tarz değişiklikleri dikkate almayan bazı arama motorları için önemlidir. Bu nedenle, sunucu tarafında renderlama yapmanızı öneririz.
Arama Motorları ve Sunucu Tarafı Renderlama
Arama motorları için en iyi sonuçları elde etmek için sunucu tarafı renderlama yapmanız gerekmektedir. Bu şekilde başlık ve açıklama değerleri arama motorları tarafından doğru bir şekilde indekslenecektir. Modern arama motorları bu tür değişiklikleri dikkate alırken, bazı arama motorları hala arama sonucunda başlık ve açıklama etiketlerini sunucu tarafında renderlanmış değerler olarak dikkate almaktadır.
Sunucu tarafı renderlama ile oluşturulan başlık ve açıklama etiketlerinin arama motorları tarafından doğru bir şekilde dizinlenmesi sağlanır. Bu, tüm arama motorlarının uygulamanızı doğru bir şekilde indekslemesini sağlar. Böylece, kullanıcıların arama sonuçlarında uygulamanızı bulmaları ve doğru bir şekilde değerlendirmeleri mümkün olur.
Sonuç
Bu makalede, Angular kullanarak web sitemizin her sayfası için özel başlık ve açıklama oluşturmayı öğrendik. Angular Universal ile sunucu tarafında renderlama yaparak arama motorları için optimizasyon sağlayabilmenin önemini de gördük. Bunun için başlık ve açıklamanın hem client tarafında hem de sunucu tarafında güncellenmesi gerektiğini belirledik.
Angular Universal ile sunucu tarafı renderlama yaparak, arama motorlarının tamamen işlenmiş başlık ve açıklama değerlerini dikkate almasını sağlayabiliriz. Bu şekilde, arama motorlarının uygulamamızı doğru bir şekilde indekslemesi ve kullanıcıların daha iyi sonuçlar elde etmesi sağlanır.
Bu yöntemlerle, web sitemizin SEO performansını ve görünürlüğünü artırabiliriz."""
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
