Title Etiketi
Title etiketi, HTML belgesinin içeriğini tanımlayan başlık etiketidir. Belgenin neyle alakalı olduğu konusunda bilgi veren ilk alandır. Bu yüzden kullanımı şarttır. Title etiketinin karakter sayısı 50-70 aralığını geçmemesi gerekir. Title etiketini oluştururken içerikle alakalı en önemli anahtar kelimeleri kullanmaya dikkat etmelisiniz. Aynı başlığı birden fazla sayfada kullanmamaya ve başlık etiketinde özel karakterler kullanmamaya dikkat etmelisiniz. Title etiketinizin sayfa içeriği ile birebir uyuşması da önemlidir.
Örnek Title etiket kullanımı;
<title>örnek</title>
Description Etiketi
Description etiketi, sayfa ile ilgili açıklamaların girildiği alandır. Yapılan aramalar sonucu arama motorlarında listelenen sayfaların içerik özetini temsil ettiği için kullanımı önemlidir. Oluşturulacak description alanında, içeriğin özeti ve içeriğiniz ile uyumlu olan anahtar kelimelerinizin yer alması gerekmektedir. Description etiketinin 320 karakteri geçmemesi gerekmektedir.
Örnek Description etiket kullanımı;
<meta name=”description” content=”içerik özeti” />
Meta Keyword Etiketi
Meta keyword, güncel sayfa içeriğini tanımlamaya yarayan anahtar kelimelerin kullanılmasıdır. Anahtar kelimelerinizi kullanırken virgül ile ayırmanız gerekmektedir. Anahtar kelime sayısı 5 ile 10 arasında olması idealdir. Çok fazla anahtar kelime kullanılması önerilen bir durum değildir.
Örnek meta keyword etiket kullanımı;
<meta name=”keywords” content=”ornek, ornekler, yazı ornegi, ornek kelime, kelime ornek ” />
IMG Alt Etiketi
IMG etiketi, sayfada kullanılan görsellere ait etiket alanıdır. HTML belgeniz için görüntünün tanımlandığı alandır. Görsellerinizin arama motorlarına indexlenmesi için kullanımı gereklidir. Ayrıca arama motorlarında görseller kısmında sayfanızın çıkmasını sağlamak için kullanılması gerekir. Sayfanızdaki görsellerde mutlaka alt etiketi kullanılmalı ve görsel boyutları belirtilmelidir.
Örnek IMG etiket kullanımı;
<img src=”image keyword.imaj uzantısı ” alt=”alt etiketi width=”100” height=”100 “>
Sayfa Bağlantılarının Gösterimi
Sitenizde yer alan linkleri, JavaScript olarak kullanmamaya dikkat edin. Güvendiğiniz ve vermek istemediğiniz linkleri rel=”nofollow” olarak belirtin.
Sayfa bağlantılarının gösterim şekli;
<a href=”https://www.example.com/index.html”>Anasayfa</a>
<a href=”https://www.example.com/index.html” rel=”nofollow”>Anasayfa</a>
Canonical Kullanımı
Sitenizde tekrar eden sayfaların ve içeriklerin kopya olmadığını arama motorlarına bildirmek için kullanılır. Canonical etiketi, tekrar edilen veya birbirine benzer içeriklere sahip olan sayfalar arasından, arama sonuçlarında tek bir sayfanın gösterilmesini sağlamak amacıyla kullanılmaktadır. Benzer sayfalar içerisinden, arama motorlarının hangi linki baz almasını istiyorsanız, o linkteki meta tagları arasına rel canonical etiketini eklemelisiniz. Örneğin:
http://www.ornek.com/ornek-sayfa
https://www.ornek.com/ornek-sayfa
Benzer içeriğe sahip bu iki sayfa arasından birinci linkin arama motorları tarafından baz alınmasını istiyorsanız birinci linkteki meta tagları arasına rel canonical etiketini eklemelisiniz.
Örnek Canonical etiket kullanımı;
<link rel=”canonical” href=http://www.ornek.com/ornek-sayfa” />
SEO Açısından URL’lerin Kullanımında Dikkat Edilmesi Gerekenler
Oluşturacağınız URL’lerin içerisinde etkisiz eleman kullanmamaya özen gösterin. Yani “ve”, “ki”, “ama”, “mi” ve benzeri kelimeler URL’nin gereğinden fazla uzamasına neden olmaktadır.
Oluşturacağınız URL’nin kısa ve anlaşılır olmasına dikkat edin. URL’nin anlaşılır olması ve anahtar kelimelerinizi içermesi SEO açısından önemlidir.
URL’lerinizde mümkün oldukça karışık parametreler kullanmamaya özen gösterin.
URL içerisinde yer verilecek özel karakter (-,_,-,#,?) kullanımına dikkat edin.
Arama Motoru Botlarının Kontrol Edilmesi
Robots.txt Dosya Kullanımı
Robots dosya, arama motorlarına ön bilgi veren kılavuz bir dosyadır. Sayfanın arama motorlarında listelenip, listelenmeyeceğini belirtmek için kullanılır. Böylelikle site ana dizini içerisinde robot.txt dosyası oluşturarak o dosya içerisindeki dizinlerin izinlerini belirleyebilirsiniz. Burada bilmeniz gereken bir konuda, Robots.txt dosyasının URL’si büyük/küçük harfe duyarlıdır. Robots.txt kullanımında üç farklı koşul vardır. Tüm içeriklerin taranması için tam izin, hiçbir içeriğin taranamayacağını belirten tam reddetme, belirli bir içeriğin taranmasını robot.txt belirlemesini belirten koşullu izin.
Örnek Robots.txt kullanımı;
User-agent: robotun ismi yazılır veya * sembolünü kullanarak tüm robotlara izin veril
Allow: robotlar tarafından indexlenmesi istenen dosyalar belirtilir.
Disallow: robotlar tarafından indexlenmesi istenmeyen dosyalar belirtilir.
User-agent: *
Allow: /ornek1/site.html
Disallow: /ornek1/
Bu kullanımın anlamı şudur; tüm robotlar dosya dizininde bulunan site.html dosyasını tarasın ve indexlesin. Ancak onun haricindeki hiçbir dosya taranmasın ve indexlenmesin.
Robots Meta Etiketi Kullanımı
Robots meta etiketi, tek bir sayfanın dizine nasıl ekleneceğini ve arama sonuçlarında sayfanın kullanıcılara nasıl sunulacağını belirlemek için kullanılır. Robots meta etiketi sayfaya özel işlem yapabilme olanağı vermektedir.
Örnek Robots meta etiket kullanımı;
<meta name=”robots” content=”noindex” />
Sitemap Kullanımı
Sitemap dosyası site içerisindeki URL yapısını belirtir. Site haritaları, web sitesinin sahip olduğu sayfa yapılarını ve taranması istenen URL’leri gösteren özetlerdir. Arama motoru robotlarının site içerisinde izleyeceği yol haritasını belirlemek için kullanılır. Tüm biçimlerde tek bir site haritasının boyutu sıkıştırılmamış olarak en fazla 10 MB boyutunda olmalıdır. En fazla 50.000 URL içermelidir. Daha büyük bir dosyanız veya URL’niz varsa, listeyi birden fazla site haritası halinde bölmeniz gerekecektir.
Örnek sitemap kullanımı;
https://ornek.com/sitemap.xml
https://ornek.com/sitemap.xml.gz
https://ornek.com/sitemap.gz
Sayfalandırma Kullanımı
Birbiriyle bağlantılı ve devamlılığı olan sayfaları belirtmek için kullanılır. Sayfalar arasındaki devamlılık ve bağlantı rel=”next” ve rel=”prev” şeklinde gösterebilirsiniz.
Sayfalandırma kullanım örneği; http://www.ornek.com/makale_2.html sayfasının önceki ve sonraki sayfalarla bağlantısını aşağıdaki şekilde gösterebilirsiniz.
<link rel=”prev” href=”http://www.ornek.com/makale_1.html”>
<link rel=”next” href=”http://www.ornek.com/makale_3.html”>
Sosyal Medya Etiketleri Kullanımı / Open Graph Meta Kullanımı
Open graph (og), sosyal medya üzerinde yapılan sayfa paylaşımlarının nitelikli hale gelmesini sağlayan bir uygulamadır. Open graph; Facebook, Twitter, Google Plus, Linkedin, Pinterest tarafından desteklenmektedir. Günümüzde milyonlarca site tarafından kullanılmaktadır. Open graph meta tagı kullanılmıyorsa, site üzerinden paylaşımı yapılacak sayfanın otomatik olarak, varsa başlığı ve içerisinden rastgele bir görsel seçilerek paylaşılır. Yani bu sizin aslında paylaşmak istediğiniz şeklin dışında ve düzensiz, niteliksiz bir paylaşım olur. Niteliksizlikten kasıt ise amatör bir görüntü yaratır. Open Graph taglarının kullanılması ise sayfalarınızı sosyal medya için optimize eder. Open Graph’ın kullanım şeklinde, title, type, url ve image etiketleri yer almaktadır.
Örnek Open Graph kullanımı;
<!– Twitter Card data –>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”[@Yayıncı adresi]”>
<meta name=”twitter:title” content=”[Sayfa başlığı]”>
<meta name=”twitter:description” content=”[Sayfa açıklaması 200 karakterden az olmalıdır.]”>
<meta name=”twitter:creator” content=”[@creator]”>
<meta name=”twitter:image” content=”[https://example.com/image.jpg]”>
<!– Open Graph data –>
<meta property=”og:title” content=”[Başlık]” />
<meta property=”og:type” content=”[article]” />
<meta property=”og:url” content=”[https://example.com/]” />
<meta property=”og:image” content=”[https://example.com/image.jpg]” />
<meta property=”og:description” content=”[Sayfa açıklaması]” />
<meta property=”og:site_name” content=”[Site adı]” />
‘Rich snippets’ ve ‘structured data’ kullanımı
Arama motoru sonuç listelerinde, sayfanızın menü, yıldız, resim, video, kişi bilgileri gibi sonuçları göstermesi ve sayfanızın arama sonuçlarında daha görsel ve kaliteli olmasını sağlar.
Örnek kullanım şekli;
<div =”http://schema.org/Product”>
<a =”url” href=”https://www.stratejikseo.com”><div =”name”><strong>Stratejik SEO</strong></div>
</a>
<div =”description”>Site / Ürün Açıklaması</div>
<div =”brand” =”http://schema.org/Organization”>
<span =”name”>Ürün Markası</span></div>
<div =”manufacturer” =”http://schema.org/Organization”>
Manufactured by: <span =”name”>Üretici</span></div>
<div>Model: <span =”model”>Ürün Modeli</span></div>
<div>Product ID: <span =”productID”>Ürün ID’si</span></div>
<div =”aggregateRating” =”http://schema.org/AggregateRating”>
<span =”ratingValue”>5</span> based on <span =”reviewCount”>10</span> reviews</div>
<div =”offers” =”http://schema.org/Offer”><span =”price”>100</span><link =”itemCondition” href=”http://schema.org/NewCondition” /> New</div></div>
Dil Seçenekleri Etiketinin Kullanımı
Language etiketi sitenin dilini belirtmek için kullanılan etikettir. Sayfanın hazırlandığı dili belirtmek için kullanılması gerekmektedir. Ayrıca arama motorlarında, aramaları filtrelemek için kullanılan dile göre ara seçeneklerinde de fayda sağlayan bir durum olacaktır.
Örnek Language etiket kullanımı;
<html lang=”tr-TR” />
Yapılan arama sonuçlarında doğru dili veya bölgesel URL’yi sunmak için ise; rel=”alternate” hreflang=”x” kullanılır.
Varsayılan dil özelliğini belirlemek için kullanım şekli;
<link rel=”alternate” hreflang=”TR” href=”https://stratejikseo.com/” />
Dil özelliğinin belirlenmesi için kullanım şekli;
<link rel=”alternate” hreflang=”tr” href=”https://stratejikseo.com/tr/” />
Dil ve bölge(ülke) özelliğinin belirlenmesi için kullanım şekli;
<link rel=”alternate” hreflang=”tr” href=”https://stratejikseo.com/tr-TR/” />
Örnek Sitemap uygulanışı;
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlsetxmlns=http://www.sitemaps.org/schemas/sitemap/0.9xmlns:xhtml=”https://www.stratejikseo.com/1999/xhtml”>
<url>
<loc>https://stratejikseo.com/tr/</loc>
<xhtml:link rel=”alternate” hreflang=”de” href=”https://stratejikseo.com/de/” />
<xhtml:link rel=”alternate” hreflang=”en” href=”https://stratejikseo.com/en/” />
</url>
<url>
<loc>https://stratejikseo.com/de/</loc>
<xhtml:link rel=”alternate” hreflang=”en” href=”https://stratejikseo.com/en/” />
<xhtml:link rel=”alternate” hreflang=”de” href=”https://www.stratejikseo.com/de/” />
</url>
</urlset>
Schema.org Kod Kullanımı
Schema.org, arama motorlarının daha iyi sonuçlar çıkarabilmesi için Google, Microsoft ve Yandex tarafından ortak yapılmış bir işaretleme dilidir. Schema.org kullanımı sitenizin arama motorları tarafından daha iyi anlaşılmasını sağlamaktadır. HTML etiketi içerisinde kullanılan yazının ne anlama geldiği schma.org ile açıklanarak belirtilir. Yani arama motorlarına daha detaylı bilgiler vermenize yardımcı olur. Böylelikle siz kendinizi arama motorlarına daha iyi ifade etmiş olurken, arama motorları da kullanıcılara daha iyi hizmet etmiş oluyor.
Örnek verecek olursak; sitenizde Avatar filmiyle alakalı bir içerik bulunduruyorsunuz. Kodlama yaparken bu Avatar kelimesi bir filmi de ifade edebilir, bir profil fotoğrafını da ifade edebilir. Bu durum arama motorlarına aradığı içeriği bulmakta zorluk çıkartıyor. İşte burada kullanılan ‘Avatar’ kelimesinin bir filmi temsil ettiğini arama motorlarına belirtmeniz lazım. Bunun içinde HTML kodlarınızın içine kullanılan öğe ile ilgili , , gibi kodlamalar ekleyerek öğe hakkında detaylı açıklamalar sunabilirsiniz.
Örnek Schema.org kullanımı;
<Div = “http://schema.org/Movie”>
<h1 = “name” > Avatar </ h1>
<span> Yönetmen: <span = “yönetmen” James Cameron, </ span> (16 Ağustos 1954 doğumlu)> </ span>
<span = “tür” > Bilim kurgu </ span>
<a href=”../movies/avatar-theatrical-trailer.html” =”trailer”> Treyler </a>
</ Div>
Responsive Meta Tag / Viewport Kullanımı
Responsive viewport meta tagı, web sayfanızı oluşturan tasarımın mobil cihazlara uygun hale getirilmesi için kullanılmaktadır. Yani web sayfanızın akıllı telefon ve tabletlerde görünüm olarak uyumlu hale gelmesini sağlamak için kullanılır. Responsive tasarım ile web sitenizi tüm cihazların ekranına optimize edebilirsiniz. Daha anlaşılır bir şekilde ifade etmek gerekir ise; web sayfanızın masaüstü versiyonunda yer alan resimleri, fontları ve yazıları; tablet ve mobil cihazların ekranları için küçülterek, bu ekranların boyutlarına uyumlu hale getirilmesidir.
Width, cihazın ekran genişliğini; height, cihazın ekran yüksekliğini ayarlamanıza yardımcı olur. initial-scale, 0 ile 10.0 arası bir değer girilerek sayfanın ölçek ayarını yapmanıza olanak tanır. Minimum-scale, maksimum küçültme oranını; maximum-scale, maksimum büyütme oranını belirlemenizi sağlar. User-scalable, Yes veya No değeri verilerek kullanıcının ekranı küçültme ya da büyültmesi için vereceğiniz izni ayarlamanıza olanak tanır.
Örnek viewport meta tag kullanımı;
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Kullanıcıların Kolay Ulaşabilmesi İçin Optimizasyon Yapın
Yukarıda bahsedilen bu düzenlemeler, SEO için yapılması gerekenler arasında yer almaktadır. Yapılacak bu düzenlemeler ile sitenizin arama motorlarında daha doğru bir şekilde konumlanmasını sağlayabilirsiniz. Bununla beraber HTML yapınızın ve sitenizin botlar tarafından daha anlaşılır bir yapıya kavuşmasına sağlamış olacaksınız. Bu düzenlemeler sayesinde internette yer alan binlerce veri arasından, hedef kitlenize daha doğru ve etkili bir şekilde ulaşabilirsiniz. Bu da doğal olarak kullanıcının size daha kolay ulaşması anlamına gelmektedir. Ayrıca onlara daha güzel bir deneyim yaşama imkanı vermiş olursunuz.
İnsanlar aradıkları doğru bilgiye ulaşabilmek için, öğrenmek istedikleri konu hakkında bir şeyler yazarak arama motorlarında sorgulatmaktadır. Arama motorları da insanların sorduğu sorulara direkt cevap verebilmeye çalışmaktadır. Arama motorları kullanıcıya istediği bilgiyi doğru şekilde sunabilmek için sürekli gelişmektedir. Bu durumda doğal olarak sizinde doğru bilgileri arama motorlarına vermeniz gerekmedir. Böylelikle arama motorları gözünde değeriniz artarken, kullanıcı için kolaylık sağlamış olursunuz. Bu yüzden sitenizi optimize etmeniz çok önemlidir.
