Front-End Geliştiriciler için HTML, Head etiketleri öncelikleri !

Öncelikle bir HTML belgesi içerisinde bulunabilecek her şeyin bir listesi yapılmış.Onu sizlerle paylaşmak isterim.linki

Şimdi önem derecelerini sizlere göstereceğim.2017 yılında front-end geliştirici olarak head etiketinin önemi mevcut.Bir çok arama motoru ile etkileşime buradan geçiyoruz.Ve bu cidden önemli bir konu.

Doctype : Bütün html belgelerinde en üst seviyede olması zorunlu etiket.

<!doctype html>

Charset kullanımı çok önemli özellikle UTF-8’in kullanılacağını bildiren etiket.

<meta charset="utf-8">

olarak mutlaka eklememiz gerekmekte.Belgeniz için karakter kodlamasını ayarlamak neden önemlidir derseniz.Artık gelişen dünyamız global süreç içerisinde her ülkeden her alfabeden insan ile iş yapma ihtimalimizin yüksek olmasına neden olmakta.Bu durumda karakter setinizin belli dilleri desteklemeyen yapısı sizin ifade etmek sitediklerinizi sınırlandıracaktır.

X-UA-Uyumlu yapmamız lazım.Tabi bu üst seviye olmasada orta seviyede bir öneme sahip.Şimdi bizler Internet Explorer için en güncel yorumlayıcıyı kullanmasını bildireceğiz bunu yapmak için şu etiket yapısını kullanalım.

<meta http-equiv="x-ua-compatible" content="ie=edge">

Sıradaki gerçekten günümüzde en önemli olanlardan biri olan Viewport mevcut.Bu neden önemlidir en basit anlamda responsive yani ekran ölçülerine göre düzene giren internet siteleri için görünürlük bildirimi sağlar.Yani uyumlu olduğu boyutu ayarlamanızı ve görünür alanı belirlemenizi sağlar.Ayrıca mobil cihazlardan girildiğinde zoom seviyesi bile buradan ayarlanıyor.

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

Title yani başlık Seo konusunda google’un önem verdiği konulardan biridir o yüzden bunun kullanım önceliği yüksektir.Yani bunu mutlaka kullanmalısınız diyebilirim.Ayrıca döküman sayfanızın başlığını buradan belirtebilirsiniz.Bir çok önemi var bunu kısaca geçip olası kullanmını ve max kaç karakter gerektiğini söyleyeceğim.

<title>65 karakterden az bir başlık kullanılması önemlidir.</title>

Description yani açıklama.150 karakterden fazla olmaması gerekiyor.Önem derecesi başlık ile aynı olan açıklama döküman hakkında kısa bir açıklama sağlar.Ve sosyal medyadan arama motorlarında görünecek o kısa açıklamayı burada oluştururuz.

<meta name="description" content="150 karakterden az bir açıklama yazınız.">

Favicons önem derecesi olarak orta.Bildiğiniz gibi yorumlayıcıların sekmelerinde girdiğimiz başlığın yanında küçük bir site ikonu mevcuttur.İşte bunun ismi facicon’dur.32×32 px kullanıma sahip.Bu günlerde PNG üzerinden .ico kullanımı öneriliyor.Bildiğiniz gibi Internet Explorer eski bir yorumlayıcı olarak görülüyor.Ama kullanımı çok geniş bir kitle ve devlet dairelerinde mevcut.Yeni nesil yorumlayıcılar png ile favicon’u mevcut hala getirse bile genel olarak dinamiklik açısından .ico çevirisi yapılması tavsiye ediliyor.Ama png son günlerde gerçekten kullanılmaya başlandı şimdi nasıl kullanılacağını sizlere göstereceğim.

<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"> bu bildiğiniz üzere .ico formatı için nasıl kullanılacağı.

Şimdi ise png ile kullanımı göstereceğim.Eminim bunu bir çok insan daha önce denememiştir.

<link rel="icon" type="image/png" href="https://example.com/favicon.png">

ayrıca favicon dönüştürücü bir tool mevcut onuda paylaşmak istedim : https://www.favicon-generator.org/

bir başka dönüştürücüde mevcut : https://realfavicongenerator.net/

Apple Touch Icon : Bildiğiniz üzere apple ürünler üzerinden girilecek siteler için site iconu belirlemek gerekebilir.Yani mesela favoriye alınmış sonra okuya alınmış yada ekrana direk kaydedilmiş bir web sitesi oldunuz.Bu durumda iconunuz olmalı.Bunun kullanım önceliği az ama benim kişisel tercihim her porjenizde olmalı.

 <link rel="apple-touch-icon" href="/custom-icon.png"> şeklinde bir kullanımı mevcut.

Apple yaptık sıra Windows Başlığına geldi.Sunum ve linkleme için yapılması çokta gerekli olmayan ama yinede gerekirse yapılması gereken bir yapı.

<meta name="msapplication-config" content="browserconfig.xml" /> şeklinde bir kullanımı var.

Ayrıca xml işaretlemesi için gerekli en azami yapı

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="small.png"/> <square150x150logo src="medium.png"/> <wide310x150logo src="wide.png"/> <square310x310logo src="large.png"/> </tile> </msapplication> </browserconfig>

Cononical : Şimdi seo için önemli bir yapıdır bu.Aynı içeriğe sahip iki sayfamız mevcut yani iki sayfamız bir adet kategoriye gidiyor mesela example.com/kategori example.com/kategoriler ve ikiside aynı sayfaya gidiyor. Bu durumda bunlardan birinin asıl sayfa olduğunu belirlememiz gerekiyor. işte bunu cononical ile yapacağız.

Bu önem derecesi olarak orta seviye ama yapılmalıdır.

 <link rel="canonical" href="http://example.com/kategoriler">

şeklinde bir kullanımı vardır. şimdi bu yukarıdakiler dışında html etiketleride mevcut.

Dil etiketi: Önem derecesi en yüksek olan dil etiketi sitenizin hangi dilde yapıldığını ve hizmet verdiğini göstermekte.O yüzden önemli kullanımı

<html lang="tr">

Direction etiketi : Şimdi mesela biz sağdan başlayarak yazımızı yazsaydık yazımızın yönü sola doğru gidecekti ve biz bunu belirlemediğimiz sürece bu soldan başlayarak sağa doru gitmeye devam edecek ve yazdığımız anlaşılmayacaktı.Oysa bunu düzeltecek bir etiketimiz mevcut.Değişik dillerde bu tarz değişiklikler olabiliyor onlar için bu tarz bir güzellik var önem derecesi orta ama kullanımı gerekiyorsa yüksektir.

<html dir="rtl"> şeklinde bir kullanımı vardır.

Alternatif dil bildirimi : Mesela sitenizi ingilizce olarak bir versiyonu var ve siz onu belirtmek istiyorsunuz onun linklemesini aşağıdaki şekilde yapabilir ve robota onun ingilizce versiyonunuz olduğunu belirtebilirsiniz.Önemi az.

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

Css önceliği çok önemlidir.<head> içerisinde bütün css dosyaları JavaScript dosyalarından önce yüklenir.

Sosyal medya metaları bizlere sosyal medyada paylaşılacak linklerimiz için düzenleme yapmamızı sağlar.Fakat daha önce yaptık ve facebook yada twitter bunları eskisi gibi algılıyorsa facebook veya o sosyal medya üzerinden bunları debugger’lar üzerinden düzeltmemiz lazım.

facebook için debugger —> https://developers.facebook.com/tools/debug/

<meta property = "og: type" content = "web sitesi">
<meta property = "og: url" content = "https://example.com/page.html">
<meta property = "og: title" content = "İçerik Başlığı">
<meta property = "og: image" content = "https://example.com/image.jpg">
<meta property = "og: description" content = "Açıklama Burada">
<meta property = "og: site_name" content = "Site Adı">
<meta property = "og: locale" content = "en_US">

ayrıca facebok için meta tanımlamaları.

Twitter card ise aşağıdaki gibidir :

<meta name = "twitter: kart" content = "summary">
<meta name = "twitter: site" content = "@ site_account">
<meta name = "twitter: creator" content = "@ individual_account">
<meta name = "twitter: url" content = "https://example.com/page.html">
<meta name = "twitter: title" content = "İçerik Başlığı">
<meta name = "twitter: description" content = "İçerik açıklaması 200 karakterden daha az">
<meta name = "twitter: image" content = "https://example.com/image.jpg">

ayrıca twitter için debugger —> https://cards-dev.twitter.com/validator

Evet bugün sizlere önem derecelerine göre head içerisinde bulunan yapılardan bahsettim.Aslında karışık olarak belirtilen önem seviyeleri baktığımızda hiç bir yapı boşuna değil gerektiğinde önem derecesi artabiliyor.

O yüzden nasıl ve ne için kullanıldığını bilmek ve ezbere bir kodlama yapmamak gerekli.

Görüntülenme : 368

#head #html etiket öncelikleri #html önem dereceleri #html5