Arayüz geliştirme sürecinde ‘SEO’ konusunun incelikleri

Published in

SHERPA Blog Bülten

5 min readAug 13, 2015

Proje geliştirme sürecinde — her ne kadar çoğunlukla aynı şeyler yapılsa da — bazen, her bir arayüz için çok önemli olan noktalar gözden kaçabiliyor. Bunların başında da, SEO ile ilgili, arayüzü etkilemeyen ama günümüzde bir web sitesinin başarısı için sorgulanamayacak kadar önemli etkenler var.

Biz de, kendi geliştirme süreci içinde bu tip gözden kaçmaları engellemek için bir kontrol listesi hazırladık ve sizinle de paylaşarak nelere dikkat etmeniz gerektiği konusunda yol göstermek istedik.

Önemli HTML elementler

Title etiketi

<title>Sayfa Başlığı</title>

Bir HTML’nin neyle ilgili olduğu konusundaki en öncelikli etiket title (başlık) etiketidir. 50–70 karakter arası, önemli anahtar kelimeleri içeren bir başlık seçmeye özen gösterin. Her HTML dokümanının başlığının benzersiz olmasına özen gösterin.

Description etiketi

Açıklama metninin, 155 karakter sınırını aşmamasına dikkat edin. Her bir açıklamanın eklendiği sayfa, içeriğiyle ilgili ve benzersiz olmalıdır. Dikkatli bir şekilde seçilmiş açıklama metinleri, sayfanın tıklanma oranını da arttırır.

Img etiketi

Sayfada kullanılan görsellerde mutlaka alt etiketi kullanılmalı ve görsel boyutları belirtilmelidir.

Sayfa bağlantılarının gösterimi

Linkleri javascript olarak vermeyin. Güvenilmez gördüğünüz veya link vermek istemediğiniz linkleri rel=”nofollow” olarak belirtmeyi unutmayın. Görsellere verilen linklerde, alt=”” özelliğini, bağlantıyı açıklayıcı metin için kullanın.

<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ı

Web sitelerinde bazı sayfalar birbirinin aynısı olabilir. Genel olarak da, ana sayfada aşağıdaki gibi kullanımlar ortaya çıkar.

Bu tip durumları çözmek için tercih edilen url canonical etiketiyle <head> etiketiden sonra aşağıdaki şekilde gösterilmelidir. URL tercihen http://example.com şeklinde eklenmesi önerilir.

URL’ler için SEO ipuçları

Kısa URL’ler kullanmayı tercih edin. URL’lerin okunabilir olmasına ve açıklayıcı anahtar kelimeler içermesine dikkat edin.
Mümkün olduğunca, karışık parametreleri URL’lerde kullanmayın. URL rewriting ile, var olanları, kullandığınız sisteme göre daha açıklayıcı URL’lere dönüştürebilirsiniz.
Subdomain yerine, tercihen, aynı alan adı içerisinde farklı dizinleri kullanın. Örnegin, https://blog.example.com yerine https://example.com/blog şeklindeki seçeneği kullanmaya özen gösterin.

Arama motoru botlarının kontrolü

Robots.txt olarak kullanımı

Sitenin ana dizini içerisinde robots.txt dosyası oluşturarak, o dosya içerisinde dizinlerin izinlerini belirleyebilirsiniz. Aşağıdaki örnekte, robots.txt dosyası içerisinde Google botları için page2.html dosyası engellenmiş ve site haritasının linki verilmiştir.

İçeriği: User-agent: googlebot Disallow: /page2.html Sitemap: https://example.com/sitemap.xml

X-robots kullanımı

X-Robots — Tag HTTP üst bilgi yönergesini kullanarak bu bilgileri sayfalarınızın üst bilgisinde de belirtebilirsiniz. Bu, özellikle grafik veya benzeri doküman türleri gibi HTML olmayan dosyaların dizine eklenmesini sınırlamak istediğinizde kullanışlıdır.

Meta Robots kullanımı

HTML’de head taginden sonra kullanılır.

Robotların alabildiği değerler:

noindex: Sayfanın dizine eklenmesini önler.
nofollow: Googlebot’un bu sayfadaki bağlantıları izlemesini engeller.
nosnippet: Snippet’in arama sonuçlarında gösterilmesini engeller.
noodp: ODP/DMOZ kaynaklı alternatif açıklamanın kullanılmasını engeller.
noarchive: Google’nin bir sayfaya ait önbelleğe alınan bağlantısını göstermesini engeller.

Robotların alabildiği diğer değerler ve arama motorlarının bunlara karşı davranışları için şu siteyi inceleyebilirsiniz: https://yoast.com/articles/robots-meta-tags/

JS ve CSS dosyalarını engellemeyin. Google, web sitelerini normal bir kullanıcı düzeyinde ve daha doğru bir şekilde anlayabilmek için artık JS ve CSS dosyalarını da indeksliyor. Bunun yanında, mobil özellikli olup olmadığının tespiti konusunda da kullanıyor.

Daha detaylı bilgi için linkteki yazıyı okuyabilirsiniz: http://www.stradiji.com/google-css-ve-js-dosyalarinizi-google-botlarinin-erisimine-acin/

Eğer, meta etiket olarak robots tanımlı değilse, varsayılan olarak INDEX, FOLLOW değerini alır.

Sadece Meta Robots ve X-Robots arama sonuçlarından URL’leri kaldırır.

Sitemap kullanımı

Sitemap eklemek için kullanabileceğiniz birçok online araç var. Bunun yanında, projenin yapısına göre otomatik olarak güncellenebilen bir sitemap.xml de oluşturabilirsiniz.

WordPress gibi CMS’lerde bunu sağlayan eklentiler de mevcuttur.

Sitemap, varsayılan olarak şu şekillerde bulunabilir;

https://example.com/sitemap.xml https://example.com/sitemap.xml.gz https://example.com/sitemap.gz

Sayfalandırma kullanımı

Birbirinin devamı niteliğindeki ilişkili sayfalarda rel=”next” ve rel=”prev” kullanımıyla bu ilişkiyi belirtebilirsiniz.

Örneğin article_2’ sayfasında aşağıdaki şekilde, önceki ve sonraki sayfayı gösterebilirsiniz. http://www.example.com/article_2.html

Önemli sosyal medya etiketleri

<!– 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ı]” />

Open Graph özelliği Facebook, Twitter, Google Plus, LinkedIn, Pinterest tarafından desteklenmektedir.

Twitter için görsel boyutları, 120x 120px ve 1MB’tan küçük, Facebook için ise 1200x630px ve mobil siteler için 200x200px boyutunda olmalıdır.

‘Rich snippets’ ve ‘structured data’ kullanımı

Structured data, bir web sitesinin html kodlarına, Google benzeri arama motorlarının, içeriği daha rahat anlaması ve sınıflandırması için yedirilmiş bilgidir. Bu bilgi farklı gruplara göre özelleştirilebilir. Google webmaster tools’da, Yapılandırılmış Veri Test Aracı ile siteniz test edebilirsiniz.

Dil seçeneklerinin belirlenmesi

HTML dilinin belirlenmesi

URL yapısında ülke ve dil hedefleme

example.de gibi bölgesel alan adı uzantılarıyla,
en.example.com gibi subdomain yapsıyla,
example.com/en-US/ gibi alt dizin yapısıyla sağlanabilir.

rel=”alternate” hreflang=”x” kullanımı

Arama sonuçlarında doğru dil veya bölgesel URL’yi sunmak için rel=”alternate” hreflang=”x”özelliklerini kullanır.

HTML versiyonu

Varsayılan dil özelliğinin belirlenmesi: <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” /> Dil özelliğinin belirlenmesi: <link rel=”alternate” hreflang=”en” href=”https://example.com/en/” /> Dil ve bölge(ülke) özelliğinin belirlenmesi: <link rel=”alternate” hreflang=”en” href=”https://example.com/en-us/” />

Sitemap Versiyonu

<?xml version=”1.0″ encoding=”UTF-8″?> <urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xhtml=”http://www.w3.org/1999/xhtml”> <url> <loc>https://example.com/en/</loc> <xhtml:link rel=”alternate” hreflang=”de” href=”https://example.com/de/” /> <xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/en/” /> </url> <url> <loc>http://example.com/de/</loc> <xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/en/” /> <xhtml:link rel=”alternate” hreflang=”de” href=”https://www.example.com/de/” /> </url> </urlset>

“Arama motorları için değil kullanıcılarınız için optimizasyon yapın.”

Bu cümle, arama motoru optimizasyonunun en önemli prensibidir. SEO için yapılması gereken bu düzenlemeler, sitenizin arama motorlarında daha doğru konumlanmasının yanı sıra, HTML yapınızla beraber, sitenizin de botlar tarafında daha anlaşılır bir yapıya kavuşmasını sağlayacaktır. İnternetteki dev veri yığını arasından, hedeflediğiniz kullanıcılarınıza daha etkili bir şekilde ulaşabilirsiniz. Bu da, kullanıcılarınızın size ulaşması ve arayüzde tasarladığınız deneyimi yaşamaları için en uygun yoldur.

Bugün, insanlar artık telefon numaralarını ezberleyemiyor. Çünkü, tüm numaralara istediği anda ulaşabiliyor. Aslında artık insanlar, web sitelerinin adını bile aklında tutamıyor. Çünkü aradığımız her şeye — hatta sorduğumuz sorulara — direkt cevap vermeyi amaçlayan arama motorlarıyla yaşıyoruz. Bu da, arama motorları için siteyi optimize etmenin ne kadar önemli olduğunu gösteriyor.

Buradaki önemli noktalara kendi ekleyeceklerinizle birlikte oluşturacağınız bir kontrol listesiyle, siz de, çok fazla zaman harcamadan projelerinizde gözden kaçabilecek bu maddeleri kolaylıkla çözüme kavuşturabilir ve SEO açısından önemli bir adım atabilirsiniz.

Originally published at blog.designedbysherpa.com on August 13, 2015.