HTML etiketleri, bir web sayfasının hem tarayıcılar hem de arama motoru botları tarafından nasıl yorumlanacağını belirler. Bir etiketi yanlış kullanmak ya da hiç kullanmamak; sıralamaları, tıklama oranlarını (CTR) ve erişilebilirliği doğrudan etkiler. Bu sözlük, bir SEO uzmanının veya web geliştiricisinin bilmesi gereken her etiketi — belge yapısından yapısal veriye, görselden forma kadar — pratik örnekler ve açıklamalarla bir arada sunar.
Sayfa, bir referans kaynağı olarak tasarlanmıştır: arama kutusuna bir etiketi yazıp doğrudan ilgili bölüme atlamak mümkündür. Her etiket için ne işe yarar, SEO/erişilebilirlik açısından neden önemlidir ve doğru kullanım örneği verilmiştir. Teknik SEO hizmetlerimiz hakkında daha fazla bilgi almak ya da kendi meta etiketlerinizi oluşturmak için meta tag oluşturucu aracımızı kullanabilirsiniz.
Belge Yapısı Etiketleri
Belge yapısı etiketleri, bir HTML sayfasının iskeletini oluşturur. Tarayıcılar ve arama motorları, sayfayı işlemeye bu etiketlerle başlar; dolayısıyla doğru bir yapı hem render performansını hem de tarama verimliliğini artırır.
<!DOCTYPE html>
<!DOCTYPE html> bildirimi, tarayıcıya belgenin HTML5 standardına göre işlenmesi gerektiğini söyler; teknik olarak bir etiket değil, bir talimat satırıdır. Eksik olduğunda tarayıcılar “quirks mode” (uyumluluk modu) devreye girer, bu durum CSS düzenini bozar ve sayfanın render süresini uzatır. Arama motorları DOCTYPE’ı doğrudan sıralama faktörü olarak değerlendirmez; ancak bozuk render, Googlebot’un sayfayı doğru okuyamamasına yol açabilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
</head>
<body></body>
</html>
<html lang>
<html> etiketi belgenin köküdür; lang özelliği sayfanın dilini BCP 47 formatında tanımlar (örneğin tr, en, de-AT). Google bu özelliği, içeriği doğru dil aramaları için indekslemede ve hreflang mantığını doğrulamada kullanır. Ekran okuyucular lang değerine göre doğru telaffuz motorunu seçer, bu da erişilebilirlik açısından zorunlu kılar. lang eksikliği, sayfanın yanlış coğrafyalara sunulmasına ve hreflang hatalarına neden olabilir.
<html lang="tr">
<head>
<head> bölümü, sayfanın meta verisini ve kaynakları barındırır; tarayıcıda görsel olarak işlenmez. Buradaki etiketlerin sırası render performansını etkiler: CSS önce, JS defer/async ile sonra yüklenmelidir. Arama motorları <head> içindeki meta etiketleri, canonical ve hreflang bağlantılarını tarayarak sayfanın kimliğini ve ilişkilerini belirler.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sayfa Başlığı | Marka Adı</title>
<meta name="description" content="Sayfa açıklaması buraya gelir." />
<link rel="canonical" href="https://example.com/sayfa/" />
</head>
<body>
<body> etiketi, kullanıcıya görünen tüm içeriği kapsar. İyi yapılandırılmış bir <body>, anlamsal HTML etiketleriyle bölünmüş olmalı; böylece hem Googlebot hem de ekran okuyucular içerik hiyerarşisini doğru anlayabilir. <body> etiketine eklenen class veya id özelliklerini JavaScript ile kötüye kullanmak, render engellemesine yol açabilir.
<body>
<header>...</header>
<main>
<article>...</article>
</main>
<footer>...</footer>
</body>
<meta charset>
Karakter kodlamasını belirtir; eksik veya yanlış değer, özellikle Türkçe karakterlerin (ğ, ş, ı, ö, ü, ç) bozuk görüntülenmesine neden olur. UTF-8, dünyanın en yaygın kodlama standardıdır ve tüm karakterleri destekler. <head> içinde mümkün olduğunca üst satıra yerleştirilmelidir; tarayıcı bu etiketi görmeden kodlamayı tahmin etmeye çalışır ve hata yapabilir.
<meta charset="UTF-8" />
<meta viewport>
Mobil cihazlarda sayfanın nasıl ölçekleneceğini tanımlar. width=device-width viewport genişliğini cihaz genişliğine eşitler; initial-scale=1.0 varsayılan zoom seviyesini belirler. Google, mobil uyumluluğu sıralama faktörü olarak kullandığından bu etiket teknik SEO’nun temel taşlarından biridir. user-scalable=no gibi erişilebilirliği kısıtlayan değerler kullanmaktan kaçının.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
SEO Kritik Meta Etiketler
Bu grup, arama motoru sonuç sayfalarında (SERP) ne görüneceğini ve sayfanın nasıl indeksleneceğini doğrudan kontrol eder. Doğru yapılandırılmış meta etiketler; tıklama oranını artırır, kopyalama sorunlarını önler ve uluslararası hedeflemeyi mümkün kılar.
<title>
Sayfa başlığı, SERP’te mavi bağlantı olarak göründüğü için CTR üzerindeki en doğrudan etkiye sahip etikettir. Google, başlıkları yaklaşık 50–60 karakter (piksel tabanlı yaklaşık 600 px) sınırına göre keser; daha uzun başlıklar ”…” ile sonlanır. Her sayfa için benzersiz bir başlık yazılmalı; marka adı genellikle sonuna ” | Marka” biçiminde eklenir. Hedef anahtar kelimeyi başlığın ilk kısmına yerleştirmek en iyi uygulamadır.
<title>HTML Etiketleri Sözlüğü: SEO İçin Tüm Etiketler | AjansSEO</title>
<meta name="description">
Meta description, SERP snippet’ında başlığın altında görünen özet metindir. Google bu metni doğrudan sıralama sinyali olarak kullanmasa da iyi yazılmış bir description CTR’ı artırır. Önerilen uzunluk 120–160 karakter arasındadır; daha uzun metinler kesilir. Hedef anahtar kelimeyi doğal bir akışla metne yedirin ve kullanıcıyı tıklamaya teşvik eden bir eylem ifadesi (CTA) ekleyin.
<meta
name="description"
content="SEO için kritik HTML etiketleri: title, canonical, hreflang ve daha fazlası. Pratik örneklerle kapsamlı sözlük rehberi."
/>
<meta name="robots">
Bu etiket, arama motoru botlarına sayfanın nasıl işlenmesi gerektiğini söyler. Birden fazla direktif virgülle ayrılarak kullanılabilir. Yanlış yapılandırma, değerli sayfaların indekslenmemesine veya hassas sayfaların indekslenmesine yol açabilir. Aşağıdaki özet tablo tüm direktifleri karşılaştırır.
<!-- Sayfa indekslensin, bağlantılar takip edilsin -->
<meta name="robots" content="index, follow" />
<!-- Sayfa indekslenmesin, bağlantılar takip edilmesin -->
<meta name="robots" content="noindex, nofollow" />
<!-- Snippet 150 karakterle sınırlandırılsın -->
<meta name="robots" content="index, follow, max-snippet:150" />
<!-- Önbelleğe alınmasın -->
<meta name="robots" content="noarchive" />
Robots Meta Direktifleri Karşılaştırma Tablosu
| Direktif | Açıklama | Yaygın Kullanım Senaryosu |
|---|---|---|
index | Sayfanın indekslenmesine izin verir | Varsayılan; açıkça yazılmasına gerek yok |
noindex | Sayfanın indekslenmesini engeller | Teşekkür sayfaları, dahili arama sonuçları |
follow | Sayfadaki bağlantıların takip edilmesine izin verir | Varsayılan davranış |
nofollow | Sayfadaki tüm bağlantıları takip etmez | Düşük kaliteli sayfalarda link juice korunumu |
noarchive | Google önbelleğine alınmasını engeller | Güncel kalmak zorunlu olan içerikler |
nosnippet | SERP’te snippet gösterimini engeller | Ücretli içerik, yasal kısıtlamalar |
max-snippet:N | Snippet uzunluğunu N karakterle sınırlar | Kısmi önizleme yeterli olan içerikler |
max-image-preview:none/standard/large | Görsel önizleme boyutunu kontrol eder | Görsel hakları olan sayfalar |
max-video-preview:N | Video snippet süresini saniye olarak sınırlar | Video lisanslama kısıtlamaları |
noimageindex | Sayfadaki görsellerin indekslenmesini engeller | Telif hakkı korumalı görseller |
notranslate | Google Translate önerisini devre dışı bırakır | Dile özgü içerik |
unavailable_after: [tarih] | Belirtilen tarihten sonra indekslemeyi durdurur | Promosyon veya etkinlik sayfaları |
<meta name="googlebot">
robots meta etiketinin Google’a özgü versiyonudur. Genel robots direktifleriyle çakıştığında googlebot etiketi öncelikli kabul edilir. Diğer botlar (Bingbot, Slurp vb.) bu etiketi genellikle yok sayar. Sadece Google’a özgü bir direktif uygulamak istiyorsanız kullanın; diğer durumlarda robots etiketi yeterlidir.
<meta name="googlebot" content="index, follow, max-snippet:200, max-image-preview:large" />
<link rel="canonical">
Canonical etiketi, bir içeriğin “yetkili” URL’sini belirtir ve kopya içerik sorununu çözer. Örneğin ?utm_source=newsletter gibi parametreli URL’ler aynı sayfanın farklı versiyonları olarak görünebilir; canonical bu URL’leri orijinal adrese bağlar ve link değerini birleştirir. Her sayfanın kendi canonical’ına işaret etmesi (self-referencing canonical) en iyi uygulamadır. Canonical, bir yönlendirme değildir; kullanıcıyı hareket ettirmez, yalnızca bota sinyal gönderir.
<link rel="canonical" href="https://example.com/html-etiketleri-sozlugu/" />
<link rel="alternate" hreflang>
Hreflang etiketi, aynı içeriğin farklı dil veya bölge versiyonlarını birbirine bağlar. Google bu bilgiyi, kullanıcının diline ve konumuna göre doğru sayfayı sunmak için kullanır. Her dil versiyonunun diğer tüm versiyonlara hreflang etiketi eklemesi gerekir; tek yönlü bağlantılar hatalı sayılır. x-default değeri, hiçbir dil eşleşmesi yapılamaması durumunda sunulacak varsayılan sayfayı belirtir.
<link rel="alternate" hreflang="tr" href="https://example.com/tr/sayfa/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/page/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/seite/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page/" />
<meta http-equiv="refresh">
Bu etiket, sayfayı belirli saniyeler sonra otomatik olarak yeniler veya başka bir URL’ye yönlendirir. SEO açısından 301 yönlendirmesi yerine kullanılması önerilmez; Google bu tür yönlendirmeleri genellikle işler, ancak link değeri aktarımı güvenilir değildir. UX açısından da beklenmedik bir sayfa geçişi kullanıcı deneyimini olumsuz etkiler. Yalnızca sunucu tarafı yönlendirmesi mümkün olmadığında son çare olarak kullanın.
<!-- 5 saniye sonra yeni URL'ye yönlendir -->
<meta http-equiv="refresh" content="5; url=https://example.com/yeni-sayfa/" />
Başlık Etiketleri (H1–H6)
Başlık etiketleri, sayfanın içerik hiyerarşisini hem kullanıcıya hem de arama motoruna gösterir. Doğru kullanılan bir başlık yapısı, Googlebot’un konuları ve alt konuları anlamasına yardımcı olur; ekran okuyucular ise kullanıcıların başlık navigasyonuyla sayfada gezinmesine imkan tanır.
<h1> — Ana Sayfa Başlığı
Her sayfada yalnızca bir adet <h1> kullanılmalıdır; bu etiket sayfanın ana konusunu özetler. <title> etiketiyle aynı olmak zorunda değildir, ancak hedef anahtar kelimeyi içermesi güçlü bir sinyaldir. Google, teknik olarak birden fazla <h1> kabul eder, ancak bu durum konu odağını dağıtır. H1’in gözle görülür, yeterince büyük ve içerikle tutarlı olması gerekir.
<h1>HTML Etiketleri Sözlüğü: SEO Açısından Önemli Tüm Etiketler</h1>
<h2> — Ana Bölüm Başlıkları
<h2> etiketleri, sayfanın ana bölümlerini ayırır. Her H2 yeni bir konu grubunun başlangıcını temsil eder; bu nedenle uzun bir içerikte birden fazla H2 kullanmak hem okunabilirlik hem de SEO açısından doğrudur. Uzun kuyruklu anahtar kelimeler için H2 başlıkları iyi bir yerleşim noktasıdır.
<h2>SEO Kritik Meta Etiketler</h2>
<h3> — Alt Bölüm Başlıkları
<h3> etiketleri, bir H2 bölümünü daha küçük parçalara böler. Ürün özelliklerini, sıkça sorulan soruları veya bu sözlükteki gibi her bir etiketi ayrı ayrı açıklamak için idealdir. H2 olmadan H3 kullanmak, hiyerarşiyi bozar ve atlanmış başlık (skipping heading) hatasına yol açar.
<h3>`<link rel="canonical">` — Canonical Etiketi</h3>
<h4>, <h5>, <h6> — Derin Hiyerarşi
Bu etiketler, yalnızca gerçekten derin bir içerik hiyerarşisi gerektiğinde kullanılmalıdır. Çoğu web sayfasında H4’ün ötesine geçmek nadir bir ihtiyaçtır; zorunlu olmadıkça kullanımdan kaçınmak yapıyı sade tutar. Başlıklar asla stil amacıyla (büyük ya da koyu metin elde etmek için) kullanılmamalı; bunun yerine CSS kullanılmalıdır. Arama motorları anlambilimsel hiyerarşiye önem verir; H2’den H4’e atlayan bir yapı, sayfanın iyi organize edilmediğini düşündürebilir.
<h4>Gelişmiş Robots Direktifleri</h4>
<h5>max-snippet Kullanım Senaryoları</h5>
<h6>Özel Bot Konfigürasyonları</h6>
Başlık Atlama Sorunu: H1’den H3’e ya da H2’den H4’e doğrudan geçmek (H2 veya H3’ü atlamak), hem erişilebilirlik standartları açısından hatalıdır hem de yapısal analiz araçlarında uyarı üretir. Her başlık bir öncekiyle mantıksal bağ içinde olmalıdır.
İçerik & Anlambilim Etiketleri
Anlambilim (semantic) etiketler, içeriğin ne olduğunu değil, ne anlama geldiğini tanımlar. Arama motorları bu etiketlere dayanarak konuları, varlıkları ve içerik türlerini sınıflandırır.
<p> — Paragraf
Temel metin bloğu etiketidir. Arama motorları paragraf içindeki metni içerik olarak işler; bu nedenle anahtar kelimelerin ve bilgilerin <p> etiketleri içinde doğal akışla sunulması gerekir. <div> kullanarak paragraf oluşturmak anlambilimsel açıdan yanlıştır.
<p>HTML etiketleri, web sayfalarının yapısal iskeletini oluşturur ve hem tarayıcıların hem de arama motorlarının içeriği anlamasını sağlar.</p>
<strong> vs <b>
<strong> güçlü önem ifade eder; arama motorları içindeki metni daha önemli bir sinyal olarak değerlendirebilir. <b> yalnızca görsel kalınlık ekler, anlambilimsel bir değer taşımaz. SEO ve erişilebilirlik açısından <strong> tercih edilmelidir. Sayfa başına aşırı <strong> kullanımı sinyali sulandırır.
<p>Canonical etiketi, <strong>kopya içerik sorununu çözen</strong> en kritik SEO etiketlerinden biridir.</p>
<em> vs <i>
<em> vurgu/önem belirtir; ekran okuyucular bunu farklı bir tonlamayla seslendirir. <i> ise yalnızca italik görünüm sağlar; teknik terimler, yabancı dil ifadeleri veya düşünce akışları için uygundur. Anlambilimsel bir önem söz konusuysa <em> kullanın.
<p>Meta description, <em>doğrudan</em> sıralama faktörü değildir; ancak CTR'ı önemli ölçüde etkiler.</p>
<article>
Bağımsız olarak dağıtılabilir bir içerik birimini tanımlar: blog yazısı, haber, yorum, ürün kartı gibi. Google, <article> içindeki içeriği bağımsız bir nesne olarak ele alır ve bu yapı, Featured Snippet ve Google Discover için güçlü sinyaller gönderir. İç içe <article> kullanmak (örneğin bir yazı içindeki yorumlar) geçerlidir.
<article>
<h1>HTML Etiketleri Sözlüğü</h1>
<p>Yayın tarihi: <time datetime="2026-07-13">13 Temmuz 2026</time></p>
<p>Bu rehber, SEO açısından önemli tüm HTML etiketlerini kapsar...</p>
</article>
<section>
Tematik olarak ilişkili içerikleri gruplar; genellikle bir başlık (<h2> veya <h3>) içerir. <div>’in anlambilimsel alternatifidir; içerikleri işlevsel gruplara ayırırken kullanılır. Başlık içermeyen bir <section> kullanmak, erişilebilirlik açısından sorun yaratabilir.
<section>
<h2>Bağlantı Etiketleri</h2>
<p>Bu bölüm, bağlantı ve navigasyon etiketlerini kapsar.</p>
</section>
<main>
Sayfanın birincil içeriğini sarmalayan etikettir; her sayfada yalnızca bir kez kullanılmalıdır. Arama motorları <main> içindeki içeriği, gezinme menüsü veya footer gibi tekrarlayan içeriklerden ayırt etmek için kullanır. Ekran okuyucular, <main> üzerine atlama (skip to main content) özelliği sunar.
<main>
<article>
<h1>...</h1>
</article>
</main>
<nav>
Navigasyon bloklarını (menüler, sayfalama, breadcrumb) tanımlar. Bir sayfada birden fazla <nav> kullanılabilir; aria-label ile ayırt edilmelidir. Google, <nav> içindeki bağlantıları site yapısını anlamak için kullanır.
<nav aria-label="Ana Menü">
<ul>
<li><a href="/blog/">Blog</a></li>
<li><a href="/hizmetler/">Hizmetler</a></li>
</ul>
</nav>
<header> ve <footer>
<header>, sayfanın veya bir bölümün üst alanını; <footer> ise alt alanını tanımlar. Bunlar pozisyon değil, anlam etiketleridir; bir <article> içinde de kullanılabilir. <footer> içindeki bağlantılar ve iletişim bilgileri Google tarafından indekslenir.
<header>
<nav>...</nav>
</header>
<footer>
<address>İletişim: <a href="mailto:[email protected]">[email protected]</a></address>
</footer>
<aside>
Ana içerikle ilişkili ama onun ayrılmaz parçası olmayan içerikler için kullanılır: kenar çubukları, ilgili yazılar, reklamlar, sözlük notları. Arama motorları <aside> içindeki içeriği daha düşük öncelikle değerlendirebilir.
<aside>
<h3>İlgili Araçlar</h3>
<ul>
<li><a href="/araclar/meta-tag-olusturucu">Meta Tag Oluşturucu</a></li>
</ul>
</aside>
<figure> ve <figcaption>
Görseller, grafikler, kod örnekleri gibi bağımsız medya içeriklerini ve açıklamalarını birlikte sarmalar. <figcaption>, <img> etiketinin alt özelliğini tamamlar ve görsel içerik için ek bağlam sağlar. Google, <figcaption> içindeki metni görsel ile ilişkilendirir.
<figure>
<img
src="/gorseller/seo-etiketleri-semasi.webp"
alt="SEO için HTML etiket hiyerarşisi şeması"
width="800"
height="450"
loading="lazy"
/>
<figcaption>Şekil 1: HTML etiketlerinin SEO hiyerarşisindeki konumu.</figcaption>
</figure>
<blockquote cite> ve <cite>
<blockquote>, uzun bir alıntıyı semantik olarak işaretler; cite özelliği alıntının kaynağına URL verir. <cite>, bir eserin, kişinin veya kaynağın adını belirtmek için kullanılır. Arama motorları kaynak göstergelerini güvenilirlik sinyali olarak değerlendirebilir.
<blockquote cite="https://developers.google.com/search/docs">
<p>Canonical etiketi, sayfa konsolidasyonu için tercih edilen yöntemdir.</p>
</blockquote>
<cite>Google Arama Merkezi Belgeleri</cite>
<abbr>
Kısaltmaları ve baş harfleri açıklamak için kullanılır. title özelliği, kısaltmanın tam formunu taşır; fare üzerine gelindiğinde tooltip olarak görünür. Erişilebilirlik açısından ekran okuyucuların kullanıcıya açıklamayı sunmasına yardımcı olur.
<p><abbr title="Arama Motoru Optimizasyonu">SEO</abbr>, web sitenizin görünürlüğünü artırır.</p>
<time datetime>
Tarih ve saat bilgilerini makine tarafından okunabilir formatta işaretler. Google, <time> etiketini makale yayın tarihlerini belirlemek ve Featured Snippet mantığında kullanır. datetime özelliği ISO 8601 formatında olmalıdır.
<time datetime="2026-07-13T09:00:00+03:00">13 Temmuz 2026</time>
<address>
Bir belge veya makale yazarının iletişim bilgilerini semantik olarak tanımlar. Arama motorları bu etiketi, yazar ve işletme varlıklarını anlamak için kullanabilir; özellikle yerel SEO’da <address> içindeki bilgilerin yapısal veriyle desteklenmesi önerilir.
<address>
<strong>AjansSEO</strong><br />
Maslak Mah. Büyükdere Cad. No:128<br />
İstanbul, Türkiye<br />
<a href="tel:+902121234567">+90 212 123 45 67</a>
</address>
Bağlantı & Navigasyon
Bağlantı etiketleri, hem kullanıcıların hem de botların sayfalar arasında gezinmesini sağlar. Bağlantıların niteliği (dofollow/nofollow) ve kaynak ipuçları (preload/prefetch), SEO ve performans açısından önemlidir.
<a href>
Temel bağlantı etiketidir; hem dahili hem de harici bağlantılar için kullanılır. Bağlantı metni (anchor text), bağlantı verilen sayfanın konusu hakkında güçlü bir sinyaldir; “buraya tıklayın” gibi genel metinlerden kaçınılmalıdır. href özelliği tam URL veya göreli yol alabilir.
<a href="/hizmetler/teknik-seo">Teknik SEO Hizmetleri</a>
<a href="https://example.com" rel="noopener noreferrer" target="_blank">Harici Kaynak</a>
rel="nofollow"
Bağlantıdan arama motorlarının PageRank aktarmamasını söyler. Kullanıcı yorumları, reklamlar veya güvensiz içeriklere yapılan bağlantılarda kullanılır. 2019’dan itibaren Google nofollow’u bir öneri olarak değerlendirmektedir; mutlak bir blok değildir.
<a href="https://example.com/yorum" rel="nofollow">Kullanıcı Yorumu</a>
rel="ugc" ve rel="sponsored"
ugc (User Generated Content), kullanıcı tarafından oluşturulan içeriklerdeki bağlantılar için; sponsored ise reklam veya sponsorlu bağlantılar için kullanılır. Bu değerleri yanlış kullanmak Google’ın manuel ceza süreçlerini tetikleyebilir. nofollow ile birlikte kullanılabilir: rel="nofollow ugc".
<a href="https://external.com" rel="sponsored">Sponsorlu İçerik</a>
<a href="https://forum.com/post" rel="ugc">Forum Yorumu</a>
rel="noopener noreferrer"
target="_blank" ile açılan bağlantılarda güvenlik açığı (tabnapping) riskini ortadan kaldırır. noopener, yeni sekmenin orijinal sayfaya window.opener üzerinden erişimini keser; noreferrer referrer başlığının gönderilmesini engeller. Harici bağlantılarda her zaman kullanılması önerilir.
<a href="https://external.com" target="_blank" rel="noopener noreferrer">Harici Site</a>
<link rel="preload">
Kritik kaynakların (font, CSS, görsel) tarayıcı tarafından önce indirilmesini zorunlu kılar. as özelliği kaynak türünü belirtir; crossorigin özelliği cross-origin fontlar için gereklidir. Yanlış kullanılan preload direktifleri bant genişliği israfına yol açabilir.
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" href="/css/critical.css" as="style" />
<link rel="preconnect"> ve <link rel="dns-prefetch">
preconnect, üçüncü taraf bir kaynakla erken bağlantı kurulmasını sağlar (DNS + TCP + TLS). dns-prefetch, yalnızca DNS çözümlemesini önceden yapar; daha az kaynak tüketir ama etkisi de sınırlıdır. Google Fonts, CDN’ler veya analitik servisleri için kullanılır.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="prefetch">
Kullanıcının sonraki ziyaret etmesi muhtemel sayfaları veya kaynakları arka planda indirir. Preload’dan farklı olarak düşük önceliklidir ve boş bant genişliğinde çalışır. Çok fazla sayfa prefetch etmek, veri bant genişliği tüketimi nedeniyle mobil kullanıcıları olumsuz etkileyebilir.
<link rel="prefetch" href="/blog/bir-sonraki-yazi/" as="document" />
Breadcrumb Nav Yapısı
Breadcrumb navigasyonu, sayfanın site hiyerarşisindeki konumunu gösterir. Structured data (JSON-LD BreadcrumbList) ile desteklendiğinde SERP’te breadcrumb zengin sonucu olarak görünür. aria-label="Sayfa konumu" eklemek erişilebilirliği artırır.
<nav aria-label="Sayfa konumu">
<ol>
<li><a href="/">Anasayfa</a></li>
<li><a href="/blog/">Blog</a></li>
<li aria-current="page">HTML Etiketleri Sözlüğü</li>
</ol>
</nav>
Görsel & Medya
Görsel etiketleri, hem kullanıcı deneyimi hem de Google Görsel Arama sıralamaları açısından kritik öneme sahiptir. Yanlış yapılandırılmış görseller, Core Web Vitals metriklerini (LCP, CLS) olumsuz etkiler.
<img src alt width height loading fetchpriority>
<img> etiketinin her özelliği ayrı bir SEO ve performans değişkenini kontrol eder. alt metni görsel içeriği tanımlar; width ve height CLS’yi önler; loading="lazy" görünüm dışı görsellerin geç yüklenmesini sağlar; fetchpriority="high" LCP görselini önce yükletir.
<img
src="/gorseller/html-etiketleri.webp"
alt="HTML etiket hiyerarşisini gösteren renkli bir diyagram"
width="1200"
height="630"
loading="eager"
fetchpriority="high"
decoding="async"
/>
<picture> ve <source srcset>
<picture>, tarayıcının desteklediği formata (AVIF, WebP, JPEG) ve ekran genişliğine göre farklı görsel dosyaları sunmasını sağlar. <source> etiketleri type ve media özelliklerini kullanır; hiçbiri uyuşmazsa <img> fallback olarak çalışır.
<picture>
<source srcset="/gorseller/hero.avif" type="image/avif" />
<source srcset="/gorseller/hero.webp" type="image/webp" />
<img
src="/gorseller/hero.jpg"
alt="SEO stratejisi planlama toplantısı"
width="1200"
height="630"
loading="eager"
/>
</picture>
<video>
Video içerikleri <video> etiketi ile embed edildiğinde Google video indexer tarafından tanınabilir. poster özelliği videonun thumbnail görselini belirler; preload="metadata" sadece video meta verisini önceden yükleyerek bant genişliği tasarrufu sağlar. Altyazı dosyası (<track kind="subtitles">) erişilebilirlik ve içerik indeksleme için önerilir.
<video
src="/videolar/seo-rehberi.mp4"
poster="/gorseller/seo-rehberi-thumbnail.webp"
width="800"
height="450"
controls
preload="metadata"
>
<track
kind="subtitles"
src="/altyazilar/seo-rehberi-tr.vtt"
srclang="tr"
label="Türkçe"
default
/>
Tarayıcınız video etiketini desteklemiyor.
</video>
<audio>
Podcast veya ses içerikleri için kullanılır. Google, ses dosyalarını video kadar kapsamlı indekslemez; bu nedenle <audio> ile birlikte bir deşifre metin (transcript) sunmak önerilir. controls özelliği oynatıcı arayüzünü aktif eder.
<audio controls preload="metadata">
<source src="/podcast/seo-bolum-1.mp3" type="audio/mpeg" />
<source src="/podcast/seo-bolum-1.ogg" type="audio/ogg" />
<p>Tarayıcınız ses etiketini desteklemiyor. <a href="/podcast/seo-bolum-1.mp3">MP3 olarak indir</a>.</p>
</audio>
<iframe>
Harici içerikleri (haritalar, formlar, videolar) sayfa içine gömer. Google, <iframe> içindeki içeriği ana sayfadan bağımsız olarak indeksleyebilir; bu durum kopya içerik sorunlarına yol açabilir. loading="lazy" performansı artırır; title özelliği erişilebilirlik için zorunludur.
<iframe
src="https://www.google.com/maps/embed?pb=..."
title="AjansSEO İstanbul ofisi haritası"
width="600"
height="450"
loading="lazy"
style="border:0"
allowfullscreen
></iframe>
Lazy Loading ve Modern Format Özeti
loading="lazy": Görünüm dışı görseller ve iframe’ler için kullanın.loading="eager": LCP görseliniz veya ilk görünümde yer alan kritik medya için tercih edin.- WebP: JPEG/PNG’ye göre %25–34 daha küçük boyut, tüm modern tarayıcılarda desteklenir.
- AVIF: WebP’ye göre %50 daha küçük boyut; tarayıcı desteği hızla artmaktadır.
Liste & Tablo Etiketleri
Liste ve tablo etiketleri, içeriği yapılandırılmış hâle getirir; bu yapı hem tarama motorlarının veri çıkarımını hem de kullanıcı tarama davranışını kolaylaştırır.
<ul>, <ol>, <li>
<ul> sırasız (madde imli), <ol> sıralı (numaralı) listeleri tanımlar. Adımlar ve sıra önem taşıyan içerikler için <ol> kullanın; bu bağlam Google’ın HowTo ve sıralı içerik anlayışını güçlendirir. <li> olmadan metin eklemek HTML standardını ihlal eder.
<!-- Sırasız liste -->
<ul>
<li>Title etiketi</li>
<li>Meta description</li>
<li>Canonical etiketi</li>
</ul>
<!-- Sıralı adımlar -->
<ol>
<li>Anahtar kelime araştırması yapın.</li>
<li>Sayfanızın başlık etiketini optimize edin.</li>
<li>İçeriği yayımlayın ve Google Search Console'da izleyin.</li>
</ol>
<dl>, <dt>, <dd>
Tanım listeleri; terim (<dt>) ve açıklama (<dd>) çiftlerinden oluşur. Sözlükler, SSS sayfaları ve meta veri tabloları için semantik açıdan en uygun yapıdır. Google, <dl> yapısını bazen Featured Snippet olarak sunabilir.
<dl>
<dt>Canonical</dt>
<dd>Aynı içeriğin birden fazla URL üzerinden erişilebilir olduğu durumlarda yetkili URL'yi belirten meta etiket.</dd>
<dt>Hreflang</dt>
<dd>Farklı dil veya bölge versiyonlarını birbirine bağlayan bağlantı etiketi.</dd>
</dl>
<table>, <thead>, <tbody>, <tfoot>, <th scope>, <caption>
Tablolar, ilişkisel veriyi düzenlemek için kullanılmalıdır; asla layout amaçlı kullanılmamalıdır. <caption> tablonun başlığını sağlar ve ekran okuyucular tarafından okunur. <th scope="col"> ve <th scope="row"> özelliği, tarayıcının ve ekran okuyucunun hücreleri doğru satır/sütunla ilişkilendirmesini sağlar.
<table>
<caption>SEO Meta Direktifleri Karşılaştırması</caption>
<thead>
<tr>
<th scope="col">Direktif</th>
<th scope="col">Etki</th>
</tr>
</thead>
<tbody>
<tr>
<td>noindex</td>
<td>Sayfanın indekslenmesini engeller</td>
</tr>
<tr>
<td>nofollow</td>
<td>Bağlantıların takip edilmesini engeller</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Kaynak: Google Arama Merkezi Belgeleri</td>
</tr>
</tfoot>
</table>
Form Etiketleri
Formlar, arama motorları tarafından genellikle taranmaz ya da sınırlı biçimde işlenir. Ancak formları çevreleyen anlambilimsel yapı ve erişilebilirlik, sayfanın genel kalitesini etkiler.
<form>
<form> etiketi, kullanıcı giriş alanlarını bir grup olarak tanımlar. action özelliği verinin gönderileceği URL’yi, method ise HTTP yöntemini (GET/POST) belirtir. Googlebot GET formlarını sınırlı biçimde tarayabilir; bu nedenle kritik içeriği form arkasına koymaktan kaçının.
<form action="/ara/" method="get">
<label for="arama">Arama:</label>
<input type="search" id="arama" name="q" placeholder="Etiket ara..." />
<button type="submit">Ara</button>
</form>
<input> ve <label>
<label> ile <input> ilişkilendirilmezse ekran okuyucular alanın amacını anlayamaz. for özelliği, <label>’ı eşleşen id’ye sahip <input> ile bağlar. <input type="hidden"> alanları botlar tarafından görülebilir; gizli bilgi içermemelidir.
<label for="email">E-posta Adresi</label>
<input
type="email"
id="email"
name="email"
required
autocomplete="email"
placeholder="[email protected]"
/>
<button>, <select>, <textarea>
<button type="submit"> gönderme düğmesidir; <button type="button"> yalnızca JavaScript eylemleri için kullanılır. <select> açılır menü sağlar; <option> ve <optgroup> ile yapılandırılır. <textarea>, çok satırlı metin girişi için tasarlanmıştır.
<select id="kategori" name="kategori">
<optgroup label="Meta Etiketler">
<option value="title">Title</option>
<option value="description">Description</option>
</optgroup>
</select>
<textarea id="yorum" name="yorum" rows="4" cols="50" maxlength="500">
</textarea>
<button type="submit">Gönder</button>
Script & Style Etiketleri
JavaScript ve CSS yükleme stratejisi, sayfa render süresini ve Core Web Vitals puanlarını doğrudan etkiler.
<script async> ve <script defer>
async, script’i HTML ayrıştırmasıyla paralel indirir ve hazır olduğu an çalıştırır (HTML ayrıştırmasını durdurur). defer, script’i yine paralel indirir ama HTML tamamen ayrıştırıldıktan sonra, DOM hazır olduğunda çalıştırır. Bağımsız analitik ve reklam script’leri için async; DOM’a bağımlı script’ler için defer kullanın. <head> içindeki async/defer olmayan script’ler render-blocking’dir.
<!-- Analitik: async -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<!-- DOM'a bağımlı: defer -->
<script defer src="/js/main.js"></script>
<script type="application/ld+json">
JSON-LD yapısal verisini sayfaya gömer. Bu format, Google tarafından tercih edilen yapısal veri yöntemidir; HTML kodunu değiştirmeden <head> veya <body> içine yerleştirilebilir. Ayrıntılı örnekler için Yapısal Veri bölümüne bakın.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "HTML Etiketleri Sözlüğü"
}
</script>
<noscript>
JavaScript devre dışı bırakıldığında gösterilecek alternatif içeriği tanımlar. Googlebot, JavaScript’i gecikmeli olarak işler; kritik içerik <noscript> ile desteklenebilir ancak bu, birincil yöntem olmamalıdır.
<noscript>
<p>Bu sayfayı tam olarak görüntülemek için JavaScript'i etkinleştirin.</p>
</noscript>
<style> ve Render-Blocking Etkisi
<head> içindeki <style> ve <link rel="stylesheet"> etiketleri render-blocking’dir: tarayıcı CSS yüklenip ayrıştırılmadan sayfayı çizmez. Critical CSS’i <style> bloğu ile inline hale getirmek, ilk boyamanın (FCP) hızlanmasını sağlar. Kritik olmayan CSS’i <link rel="preload"> ile asenkron yüklemek en iyi uygulamadır.
<style>
/* Critical CSS inline */
body { font-family: system-ui, sans-serif; margin: 0; }
header { background: #fff; }
</style>
<link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
Yapısal Veri Desteği
Yapısal veri (Structured Data), arama motorlarına içerik hakkında açık ve makine tarafından okunabilir meta bilgi sunar. Doğru uygulandığında zengin sonuçlar (Rich Results) sağlar: yıldız derecelendirmeleri, SSS kutuları, adım adım talimatlar, ürün bilgileri.
JSON-LD ile Breadcrumb Şeması
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Anasayfa",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "HTML Etiketleri Sözlüğü",
"item": "https://example.com/blog/html-etiketleri-sozlugu/"
}
]
}
</script>
JSON-LD ile FAQ Şeması
SSS şeması, Google’ın arama sonuçlarında “Kişiler ayrıca şunu soruyor” veya doğrudan SSS genişlemesi olarak görünür. Her acceptedAnswer.text değeri HTML destekler; <a> etiketleriyle iç bağlantı verilebilir.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Canonical etiketi ne işe yarar?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Canonical etiketi, aynı içeriğin birden fazla URL üzerinden erişilebilir olduğu durumlarda arama motorlarına yetkili URL'yi bildirir ve kopya içerik sorununu çözer."
}
},
{
"@type": "Question",
"name": "Meta description kaç karakter olmalı?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Meta description 120 ile 160 karakter arasında olmalıdır. Daha uzun açıklamalar Google tarafından kesilir."
}
}
]
}
</script>
JSON-LD ile HowTo Şeması
HowTo şeması, adım adım talimatları zengin sonuç olarak sunar. step dizisi her adımı name ve text ile tanımlar; isteğe bağlı olarak image ve url de eklenebilir.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "Canonical Etiketi Nasıl Eklenir?",
"description": "Web sitenize canonical etiketi eklemek için adım adım rehber.",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Doğru URL'yi Belirleyin",
"text": "Sayfanızın yetkili URL'sini (canonical URL) belirleyin. Bu genellikle www olmayan, parametresiz ve HTTPS kullanan URL'dir."
},
{
"@type": "HowToStep",
"position": 2,
"name": "Etiket Kodu Oluşturun",
"text": "Aşağıdaki kodu <head> bölümüne ekleyin: <link rel=\"canonical\" href=\"https://example.com/sayfa/\" />"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Google Search Console'da Doğrulayın",
"text": "URL İnceleme Aracı ile canonical'ın Google tarafından algılandığını doğrulayın."
}
]
}
</script>
JSON-LD ile Product Şeması
Ürün şeması, e-ticaret sayfalarında fiyat, stok durumu ve derecelendirme gibi bilgileri zengin sonuç olarak gösterir.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "SEO Analiz Paketi",
"description": "Kapsamlı teknik SEO denetimi ve anahtar kelime analizi hizmeti.",
"brand": {
"@type": "Brand",
"name": "AjansSEO"
},
"offers": {
"@type": "Offer",
"url": "https://example.com/hizmetler/seo-analiz/",
"priceCurrency": "TRY",
"price": "2500",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2026-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "127"
}
}
</script>
Microdata (itemscope / itemtype / itemprop)
JSON-LD’nin alternatifi olan Microdata, yapısal veriyi doğrudan HTML öğelerine özellik olarak gömer. Google her iki formatı da destekler; ancak JSON-LD daha kolay yönetilir ve tercih edilir. Microdata, JavaScript tarafından manipüle edilemeyen basit içerikler için hâlâ geçerli bir seçenektir.
<div itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">HTML Etiketleri Sözlüğü</h1>
<meta itemprop="datePublished" content="2026-07-13" />
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Onur Öztürk</span>
</span>
</div>
Open Graph & Twitter Card Etiketleri
Open Graph (OG) ve Twitter Card meta etiketleri, sosyal medya platformlarının bir URL paylaşıldığında önizleme oluşturma biçimini kontrol eder. Doğru yapılandırılmış OG etiketleri, sosyal trafik tıklama oranlarını ciddi ölçüde artırır.
<meta property="og:title">
Sosyal medyada gösterilecek başlığı belirler; <title> etiketinden farklı ve daha kısa olabilir. Facebook, LinkedIn ve WhatsApp bu değeri kullanır. Yaklaşık 60-65 karakterde kesilir.
<meta property="og:title" content="HTML Etiketleri Sözlüğü: SEO İçin Tüm Etiketler" />
<meta property="og:description">
Sosyal medya önizlemesindeki açıklama metnidir; 155-300 karakter arası önerilir. Meta description ile aynı olabilir; ancak sosyal medya kitlesine yönelik daha kısa ve özlü bir versiyon daha etkili olabilir.
<meta property="og:description" content="SEO için kritik HTML etiketleri: title, canonical, hreflang ve yapısal veri. Pratik örneklerle tam referans rehberi." />
<meta property="og:image">
Önizleme görseli URL’sidir; 1200×630 piksel, HTTPS üzerinden erişilebilir ve 8 MB’ın altında olmalıdır. og:image:alt ile görselin alternatif metni de belirtilmelidir. Görsel olmadan paylaşılan bağlantılar genellikle çok düşük etkileşim alır.
<meta property="og:image" content="https://example.com/og-images/html-etiketleri-sozlugu.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="HTML etiketleri sözlüğü kapak görseli" />
<meta property="og:url"> ve <meta property="og:type">
og:url kanonical URL’yi sosyal medyaya bildirir; og:type içerik türünü belirtir (article, website, video.movie vb.). Blog yazıları için article tercih edilmeli ve article:published_time, article:author gibi yardımcı etiketler eklenmelidir.
<meta property="og:url" content="https://example.com/blog/html-etiketleri-sozlugu/" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="tr_TR" />
<meta property="article:published_time" content="2026-07-13T09:00:00+03:00" />
<meta property="article:author" content="https://example.com/yazar/onur-ozturk/" />
<meta name="twitter:card"> ve Diğer Twitter Etiketleri
Twitter (X), kendi meta etiket sistemini kullanır. twitter:card dört değer alabilir: summary, summary_large_image, app, player. Blog yazıları için summary_large_image büyük görsel önizleme sağlar. og: etiketleri varsa Twitter bunları fallback olarak kullanabilir; ancak açıkça belirtmek daha güvenlidir.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ajansseohq" />
<meta name="twitter:creator" content="@onuroztr" />
<meta name="twitter:title" content="HTML Etiketleri Sözlüğü: SEO İçin Tüm Etiketler" />
<meta name="twitter:description" content="SEO için kritik HTML etiketleri: title, canonical, hreflang, yapısal veri. Kapsamlı referans rehberi." />
<meta name="twitter:image" content="https://example.com/og-images/html-etiketleri-sozlugu.jpg" />
<meta name="twitter:image:alt" content="HTML etiketleri sözlüğü kapak görseli" />
Erişilebilirlik & SEO
Erişilebilirlik ve SEO çakışan hedefler değildir; aksine birbirini güçlendirir. Google, E-E-A-T çerçevesinde erişilebilir ve kullanıcı dostu sayfaları yüksek kalite sinyali olarak değerlendirir.
alt Attribute
Görselin metin açıklamasıdır; ekran okuyucular tarafından seslendirilir ve görsel yüklenemediğinde görüntülenir. Google, alt metnini görsel indeksleme ve bağlam anlama için kullanır. Boş alt="" dekoratif görseller için kullanılır ve bu görsellerin ekran okuyucular tarafından atlanmasını sağlar; anahtar kelime doldurmaktan kesinlikle kaçınılmalıdır.
<!-- Bilgilendirici görsel -->
<img src="/diagram.webp" alt="HTTP ve HTTPS protokol akışını gösteren diyagram" />
<!-- Dekoratif görsel -->
<img src="/dekoratif-cizgi.svg" alt="" />
aria-label
Görsel etiket içermeyen öğelere erişilebilir ad verir. Yalnızca simge içeren düğmeler veya bağlantılar için zorunludur. Var olan görünür metin yeterliyse aria-label eklemeye gerek yoktur; gereksiz kullanım erişilebilirlik ağacını karmaşıklaştırır.
<button aria-label="Arama formunu aç">
<svg aria-hidden="true" focusable="false">...</svg>
</button>
<a href="/rss.xml" aria-label="RSS beslemesine abone ol">
<svg aria-hidden="true" focusable="false">...</svg>
</a>
aria-describedby
Bir öğeyi, başka bir öğedeki açıklama metniyle ilişkilendirir. aria-label’dan farklı olarak daha uzun bir açıklama sunar; genellikle form alanları veya hata mesajları için kullanılır. id referansı, aynı sayfadaki herhangi bir öğeye işaret edebilir.
<label for="sifre">Şifre</label>
<input
type="password"
id="sifre"
name="sifre"
aria-describedby="sifre-ipucu"
/>
<p id="sifre-ipucu">En az 8 karakter, bir büyük harf ve bir rakam içermelidir.</p>
role
ARIA role özelliği, bir HTML öğesine semantik rol atar. Anlamsal HTML etiketleri (<nav>, <main>, <button>) zaten örtük roller içerir; bu öğelere ekstra role eklemek gereksizdir. role, yalnızca anlambilimsel HTML’in yeterli olmadığı durumlarda (örneğin <div> ile oluşturulan interaktif bileşenler) kullanılmalıdır.
<!-- Yanlış: Anlambilimsel <button> varken role="button" gereksiz -->
<button role="button">Gönder</button>
<!-- Doğru: Div'i düğme gibi davrandırmak için -->
<div role="button" tabindex="0" aria-label="Menüyü aç"></div>
tabindex
Klavye navigasyon sırasını kontrol eder. tabindex="0" öğeyi doğal sekme sırasına ekler; tabindex="-1" öğeyi tab sırasından çıkarır ama JavaScript ile odaklanılabilir hale getirir. Pozitif tabindex değerlerinden (tabindex="1", tabindex="2" gibi) kaçının; bu değerler beklenmedik sekme sırası yaratır.
<!-- Doğal sekme sırasına ekle -->
<div role="button" tabindex="0">Tıkla</div>
<!-- Sadece JS ile odaklanabilir -->
<div id="modal" role="dialog" tabindex="-1" aria-modal="true">...</div>
lang Attribute (Öğe Düzeyinde)
<html lang> sayfanın genel dilini belirtirken, bireysel öğelere de lang eklenebilir. Bu özellik, karışık dilli içeriklerde ekran okuyucunun doğru telaffuz motoruna geçmesini sağlar. Örneğin Türkçe bir sayfada İngilizce bir alıntı varsa <blockquote lang="en"> kullanılabilir.
<p>Bu kavram İngilizce'de <span lang="en">above the fold</span> olarak adlandırılır.</p>
Sonuç ve Eylem Planı
Bu sözlük, bir web sayfasının HTML mimarisini SEO, performans ve erişilebilirlik perspektifinden inceleyen kapsamlı bir referans kaynağıdır. Her etiket, bağımsız bir değişkendir; birinin yanlış yapılandırılması diğerlerinin etkisini zayıflatabilir.
Öncelikli eylem listesi:
- Her sayfanın benzersiz
<title>(50-60 karakter) ve<meta name="description">(120-160 karakter) içerdiğini doğrulayın. - Tüm sayfalarda self-referencing
<link rel="canonical">bulunduğunu kontrol edin. - Çok dilli site işletiyorsanız hreflang etiketlerini her dil versiyonunda çift yönlü ekleyin.
- LCP görseline
fetchpriority="high"veloading="eager"ekleyin; diğer görsellereloading="lazy"uygulayın. <img>etiketlerindewidthveheightbelirterek CLS sıfıra yaklaştırın.- JSON-LD yapısal verisi ekleyin: en az Breadcrumb ve Article şemaları.
- Open Graph ve Twitter Card etiketlerini tüm paylaşılabilir sayfalar için yapılandırın.
- Tüm bilgilendirici görsellere açıklayıcı
altmetni ekleyin. - JavaScript dosyalarını
asyncveyadeferile yükleyin; render-blocking kaynakları ortadan kaldırın. - Robots meta direktiflerini gözden geçirin; yanlışlıkla
noindexalmış değerli sayfaları tespit edin.
Meta etiketlerinizi otomatik olarak oluşturmak için meta tag oluşturucu aracımızı kullanabilir, Open Graph önizlemelerinizi test etmek için ise Open Graph Generator aracımızı ziyaret edebilirsiniz. Sitenizin teknik altyapısını profesyonel bir gözle değerlendirmek istiyorsanız Teknik SEO hizmetlerimiz sayfasına göz atın.
