Belge yapısı bölümünde, bir HTML dokümanının <head> bölümünde neredeyse her zaman bulabileceğiniz bileşenler hakkında bilgi edindiniz. <title>, <link>, <script>, <style> dahil olmak üzere <head> içindeki her şey ve daha az kullanılan <base> aslında "meta veri" olsa da meta veriler için bu diğer öğelerle temsil edilemeyen bir <meta> etiketi vardır.
Bu spesifikasyon birkaç meta türü içerir ve herhangi bir resmi spesifikasyonda yer almayan, uygulama destekli çok sayıda başka meta türü de vardır. Bu bölümde, spesifikasyonlara dahil edilen özellikleri ve değerleri, bazı yaygın meta adları ve içerik değerlerini, ayrıca arama motoru optimizasyonu, sosyal medya gönderileri ve kullanıcı deneyimi için whatWG veya W3C tarafından resmi olarak tanımlanmamış birkaç meta türü ele alacağız.
Gerekli <meta> etiket, yeniden ziyaret edildi
Daha önce ele aldığımız iki gerekli <meta> etiketini (karakter kümesi bildirimi ve görüntü alanı meta etiketi) tekrar gözden geçirelim ve bu süreçteki <meta> etiketini daha iyi anlayalım.
<meta> öğesinin charset özelliği benzersiz bir şekilde ortaya çıktı. Başlangıçta karakter kümesi meta verileri <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> olarak yazılmıştı, ancak çok sayıda geliştirici content özelliğini content="text/html" charset="<characterset>" olarak yanlış yazdı ve tarayıcılar karakter kümesini özellik olarak desteklemeye başladı. Bu öğe artık HTML yaşam standardında <meta charset="<charset>" /> olarak standart hale getirilmiştir. Burada, HTML için <charset> büyük/küçük harfe duyarlı değildir ve "utf-8" dizesidir.
http-equiv özelliğini eklemek için kullanılan orijinal karakter kümesi meta beyanının kullanıldığını fark etmiş olabilirsiniz. Bu, meta etiket temelde bir HTTP üstbilgisinde ayarlanabilecek olanı kopyaladığından "http-equivalent" kelimesinin kısaltmasıdır. charset istisnası dışında, WHATWG HTML spesifikasyonunda tanımlanan diğer tüm meta etiketler http-equiv veya name özelliğini içerir.
Resmi olarak tanımlanmış meta etiketler
İki temel meta etiket türü vardır: Eski karakter kümesi meta etiketi gibi http-equiv özelliğine sahip pragma yönergeleri ve doküman yapısı bölümünde ele aldığımız name özelliğine sahip görüntü alanı meta etiketi gibi meta türler. Hem name hem de http-equiv meta türleri, listelenen meta veri türünün içeriğini tanımlayan content özelliğini içermelidir.
Pragma yönergeleri
http-equiv özelliğinin değeri olarak bir pragma yönergesi vardır. Bu yönergeler, sayfanın nasıl ayrıştırılması gerektiğini açıklar. Desteklenen http-equiv değerleri, HTTP üstbilgilerini doğrudan ayarlayamadığınızda ayar yönergelerini etkinleştirir.
Spesifikasyon, çoğu başka ayarlanma yöntemlerine sahip yedi pragma yönergesi tanımlar. Örneğin, <meta http-equiv="content-language" content="en-us" /> ile bir dil yönergesi ekleyebileceğinize, ancak HTML öğesinde lang özelliğinin nasıl kullanılacağı konusunu daha önce ele almıştık.
En yaygın pragma yönergesi refresh yönergesidir.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
content özelliğinde ayarlanan saniye sayısı aralığında yenilenecek ve hatta farklı bir URL'ye yönlendirme yapacak bir yönerge ayarlayabilirsiniz. Ancak bu yöntem önerilmez. Kullanıcılardan açıkça istekte bulunmadan içeriğin yenilenmesi ve yönlendirilmesi, kullanılabilirliği olumsuz yönde etkiler ve erişilebilirliği olumsuz etkiler. Bir paragrafın ortasındayken sayfa sıfırlanırken nefret etmiyor musunuz? Bilişsel sorunlar veya görme sorunları yaşadığınızı düşünün. Bir yönlendirmeyle yenileme ayarlayacaksanız, kullanıcının sayfayı okumak için yeterli zamana sahip olduğundan, işlemi hızlandırmak üzere bir bağlantı ve uygunsa "saati durdur" ve yönlendirmenin gerçekleşmesini engelleyen bir düğmeye sahip olduğundan emin olun.
Ziyaretçileri rahatsız etmek dışında kullanıcı oturumunun zaman aşımına uğraması için bir neden olmadığından bunu sitemize dahil etmeyeceğiz.
En yararlı pragma yönergesi, mevcut doküman için içerik politikası tanımlanmasını sağlayan content-security-policy'dir. İçerik politikaları çoğunlukla, siteler arası komut dosyası çalıştırma saldırılarına karşı korumaya yardımcı olan izin verilen sunucu kaynaklarını ve komut dosyası uç noktalarını belirtir.
<meta http-equiv="content-security-policy" content="default-src https:" />
HTTP üstbilgilerini değiştirmek için erişiminiz yoksa (veya erişiminiz varsa) content-security-policy yönergeleri için boşlukla ayrılmış içerik değerlerinin bir listesini burada bulabilirsiniz.
Adlandırılmış meta etiketler
Genellikle adlandırılmış meta verileri eklersiniz. Özellik değeri meta verinin adıdır ve name özelliğini ekleyin. Pragma yönergelerinde olduğu gibi content özelliği de gereklidir.
name özelliği, meta verilerin adıdır. viewport özelliğine ek olarak, büyük olasılıkla description ve theme-color öğelerini dahil etmek isteyeceksiniz, ancak keywords eklemeyeceksiniz.
Anahtar kelimeler
Arama motoru optimizasyonu yılan-yağ satış görevlileri, anahtar kelime meta etiketini alakalı anahtar terimler listeleri yerine virgülle ayrılmış spam kelime listeleriyle doldurarak kötüye kullanır. Dolayısıyla, arama motorları bu meta verileri artık yararlı olarak değerlendirmez. Bunları eklemek için zaman, çaba veya bayt harcamaya gerek kalmaz.
Açıklama
Bununla birlikte, description değeri SEO için yararlıdır: Açıklama içeriği değeri genellikle arama motorlarının, arama sonuçlarında sayfa başlığının altında görüntülediği değerdir. Firefox ve Opera gibi çeşitli tarayıcılar, yer imlerine eklenmiş sayfaların varsayılan açıklaması olarak bunu kullanır. Açıklama, sayfa içeriğinin kısa ve doğru bir özeti olmalıdır.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Açıklamamızın ikinci yarısı sizin için bir anlam ifade etmiyorsa muhtemelen Zoolander filmini izlememişsinizdir.
Robotlar
Sitenizin arama motorları tarafından dizine eklenmesini istemiyorsanız bu durumu onlara bildirebilirsiniz. <meta name="robots" content="noindex, nofollow" />, botlara siteyi dizine eklememelerini ve hiçbir bağlantıyı izlememelerini bildirir. Bot'ların isteği dinlemesi gerekir ancak bu isteğin dikkate alınmasını gerektiren bir yasa yoktur. HTTP üstbilgileri aksi belirtilmediği sürece sitenin dizine eklenmesi ve bağlantıları takip etme isteğinde bulunmak için <meta name="robots" content="index, follow" /> öğesini eklemenize gerek yoktur.
<meta name="robots" content="index, follow" />
Tema rengi
theme-color değeri, tarayıcı arayüzünü özelleştirmek için bir renk tanımlamanıza olanak tanır. İçerik özelliğindeki renk değeri tarayıcılar ve işletim sistemlerinin desteklenmesi tarafından kullanılır ve böylece başlık çubuğunun, sekme çubuğunun veya diğer Chrome bileşenlerinin renklendirilmesini destekleyen kullanıcı aracılarına önerilen bir renk sağlamanıza olanak tanır. Bu meta etiket özellikle progresif web uygulamaları için yararlıdır. Ancak, PWA'nın gerektirdiği bir manifest dosyası ekliyorsanız bunun yerine tema rengini ekleyebilirsiniz. Bununla birlikte, rengin HTML'de tanımlanması, rengin oluşturma işleminden hemen önce bulunmasını sağlar. Bu, ilk yüklemede manifestin beklenmesine göre daha hızlı olabilir.
Tema rengini sitemizin arka plan renginin mavi tonuna ayarlamak için şunları ekleyin:
<meta name="theme-color" content="#226DAA" />
Tema rengi meta etiketi, medya sorgularına göre farklı tema renklerinin ayarlanmasını sağlayan bir media özelliği içerebilir. media özelliği yalnızca bu meta etikete eklenebilir ve diğer tüm meta etiketlerde yoksayılır.
Birkaç başka name meta değeri daha vardır, ancak en yaygın olanları tartıştıklarımızdır. Farklı medya sorguları için farklı theme-color değerleri belirtmek dışında, her meta etiketten yalnızca bir tanesini ekleyin. Eski tarayıcıları desteklemek için birden fazla meta etiket türü eklemeniz gerekiyorsa kullanıcı aracıları bir eşleşme bulana kadar birbirini izleyen kuralları okuyacağından eski değerlerin yeni değerlerden sonra gelmesi gerekir.
Grafiği Aç
Open Graph ve benzer meta etiket protokolleri, Twitter, LinkedIn ve Facebook gibi sosyal medya sitelerinin içeriğinize yönelik bağlantıları nasıl görüntülediğini kontrol etmek için kullanılabilir. Dahil edilmezse sosyal medya siteleri, sayfanızın başlığını ve açıklama meta etiketindeki açıklamayı doğru bir şekilde alır, arama motorlarıyla aynı bilgiler gösterilir ancak sitenizde bir bağlantı yayınlandığında kullanıcıların görmesini istediğiniz bilgileri kasıtlı olarak ayarlayabilirsiniz.
Facebook veya Twitter'da MachineLearningWorkshop.com veya web.dev adreslerine bağlantı yayınladığınızda resim, site başlığı ve site açıklaması içeren bir kart gösterilir. Kartın tamamı, sağladığınız URL'ye yönlendiren bir köprüdür.
Open Graph meta etiketlerinin her birinde iki özellik vardır: name özelliği yerine property özelliği ve bu özelliğin içerik veya değeri. property özelliği resmi spesifikasyonlarda tanımlanmamıştır, ancak Open Graph protokolünü destekleyen uygulamalar tarafından yaygın olarak desteklenmektedir. property gibi "yeni" özellikler oluşturmak, protokol özelliği için oluşturulan özellik değerlerinin, name veya http-equiv özelliklerinin gelecekteki değerleriyle çakışmamasını sağlar.
Facebook medya kartı oluşturun:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Gösterilmesi için yayınınızın başlığını ekleyin. Bu başlık genellikle resmin altında ve açıklamanın üstünde gösterilir. Açıklama, yayınınızı özetleyen en fazla üç cümleden oluşmalıdır. Bu ad, og:title içinde tanımlanan başlıktan sonra görünür. https:// protokolü dahil olmak üzere, görüntülenmesini istediğiniz banner resminin mutlak URL'sini sağlayın. HTML'ye görsel eklerken, resim başka bir yerde görünse bile resim için her zaman alternatif bir metin açıklaması ekleyin. Open Graph sosyal medya kartlarında alt özelliğini, og:image:alt özelliğinin içerik değeri olarak tanımlayın. og:url ile standart bir URL de ekleyebilirsiniz.
Bu meta etiketlerin tümü Open Graph protokolü'nde tanımlanır. Değerler, üçüncü taraf web uygulamasının görüntülemesini istediğiniz içerik olmalıdır.
Diğer sosyal medyaların Twitter kartı işaretlemesi gibi kendi söz dizimi vardır. Bu, bağlantının göründüğü yere bağlı olarak farklı bir deneyim sunulmasını veya URL'nin sonuna bir parametre ekleyerek bağlantı izlemeyi etkinleştirmeyi sağlar.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Twitter'da, name özelliğinin değerinin gelecekteki özelliklerle çakışmadığından emin olmak için Twitter kartı verileri için Open Graph'teki property özelliği gibi yeni bir özellik kullanmak yerine tüm ad değerlerinin önüne twitter: getirilir.
Sosyal medya kartınızın Twitter ve Facebook'ta nasıl görüneceğini öğrenebilirsiniz.
Farklı sosyal medya siteleri veya farklı bağlantı parametreleri için farklı kart resimleriniz, başlıklarınız ve açıklamalarınız olabilir. Örneğin, https://perfmattersconf.com, URL'nin parametresine bağlı olarak og:image, og:title ve og:description için farklı değerler ayarlar.
Twitter'ın Kart Doğrulayıcısı'na https://perfmattersconf.com?name=erica ve https://perfmattersconf.com?name=melanie girerseniz bu iki farklı kart görürsünüz. Her ikisi de aynı konferans ana sayfasına bağlantı veren, ancak farklı içerikler sağladık.
Diğer yararlı meta bilgiler
Biri sitenize yer işareti koyarsa, ana ekranına eklerse veya siteniz progresif bir web uygulamasıysa ya da çevrimdışı çalışıyorsa veya tarayıcının Chrome özellikleri görüntülenmemişse mobil cihazın ana ekranına uygulama simgeleri sağlayabilirsiniz.
Kullanmak istediğiniz başlangıç resimlerine bağlantı vermek için <link> etiketini kullanabilirsiniz. Burada, medya sorgularıyla birlikte birkaç resim eklemeyle ilgili bir örnek görebilirsiniz:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Siteniz veya uygulamanız web uygulaması özelliğine sahipse, yani site geri düğmesi gibi minimum kullanıcı arayüzüyle kendi başına kullanılabiliyorsa, tarayıcıya aşağıdakileri belirtmek için meta etiketler kullanabilirsiniz:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Bunları yalnızca uygulamanız gerçekten uygulama özellikliyse ekleyin. Siteniz böyle değilse, gerçekten kötü bir kullanıcı deneyimine yol açacak en ateşli destekçilerinizi, (sitenizi ana ekranlarına ekleyenleri) kurmuş olursunuz. Takipçilerinizin sevgisini kaybedeceksiniz.
Birisi simgenizi küçük cihazının ana ekranına kaydedecekse, işletim sistemine küçük bir cihazın ana ekranında fazla yer kaplamayan kısa bir ad vermeniz gerekir. Bunu bir meta etiket ekleyerek veya bir web manifest dosyası kullanarak yapabilirsiniz. Aşağıda meta etiket yöntemi gösterilmektedir:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Birkaç meta etiketi ele almışsınızdır. Bunların tümü başlığınızı daha uzun hale getirecektir. Gerçekten de web uygulaması özellikli, çevrimdışı dostu bir progresif web uygulaması oluşturuyorsanız, bu iki ilave meta etiketi eklemek yerine short_name: MLW öğesini bir webmanifest dosyasına daha basit ve kısa bir şekilde ekleyebilirsiniz.
Manifest dosyası, <link> ve <meta> etiketleriyle dolu, kontrolsüz bir başlığı engelleyebilir. Genellikle manifest.webmanifest veya manifest.json adında bir manifest dosyası oluşturabiliriz. Daha sonra, rel özelliği manifest ve href özelliği manifest dosyasının URL'sine ayarlanmış kullanışlı <link> etiketini kullanırız:
<link rel="manifest" href="/mlw.webmanifest" />
Bu seri HTML konusuna odaklanmıştır; ancak progresif web uygulamaları ile ilgili web.dev kursuna veya MDN'nin web uygulaması manifest dokümanlarına göz atabilirsiniz.
HTML'niz artık şuna benzer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Oldukça uzun oldu, ama tamamlandı.
<head> metriğiniz büyük oranda tamamlandığına göre, bazı anlamsal HTML verileri derinlemesine inceleyebilirsiniz.
Öğrendiklerinizi sınayın
Meta veri bilginizi test edin
Yenileme pragma yönergesi.
Graph meta etiketlerini açın.