2017'de Hangi Meta Etiketleri Kullanımdan Kalktı, Hangileri Kullanılmalıdır?

Meta etiketleri, HTML belgelerinin bölümünde görünen HTML etiketleridir ve web sitelerini doğru bir şekilde hazırlamaya yardımcı olmak için web tarayıcısı tarafından yorumlanabilecek sahne dışı ayarlar veya belirli bilgi işlemek için arama motorları tarafından yorunlanırlar. Bu sıralamada SEO'ya yardımcı olur.

2017'de alakalı olan tüm meta etiketlere bir göz atalım, çünkü kaç tanesinin kullanımdan kaldırıldığını görünce şaşırabilirsiniz :). Burada görmediğiniz bir meta etiket varsa, artık ihtiyacınız olmayacağı muhtemeldir.

Gerekli Meta Etiketleri (veya Temel Meta Etiketler)

 <meta charset="utf-8">

Meta karakter seti web sitesinin karakter kodlamasını belirtir .

<title>Page Title</title>

Web sayfasının başlığını tanımlar ve Google, Bing ve Yahoo gibi arama motorlarında görüntülenen arama sonucunun başlığıdır. En fazla 70 karakter kullanmanızı öneririm, çünkü fazlası kesilir.

 <meta name="description" content="Page description">

Web sayfasının ne olduğunu anlatan kısa bir metin parçası - bu snippet, web sayfasının arama sonuçlarıdaki açıklaması olarak görünür ve en fazla 150 karakter olmalıdır. Başlıkta olduğu gibi 150'den fazla karakterler kesilecektir.

 <meta name="viewport" content="width=device-width, initial-scale=1">

Duyarlı tasarım meta etiketi olarak bilinen Meta viewport , mizanpajın ve içeriğin mobil görünüm penceresine nasıl uyum sağladığını açıklar - content=özellik birçok farklı değeri kabul eder, ancak yukarıdaki snippet nispeten standarttır.

 <base href="//cdn.example.com/">

CSS, JavaScript ve resimler gibi dış dosyalara başvurmak için temel bir URL görevi görür. Dünyanın en kullanışlı meta etiketi değil, ancak kaynak kodu miktarını azaltmaktadır.

 <meta name="application-name" content="Application Name">

Web sitesi, bir web uygulaması gibi kullanılabilecek şekilde bir "uygulama adı" belirtir; kullanıcı, web tarayıcısında "Ana Ekrana Ekle" işlevini seçtiğinde mobil cihazlardaki uygulama simgesinin altında görünür.

Tavsiye edilen

 <meta name="referrer" content="unsafe-url">

HTTPS, yönlendirici verilerini varsayılan olarak engeller; bu da güvenliği sağlar; ancak web analizi kullanan web sitelerinin yönlendirme verilerini engeller. Meta yönlendirici , web sitenizin tam yönlendiren URL'yi web sayfalarına gönderip gönderemeyeceğini belirtir; content=özellik, birçok değeri kabul eder, bu nedenle hangisinin sizin için doğru olduğunu öğrenmek isteyebilirsiniz.

 <link rel="stylesheet" href="https://example.com/styles.css">

CSS'yi harici bir CSS dosyasına eklemenin ve etiketi ile referans yaparak web sayfalarını daha hızlı yüklemesini sağlar. Fakat son yıllarda keşfettiğimiz gibi, bu durum her durumda doğru olmayabilir. Bu uygulama sayfa performansını artırırken , uzun vadede SEO'yı etkilediği bilinen TTFB'yi (İlk Yayınlama Süresine Kadar Geçen Zaman) artırır.

Google Stuff

<meta name="robots" content="index,follow,noodp">

<meta name="googlebot" content="index,follow">

Bazen bazı web sayfalarının arama motorlarında sıralamasını istemiyoruz.  robots - üst snippet, arama motoru tarama ve dizine ekleme işlemini kontrol eder, oysa alt snippet yalnızca Google Bot için geçerlidir.

<meta name="google-site-verification" content="verification_token"> 

Web sitenizi, Google Web Yöneticisi Araçları'na erişmek için doğrular.

 <meta name="google" content="nositelinkssearchbox">

Google'daki site bağlantıları arama kutusunu devre dışı bırakır.

 <meta name="google" content="notranslate">

Google Chrome'un web sayfasını başka dillere çevirmesini önler.

Yinelenen İçerik Önleme

<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> 

Aynı web sayfasının her biri farklı URL'lerde bulunan iki farklı sürümü olduğunda, Google "yinelenen içerik" için bir sıralama cezası uygular. canonicalDeğeri kullanarak, esasen arama motorlarına: "Hey, bunu tasarım gereğince yaptık!" Diyorsunuz demektir ve bu nedenle hiçbir ceza uygulanmayacaktır.

 <link rel="amphtml" href="https://example.com/path/to/amp-version.html">

Web sayfasının alternatif AMP versiyonunu referanslar .

 <link rel="alternate" href="https://es.example.com/" hreflang="es">

Web sayfasının başka bir dilde olabileceği bir sürümüne bir referans verir - şu anki web sayfasının dilini şu şekilde de belirleyebilirsiniz :

<html lang="es">

RSS

 <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">

Yukarıdaki dil snippet'ine benzer bir snippet kullanarak, web sayfası için alternatif bir RSS beslemesi versiyonu da tanımlayabiliriz.

 <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

Aynı şey, ancak Atom yayını ile.

favicon

 

<link rel="icon" href="favicon-16.png" sizes="16x16" type="image/png">

<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">

<link rel="icon" href="favicon-48.png" sizes="48x48" type="image/png">

<link rel="icon" href="favicon-62.png" sizes="62x62" type="image/png">

<link rel="icon" href="favicon-192.png" sizes="192x192" type="image/png">

 

Yeni tarayıcıların birden çok favicon boyutunu yüklemek için farklı bir sözdizimi vardır.

Ön Yükleme, Getirme, Görüntüleme

<link rel="dns-prefetch" href="//example.com/">

<link rel="preconnect" href="https://www.example.com/">

<link rel="prefetch" href="https://www.example.com/">

<link rel="prerender" href="https://example.com/">

<link rel="subresource" href="styles.css">

<link rel="preload" href="image.png">

 

Önceden yükleme ve ekleme , kısaca, başka bir web sayfasından kaynak yükleme ile ilgilidir ; böylece ziyaretçinin web sayfasını ziyaret ettiğinde (CSS, JavaScript, resimler vb.) Zaten yüklenir - Burada performans göz önünde bulundurulması gereken hususlar var , bu nedenle öncelikle bu konuyla ilgili şu yazıyı okumayı öneriyorum .

Sonuç

Meta etiketleri genellikle üç kategoriye ayrılır.

  1. Gerekli (burada ele almış olduğumuz).
  2. Çok kullanışlı ve / veya ortak (ayrıca ele aldık).
  3. Kullanımdan kaldırıldı (alt metotla değiştirildi - kısmen kapalı).
  4. 0 işe yaramaz.
  5. Sosyal meta etiketleri (Facebook, Twitter vb. - Bir Sonraki yazımda inş.).