Görsel Optimizasyonu

Sıralamaları etkileyen teknik faktörlerden biri olarak anılır ve 7 önemli ayrıntıyı barındırır. Bunu ben değil, Google ve W3 standartları söylüyor;

1) Teknik Ayrıntılar

Bir fotoğrafın HTML kodları içinde nasıl göründüğüne ilişkin gerekli bilgiler aşağıda verilmiştir.

<img src="http://www.seobilog.com/seo-swot-analizi.jpg" alt="Seo Swot Analizi Şeması" title="Seo Swot Analizi Şeması"/>

Arama motorlarına sayfa üzerindeki görseller hakkında bilgi vermek ve özellikle de engelli veya siteleri metin tarayıcılar aracılığıyla kullanan kişiler için önemli ayrıntılar içerir. Dolayısıyla her seo'nun kesinlikle bilmesi, doğru ve eksiksiz bir şekilde uygulaması gereken hassas bir konudur. Konu hakkında daha da güncel bilgilere ulaşmak isteyenler Google Görseller sayfasını ve Arama Motoru Başlangıç Rehberi kitapçığının 17. sayfasına da göz atabilirler.

2) Görsellerin Sıralamalar Üzerindeki Etkisi

Sıralamalardaki etkisine yönelik önemli bir sinyal, özellikle Google haberler bölümündeki şu satırlar ile dikkat çeker;

Sitenizin Google Haberler'deki sıralamasını etkileyebilecek bazı teknik faktörler de mevcuttur. Bu faktörler arasında, sitenize bağlantı veren diğer alakalı siteler ve makalelerinizin kodundaki açıklayıcı ve doğru <title> ve <alt> etiketleri bulunmaktadır. ("Sıralamalar")

Anlaşılan şudur ki; Konunun Google sıralamalar sayfasında anılmasından dolayı Görsel Optimizasyonu meselesinde önemsenmesi gereken ilk konu <alt> etiketi. Ayrıca seo teknikleri arasında yer verdiğimiz "benzersiz fotoğraf kullanımı" konusunu da inceleyebilirsiniz.

3) Görsel ALT Açıklamaları

Google'ın verdiği örnekleri incelediğimizde; 4 kelimelik bir alt açıklamasını "En iyi" olarak tanımlarken, 31 kelimelik bir alt açıklamasını "Kaçınılması gerekenler" olarak tanımladığını görürüz. Ayrıca fazla kelime kullanımlarından kaynaklanabilecek spam ihtimaline karşın anahtar kelime doldurma konusuna da dikkat çekiyor. Şimdi de W3 standartları ile belirlenmiş olan görsel çeşitlerine ve bunlardaki alt açıklamaların nasıl kullanıldıklarını inceleyelim;

• Bilgi Veren Görseller

İşlenen konuyu güçlendirmek amacıyla eklenen fotoğraf, grafik, çizim, ikon vb. bilgi veren görsellerdir. Aşağıdaki örnekte ALT açıklaması, "Telefon:" olarak tanımlanmış bir telefon ikonu kullanılmış ve hemen ardından da rakamlarla telefon numarası eklenmiştir. Görünen metin içinde "Telefon" ibaresi geçmediği halde SERP sonuçlarında "Telefon: 0123 456 78 90" şeklinde görünür.


<img src="telefon.png" alt="Telefon:"> 0123 456 78 90



 0123 456 78 90

• Dekoratif Görseller

Sayfayı veya metni tasarımsal anlamda güçlendirmek için kullanılırlar ve ALT etiketi için açıklama yapılmasına ihtiyaç yoktur. Örnekte mavi bir çizgi verilmiş ancak "alt" açıklamasına bir şey girilmemiştir.


<img src="footercizgisi.png" alt="">



• İşlevselik Kazandıran Görseller

Site logosu, ana sayfa butonu, arama kutuları, indir vb. çeşitli düğmeler gibi sayfaya işlevsellik katan görsellerdir. Metin okuyucu uygulamaların rahatça çözümleyebilmeleri için ALT etiketine mutlak açıklama girilmelidir. Örnekte; Çıkış alma (yazdırma) eylemini temsil eden "Yazdır" düğmesi için "Bu Sayfayı Yazdır" açıklaması girilmiştir. Ancak dikkat edilmesi gereken en önemli nokta, aynı mesajın metin içinde tekrar edecek şekilde ikinci kez kullanılmaması gerektiğidir.


<img src="yazdir.png" alt="Bu Sayfayı Yazdır">

• Metin İçerikli Görseller

İçinde metin barındıran görsellerdir. Özellikle logo, slogan, matematiksel ifadeler vb. içerikli ama bağlantı verilmeyen görsellerde alt açıklamasına ihtiyaç vardır, kullanılmalıdır (bağlantı içerenler "işlevsel görseller" sınıfına giriyor). Aşağıdaki örnek üzerinden gidersek, durumun hassasiyeti açık olarak görülmektedir.


<img src="0noktaüç.png" alt="Devirli 0,3333 (Dördüncü 3'ün üzeri çizgili)">

• Karmaşık Görseller

Grafikler, tablolar, lokasyon bilgileri vb. gibi önemli bilgiler içeren görsellerdir. İlgili görsel hakkında bilgi vermek için uzun tag açıklamaları yazılabileceği gibi semantik yönlendirmeler, farklı html etiket kullanımları gibi alternatif yöntemlerde kullanılabilir.


<img src="tablo.png" alt="2010-2014 Yılları arasında internet kullanıcılarının yaş ortalamalarını gösteren grafik.">

• Grup Görseller

Aynı görüntünün ufak değişikliklerle ve sıralı dosya ismi verilerek kullanıldığı durumlardır. Genellikle ana görüntü üzerinde ya efekt uygulanmış ya da aynı ürünün önden yandan arkadan görünümü gibi bir durum söz konusudur ve her birisi için açıklama verilmelidir. Rating gibi ardarda aynı yıldızın 5 tane yerleştirilmesi gibi durumlardaysa ilkine açıklama yapılmalı, diğerleri içinse boş kullanılması en doğru kullanım şeklidir.




<img src="yildiz-tam.png" alt="5 üzerinden 3,5 Yıldız">
<img src="yildiz-tam.png" alt="">

<img src="yildiz-tam.png" alt="">

<img src="yildiz-yarim.png" alt="">

<img src="yildiz-bos.png" alt="">




• Görüntü Haritaları (Image Maps)

Verilebilecek en güzel örnek, tıklandığında ilgili birimin ya da kişinin sayfasına yönlenen 'organizasyon şemaları' olabilir. Bu tür şemalar üzerinde haritalamanın yapılması, özellikle ekran okuyucu kullanan engelliler için çok yüksek bir fayda sağlar.




<img src="organizasyon.png"

     alt="Yönetim Kurulu: "

     usemap="#Map">

<map id="Map" name="Map">

<area shape="rect"

     coords="176,14,323,58"

     href="[…]"

     alt="Suat Güçlü: Başkan">

[…]

<area shape="rect"

     coords="6,138,155,182"

     href="[…]"

     alt="Ayşe Sultan: Pazarlama Müdürü)">

[…]

</map>




Görselinizin hangi kategoriye girdiğine karar veremiyorsanız, 3 numaralı bu başlıkta kaynak olarak faydalandığım w3.org sitesince hazırlanmış "Karar Verme Tablosu" işinizi oldukça kolaylaştırabilir.

4) Görsel Dosya İsmi

Görselin ne olduğuna ilişkin bilgiyi kısaca ifade eden ("sporaraba.jpg") belirleyici bir dosya ismi vermek, belirsiz bir isme oranla ("resim.jpg") daha anlaşılır olacaktır. Ayrıca Google Görsel Aramalar bölümünde arama yapan ihtiyaç sahibi ziyaretçilerin görselinizi bulmaları daha da kolaylaşır.

5) Görsel Başlıkları

Görselin üzerine fare ile geldiğinizde görünen açıklamadır. Arama yapan ziyaretçinin farklı anahtar kelimelerden yakalanması adına, keyword barındıran bir görsel başlık kullanımı sayfa için ekstra fayda sağlayacaktır. 

6) Sıkıştırma Oranı

Bir görsel, en az görüntü kaybıyla ne kadar az yer kaplarsa sayfanızın yüklenmesi de o kadar hızlı olur. Adobe Photoshop ve benzeri uygulamalar yardımıyla resimlerinizi kayıt sırasında daha az yer kaplayacak şekilde kaydedebilirsiniz. Aşağıdaki örnek çalışmada imaj optimizasyonu yapılmış ve tıkladığınızda göreceğiniz üzere ilk resim jpeg 8, ikinci 5 ve son resimse 1 seviyesinde kayıt edilmiştir. Her görsel sırasıyla 20 kb, 12 kb ve 4 kb yer kapladılar. Açıkça görebileceğiniz gibi sıkıştırma seviyesi düşürüldükçe resmin kalitesi de düşmektedir. Bu amaçla yapılmış, "daha yüksek kalite daha düşük hacim" hedefleyen ekstra profesyonel uygulamalar da vardır.

Resim Sıkıştırma Seviyeleri

7) Görsel Site Haritaları

Ana sitenizden farklı olarak CDN hizmeti alıyor, görsellerinizi de ayrı bir şekilde orada barındırıyor olabilirsiniz. Görsel site haritalarını kullanmak daha profesyonel ve hızlı bir çözümdür. Görselleriniz hakkında coğrafi konum, lisans, başlık, açıklama ve benzeri bilgiler barındırabilir. Tek bir konu olarak ayrıca ileride ele alınacak olup detaylı bilgi için "Resim Site Haritaları" konusunu inceleyebilirsiniz.


Sonuç: Otoriterler en ince hatlarıyla standartları belirlemiş. Aslında hemen hemen tüm website alt yapıları (cms vb.), ele aldığımız resim optimizasyonu içindeki çoğu ayrıntıyı bize hücre düzeyinde sunmuş durumda. Bize düşünse sadece içlerini doldurmak. Ancak belki tembelliğimizden belki de sonuca çabuk varma isteğimizden olsa gerek "es geçiyoruz". E o zaman da bizi es geçiyorlar : Kalın sağlıcakla :)



Görsel Optimizasyonu ("image optimisation") konusu, seo çalışmalarındaki en önemli 50 kriteri listeleyen "Seo Rehberi"nin bir alt başlığıdır.

Sevgiler
S120703