Meta Tag Oluşturucu

Meta tag oluşturucu nedir, size hangi kodu verir?

Meta tag oluşturucu, bir sayfanın head bölümüne girecek etiketleri basit bir formdan üreten araçtır. Siz başlığı, açıklamayı, adresi ve görseli bir kez yazarsınız; araç bunları üç gruba dağıtır: arama motorları için SEO etiketleri, Facebook, LinkedIn ve WhatsApp gibi platformlar için Open Graph etiketleri ve X (Twitter) için kart etiketleri. Böylece aynı bilgiyi üç kez elle yazmazsınız ve tırnak hatası riskini de ortadan kaldırırsınız.

Ben bu aracı en çok iki durumda açıyorum: yeni bir açılış sayfasını yayına almadan hemen önce ve bir müşteri "linkimizi paylaşınca önizleme bozuk çıkıyor" dediğinde. SEO danışmanlığı sürecinde de ekibimle ilk baktığımız şeylerden biri, her sayfanın kendine ait başlık, açıklama ve canonical etiketi taşıyıp taşımadığıdır.

• Sayaçlar: başlıkta 60, açıklamada 160 karakteri referans alır ve durumu siz yazarken gösterir.
• Önizleme: Google sonucunu ve paylaşım kartını yaklaşık olarak çizer.
• Temel alan rozeti: başlık, açıklama, URL ve görselden kaçının hazır olduğunu sayar.
• Temiz kod: boş alanın satırını atlar, tırnak gibi özel karakterleri HTML'e uygun biçime çevirir.

Başlık ve açıklama kaç karakter olmalı?

Kesin bir karakter sınırı yok. Google, title öğesi ve meta açıklama için uzunluk sınırı koymadığını, ancak sonuçlardaki metni cihaz genişliğine sığacak kadar kestiğini belirtir. Yani asıl ölçü karakter değil, ekrandaki piksel genişliğidir: M ve W gibi geniş harfler, i ve l harflerinden çok daha fazla yer kaplar.

Araçtaki 60 ve 160 karakter bu yüzden pratik bir referanstır. Sayaç, sınırın %90'ına kadar yeşil kalır; son %10'da sarıya, sınırı aşınca kırmızıya döner. Google önizlemesi ise başlığı yaklaşık 580, açıklamayı yaklaşık 920 piksele göre keser. Masaüstü ve mobil görünümü ayrı ayrı görmek isterseniz Google SERP önizleme aracı piksel ölçümünü ayrıntılı gösterir.

Uygulamada benim kuralım şu:

• En önemli kelimeyi başlığın başına yazın; kesilirse sondaki marka adı gitsin.
• Açıklamanın ilk cümlesinde sayfanın ne sunduğunu söyleyin, çünkü mobilde metin daha erken kesilebilir.
• Anahtar kelimeleri liste hâlinde sıralamayın. Google'a göre kelime yığınından oluşan açıklamalar snippet olarak daha az görünür.

Başlık ve açıklama yazma tekniğini örneklerle anlattığım meta title ve meta description rehberine de göz atabilirsiniz.

Open Graph etiketleri paylaşım kartını nasıl belirler?

Bir bağlantıyı Facebook, LinkedIn, WhatsApp veya Slack'e yapıştırdığınızda platform sayfanızı ziyaret eder ve Open Graph etiketlerini okur. Etiket yoksa sayfadan kendi seçtiği görseli ve metni kullanır; sonuç çoğu zaman alakasız bir logo ya da menü metnidir. Open Graph protokolü dört temel özelliği zorunlu sayar: og:title, og:type, og:image ve og:url.

Araç bu dört özelliğe açıklama, site adı ve dil kodunu ekler. Sayfa türünde ise iki seçenek sunar:

• Web sitesi (website): ana sayfa, hizmet ve ürün sayfaları için. Meta'nın paylaşım rehberine göre og:type etiketi yoksa varsayılan değer de budur.
• Makale (article): blog yazıları ve haberler için.

X tarafında durum biraz farklı. X önce twitter: etiketlerine bakar, bulamazsa Open Graph karşılığını kullanır. Tek istisna twitter:card etiketidir, çünkü kart tipinin Open Graph karşılığı yok. Bu yüzden araç bu satırı her zaman yazar ve varsayılan olarak büyük görselli kartı seçer; kare görselli küçük kart için X Kart Tipi alanında Küçük görsel seçeneğini kullanın.

Paylaşımdan gelen trafiği büyütmenin etiket dışındaki taraflarını sosyal medyadan web sitesine trafik yazımda ele aldım.

og:image için hangi boyutu ve adresi kullanmalısınız?

Meta'nın geliştirici belgesi, yüksek çözünürlüklü ekranlarda iyi görünmesi için en az 1200 x 630 piksel görsel önerir. Büyük görselli bağlantı paylaşımı için alt sınır 600 x 315 pikseldir. Görselin akışta kırpılmadan görünmesi için oranı 1.91:1'e yakın tutun ve dosyayı 8 MB'ın altında bırakın.

Boyuttan daha sık gördüğüm sorun ise adres hatasıdır:

• Tam adres: og:image değeri https:// ile başlamalı. /img/kapak.jpg gibi göreli bir yol yazarsanız araç alanın altında uyarı gösterir.
• Herkese açık dosya: Görsel, giriş isteyen bir klasörde ya da botlara kapalı bir yolda durmamalı. Paylaşım kartı sekmesinde görsel yüklenmiyorsa önce bunu kontrol edin.
• Önemli içerik ortada: Küçük kart tipinde görsel kareye kırpılabilir; yazıyı ve logoyu merkeze yakın tutun.

Open Graph protokolü, og:image kullanan her sayfanın og:image:alt da tanımlamasını önerir. Araç alt metni yalnız görsel adresi varken yazar ve aynı metni twitter:image:alt satırına da ekler. Görseli yeniden boyutlandırmak veya sıkıştırmak için resim küçültme aracını kullanabilirsiniz.

Canonical ve robots etiketlerini birlikte nasıl ayarlarsınız?

Canonical, aynı içeriğe ulaşan birden fazla adres arasında asıl sürümü gösterir. Google rel="canonical" bağlantısını güçlü bir sinyal sayar, ancak kesin bir komut gibi uygulamaz. Google'ın belgesine göre üç kurala dikkat edin: göreli değil tam adres kullanın, etiketi yalnız head içine koyun ve asıl sayfanın kendisini gösteren bir canonical ekleyin.

Robots etiketinde varsayılan değer index,follow'dur; bu değeri yazmanın bir etkisi yoktur ama zararı da yoktur. Araç üç seçenek sunar:

• index,follow: yayındaki normal sayfalar.
• noindex,follow: site içi arama sonuçları veya teşekkür sayfası gibi, dizinde görünmesini istemediğiniz ama bağlantılarının izlenmesini istediğiniz sayfalar.
• noindex,nofollow: test sayfası veya kampanya taslağı gibi tamamen dışarıda kalması gereken sayfalar.

İki uyarım var. Robots.txt ile taramayı engellediğiniz bir sayfadaki noindex kuralını Google göremez. Ayrıca Google, canonical seçimini yönlendirmek için noindex kullanmayı önermez. Robots.txt dosyasını robots.txt oluşturucu ile, adres listenizi XML sitemap oluşturucu ile hazırlayabilirsiniz. Teknik tarafın bütününü ise teknik SEO ipuçları yazısında topladım.

Meta tag oluşturucu ile ürettiğiniz kodu sitenize nasıl eklersiniz?

Kodu sayfanın head bölümüne, kapanış head etiketinden önce yapıştırın. Google, meta etiketlerin head içinde ve geçerli HTML olarak durmasını ister. Elle kodlanmış bir sitede bu tek adımdır; hazır bir altyapıda ise önce mevcut etiketlere bakmanız gerekir:

1. Sayfayı açın ve kaynak kodunu görüntüleyin (Chrome'da Ctrl+U).
2. Kaynakta title, canonical ve og:image kelimelerini aratın.
3. Tema veya SEO eklentisi bu satırları zaten yazıyorsa ikinci bir set eklemeyin; eklentinin alanlarını aracın ürettiği değerlerle doldurun.
4. Yalnız eksik satırları kopyalayın, sonra kaynakta her etiketin bir kez geçtiğini doğrulayın.

Bir noktayı özellikle kontrol edin: og:url ve canonical değeri aynı temiz adres olmalı. Meta, og:url değerini oturum değişkeni ve izleme parametresi içermeyen adres olarak tanımlar; beğeni ve paylaşımlar bu adreste toplanır. Kampanya bağlantılarınızı UTM oluşturucu ile etiketleseniz bile bu iki alana UTM parametresi yazmayın.

Yeni bir siteyi baştan doğru etiketlerle kurmak isterseniz, ekibimle yürüttüğümüz web tasarım projelerinde bu etiketleri her sayfa türü için şablona bağlıyoruz; böylece yeni sayfa eklediğinizde kimse elle kod yazmak zorunda kalmıyor.

Paylaşım önizlemesi neden eski kalır, nasıl yenilersiniz?

Platformlar bir bağlantıyı ilk paylaşımda tarar ve sonucu önbelleğe alır. Etiketleri sonradan düzeltseniz bile eski başlık veya görsel bir süre görünmeye devam edebilir. Meta da görselleri adreslerine göre önbelleğe aldığını ve yayından sonra görseli değiştirmek için yeni bir adres kullanmanızı söyler.

Benim izlediğim sıra şu:

• Facebook: Bağlantıyı Paylaşım Hata Ayıklayıcısı aracına girin ve yeniden kazıma isteyin. Araç hataları gösterir ve sayfayı yeniden tarar.
• X: Bağlantıyı gönderi oluşturma alanına yapıştırın; kart önizlemesi paylaşmadan görünür. X, eski Card Validator sayfasındaki önizlemeyi kaldırdı.
• LinkedIn: Post Inspector aracına adresi girerek sayfanın yeniden okunmasını isteyin.
• Görsel değiştiyse: Yeni dosyayı yeni bir adla yükleyin ve adresini og:image alanına yazın.

Önizleme hâlâ eski kalıyorsa sorun çoğu zaman sayfanın kendisindedir; örneğin bir yönlendirme botu başka bir adrese gönderiyor olabilir. Bağlantının hangi adrese vardığını yönlendirme denetleyicisi ile adım adım görebilirsiniz.