Bu kılavuz, kesinlikle kullanmanız gereken meta etiketlere ve onlarla neler yapabileceğinize odaklanmanıza yardımcı olacaktır.

HTML Meta Etiketleri Nelerdir?

Bir web sayfasının başlığı, orada bulunan içerikle ilgili birçok bilgi içerir. Bu, HTML meta etiketlerinizin yanı sıra sayfaya uygulanan tüm CSS veya JavaScript bağlantılarını bulacağınız yerdir.

Yalnızca bu yazıda sayfayla ilgili birkaç önemli ayrıntı edinebilirsiniz:

• meta title
• meta description
• meta content type ve viewport

Bunların hepsi meta etiketleridir. Çoğu zaman, HTML’de ad/değer çifti olarak yazılırlar.

Örnek:


Esasen, meta etiketler web sayfanızın verileriyle ilgili verilerden başka bir şey değildir. Sayfada asla görünmezler. Onlar sadece arka planda, arama botlarının HTML’yi algılamasını ve sayfanın arama sonucunu iyileştirmek için kullanmasını bekliyorlar. Ayrıca, kullanıcılara bu ayrıntıları besleyen (ve içeriği görüntüleyen) tarayıcılar, RSS beslemeleri ve sosyal medya platformları için de kullanışlıdır.

Hangi Meta Etiketleri Kullanmanız Gerekiyor?

Google ve diğer arama motorları tarafından tanınan tüm meta etiketlerin kullanılmaya değer olduğu iddia edilebilir. Ancak web tasarımı ve geliştirmede yaptığınız her şeyde olduğu gibi, savaşlarınızı da akıllıca seçmelisiniz.

Bu nedenle, zamanınızı web sayfalarınızı mümkün olan her meta etiketle doldurmak yerine, hangilerinin mevcut olduğunu ve hangilerinin kullanılmaya değer olduğunu öğrenin.

Title

HTML Örneği:

Bu ne işe yarıyor?

Bu, sayfanın adını gösterir.

Buna gerçekten ihtiyacın var mı?

Evet, arama motorlarına sayfanın adının ne olduğunu söylediği için bu pazarlık konusu değil.

Başlığınızı özellikle arama sonuçları için uyarlamak istiyorsanız bu etiket kullanışlıdır. Diyelim ki bir tıklama tuzağı başlığı yazdınız, böylece onu sitede gören ziyaretçiler tıklamaya mecbur kalıyorlar. Gibi bir şey:

Dizüstü Bilgisayarınız, Pasaportunuz ve En İyi Arkadaşınızdan Fazlasıyla Altı Kademeli Maaş Nasıl Kazanılır?


Bu başlık dizesi 108 karakter uzunluğundadır ve Google’ın bunu tam olarak göstermesi mümkün değildir. Sitenizin başlığını yeniden yazmak yerine, başlık etiketini Google’a standartlarına daha uygun bir başlık vermek için kullanabilirsiniz,

Örneğin:

Bu, Google’ın başlık sınırı dahilinde 76 karakterdir ve orijinali kadar iyi çalışır.

Description

HTML Örneği:

Bu ne işe yarıyor?

Bu, sayfada bulunacakların kısa bir özetidir. Aramada bu, sayfa başlığının ve URL’sinin altında görünen sayfa açıklamasıdır.

Buna gerçekten ihtiyacın var mı?

Evet, bu başka bir önemli meta etiket.

Sayfa için bir açıklama oluşturmayı Google’a bırakırsanız, büyük olasılıkla orada bulduğu şeyin ilk 160 karakterinden başka bir şey olmayacaktır. Sayfanın üst kısmında, resim alt metninde veya makinelerinin okuyabileceği herhangi bir şeyde reklamlarınız varsa, berbat bir meta açıklamaya takılıp kalabilirsiniz.

Öyleyse, bir tane yazmak için zaman ayırın.

Karakter Seti

HTML örneği:

Bu ne işe yarıyor?

Bu meta etiket, tarayıcının içeriği yorumlamak için kullanması gereken karakter kümesini tanımlar.

Buna gerçekten ihtiyacın var mı?

UTF-8 tek karakter seti değildir ve evrensel olarak kabul edilebilir değildir. Bu nedenle, bu meta etiketi kullanarak web siteniz için varsayılan karakter kümesini tanımladığınızdan emin olun.

Web sitenizin farklı bir karaktere ihtiyaç duyup duymadığından emin değilseniz, [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] Web sitesi uluslararası bir kitle için çevrilecekse kesinlikle UTF-8’den farklı bir karakter kümesi kullanmanız gerekeceğini söylemek güvenlidir.

hreflang

HTML Örneği:

Bu ne işe yarıyor?

Bu etiket, Google’a sayfanın içeriğinin hangi dilde veya bölgesel lehçede yazıldığını söyler, böylece onu doğru kullanıcılara gösterebilir.

Buna gerçekten ihtiyacın var mı?

Bu meta etiketi kullanmanın birkaç nedeni vardır:

• Farklı çevrilmiş sürümleri olan uluslararası bir web sitesi oluşturduğunuzda;
• İçeriği en-us ve en-en gibi belirli bir lehçede yazdığınızda;
• Sayfanız çeşitli diller veya lehçeler içeriyorsa ve her birinin algılanmasını istiyorsanız.

Viewport

HTML Örneği:

Bu ne işe yarıyor?

Google’ın sayfanızı tüm cihazlarda nasıl oluşturması gerektiği konusunda yol gösterir, ancak mobil cihazlara öncelik veren bu dünyada özellikle önemlidir.

Buna gerçekten ihtiyacın var mı?

Evet. Viewport meta etiketi, Google’ın açıklamak için büyük çaba sarf ettiği bir etikettir. Temel olarak, eklemezseniz veya yanlış kullanılırsa, mobil cihazlarda kullanıcıların görüntüleme deneyimini kesintiye uğratabilirsiniz.

Bu nedenle Google, içeriğin her seferinde width=device-width, initial-scale=1.0 olarak ayarlanmasını önerir. Minimum ölçek gibi değişkenler sunmaya çalışırsanız, web sitenizin dikey yönelimden manzaraya kadar basit bir şeyden dönüştüğü için görünümüne zarar verebilirsiniz.

Canonical Link

HTML Örneği:

Bu ne işe yarıyor?

Web sitenizde yinelenen içerik veya birbirine çok benzeyen sayfalar olduğunda, kanonik meta etiketi Google’a hangi sayfanın orijinal olduğunu ve buna trafik çekmesi gerektiğini söyler.

Buna gerçekten ihtiyacın var mı?

Google, içeriği kopyalamaya nazik davranmaz. Ancak “Bugün WordPress Güvenliğinizi Güçlendirmenin 5 Yolu” parçanızın, 2015’ten itibaren “WordPress Güvenliğini Güçlendirmenin 7 Yolu” adlı bir gönderinin yeniden yazılması olduğunu varsayalım.

Google’ın web sitenizde benzer içeriğe sahip olduğunuz için sizi cezalandırmasına izin vermek yerine (ve böylece aynı şey için iki kez sıralamaya çalışmanız) yerine, bu meta etiketi Google’a orijinalin nerede yaşadığını göstermek için kullanacaksınız.

URL yapınızı değiştirdiyseniz ve tüm trafiğin en güncel bağlantıya gittiğinden emin olmak istiyorsanız, bu da kullanışlı olacaktır.

Robots

HTML Örneği:

yada

Bu ne işe yarıyor?

Robots meta etiketleri, tüm arama botlarına (“robotlar”) veya belirli tarayıcı botlarına (“googlebot”, “bingbot”, “duckduckbot” vb.) Bir sayfanın nasıl ele alınacağını söyler. Genellikle bir sayfanın nasıl dizine eklenmesi gerektiği ile ilgilidir.

Buna gerçekten ihtiyacın var mı?

Varsayılan olarak, arama motorları web sitenizde oluşturduğunuz her sayfadaki bağlantıları indeksleyecek ve izleyecektir.

Arama motorlarını başka türlü yapmaları için yönlendirmenizin birkaç nedeni vardır:

• noindex: Bir sayfayı aramadan gizlemek istediğinizde bunu kullanın. (Güvenlik için buna güvenmeyin, unutmayın: bu sadece bir öneridir.)
• nofollow: Bu, katkıda bulunanların içeriğini kabul eden ancak içeriği incelemeyen bloglar için kullanışlıdır. Bu şekilde, sayfaya bağlı kuruluş bağlantıları eklenmişse, Google bunları takip etmeyecektir.
• nosnippet veya max-snippet: Bu, metninizin, resminizin veya video pasajınızın aramada nasıl göründüğünü kontrol eder.
• noarchive: Bir sayfanın önbelleğe alınmış daha eski sürümleri varsa, arama motorlarının bunları göstermesini engellemek için bunu kullanın.
• unavailable_after: [tarih]: Bu, Kara Cuma satışları gibi sınırlı bir promosyon için iyi bir tanesidir. Ekim’den Aralık’a kadar sayfaya trafik çekmek isteyebilirsiniz, ancak tatiller bittiğinde ve anlaşmalar artık geçerli olmadığında onu aramadan çıkarmak mantıklıdır.

Google Site Verification

HTML Örneği:

Bu ne işe yarıyor?

Bu, Google Search Console için site sahipliğinizi doğrulamak için kullanabileceğiniz yöntemlerden biridir.

Buna gerçekten ihtiyacın var mı?

Diğer seçeneklerden birini seçtiyseniz, bu meta etikete ihtiyacınız yoktur. Örneğin, Google Analytics izleme kodunuz aracılığıyla veya DNS kaydınızı güncelleyerek site sahibi olduğunuzu doğrulayabilirsiniz. Tercih ederseniz, HTML meta etiketini başlığınıza ekleyebilirsiniz.

Twitter Cards And Open Graph (Social Media)

HTML Örneği:

Bu ne işe yarıyor?

Open Graph meta etiketleri (yukarıdaki snippet gibi) Facebook ve LinkedIn’e, bu sosyal medya platformlarında paylaşılan bir sayfanın veya gönderinin meta verilerini nasıl görüntüleyeceğini söyler.

Twitter Kartı meta etiketleri, Twitter dışında aynısını yapar ve genellikle kullanıcı adınızı (@) da ister.

Buna gerçekten ihtiyacın var mı?

Yardımcı olabilir, ancak gerekli olmaktan uzaktır. Deneyimlerime göre, web sitemdeki bir sayfanın temel meta verilerini (ör. Başlık, meta açıklama, öne çıkan resim) doldurduğumda, bunu sosyal medyada tanıttığımda tam olarak ortaya çıkan şey budur.


Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]