Site İçi SEO - Resimler

Site İçi SEO - Resimler

Resim sayısı, CSS sprite tekniği, resim açıklamaları, resim boyutlandırma, resim büyüklüğü ve sıkıştırma ve resimlerin URL yapısı konularına bakalım.

RESİM SAYISI

Sitelerde kullanılan resimler içeriğin daha akılda kalıcı ve kolay anlaşılır olması için gerekli elemanlardır. Resimler ile içerik kısa sürede anlatılabilir ve daha dikkat çekici olması sebebiyle ziyaretçiler kolaylıkla resimler araclığıyla yönlendirilebilir. Kullanılan resimlerin sayıca fazla olması, sitede gerçekleşen sorgu sayısını ve resimler boyutuna bağlı olarak sitenin KB büyüklüğünü etkilediği için site hızı üzerinde doğrudan etkisi olur. Bu sebeple resimler mümkün olduğunca az sayıda kullanılmalıdır. Resim sayısını azaltmak için;

  • Kullanılan resimler birleştirilerek tek resim olarak kullanılabilir.
  • Resim yerine yazılar kullanılabilir.

Css Sprite Tekniği

Css sprite tekniği, XHTML kaynaklı resimlerin birleştirilerek tek bir resim olması ve css kaynağına taşınarak hızlı bir şekilde gösterilmesini esas alır. Bu şekilde hem kaynak kod büyük ölçüde azalmış olur hem de onlarca resim 1 resim şeklinde çağırıldığı için sorgu sayısı azalmış olur. Bu sebeple hem hızlı hem de SEO'da katkı sağlar.

Aşşağıda yer alan 2 site ile, kod bilgisine gerek kalmadan css sprite işlemini web sitelerinize uygulayabilirsiniz.

RESİM AÇIKLAMALARI

Daha önce alt tag kelimesini açıklamak üzere özet olarak anlatmıştık. Resim açıklamaları Google'ın resimleri okuyabilmeleri için resim kodlarına ilave edilen açıklama etiketidir. Alternatif metin olarak da geçen bu etiketler sayesinde, sitenizin hem normal arama sonuçları hem de görsel arama sonuçları için optimize edilmektedir.

Resim aramalarında, üst sıralarda bulunmak için resimler için de SEO'yu dikkate almalıyız. Alt etiketi, Google gözünde resimlerin yorumlanması demektir. Bu aynı zamanda sayfa için optimizasyonda da bir bütünlük oluşturmaktadır. Dolayısıyla SEO'da olmazsa olmazlardandır. Resim alt etiketlerini, resim olamayan linkler için kullanmak, filtreye girmenize yok açabilir. Alt etiketini sadece sitenizde görüntülenen HTML kaynaklı resimler için kullanmanız gereklidir. Aynı zamanda alt etiketlerine, birden fazla anahtar kelimenizi virgül ile ayırarak girmenize spam görünümü oluşturacağına için filtreye girmenize sebep olabilir. Yapmanız gereken en iyi alt açıklama metni, resimde gördüklerinizi cümle olarak yazmaktır. Google'un gözü olsaydı resimde ne görecekti, bunu alt etiketinde açıklamanız gerekir. Google'a ne kadar dürüst olursanız o da size o kadar cömert davranır.

Eğer resmen bir link verilmişse, link verilen sayfadaki bilgiler ile resimde kullanılan açıklama metni de uyumlu olmalıdır. Bu da alt açıklamasının doğallığını belirtmektedir. Aynı zamanda alt etiketlerinde anahtar kelimelerinizin de bulunması gerekmektedir. Dolayısıyla anahtar kelimenizle ilişkili resimleri de doğru alt etiketleriyle bulundurmak faydalı olucaktır.

RESİM BOYUTLANDIRMA

Sitelerde kullanılacak resimlerde genellikle orjinal boyutunda kullanılmazlar. 400x400 pixellik bir resim 100x100 pixellik bir alanda küçültülerek kullanılır. Ancak resmin gerçek kaynağı 400x400 pixellik bir resimdir. Dolayısıyla resim hangi boyutlarda kullanıldığı önemli olmadan orjinal çözünürlüğüne göre çağırılır. Dolayısıyla kullanılması gereken yerde daha büyük bir boyutlu resim olmuş olur. Bu sebeple, Resimleri, kullanacağımız gerçek alanın ölçülerine göre boyutlandırarak kullanmakta fayda vardır. Bu sayede resim kb olarak büyüklüğü de azalarak sitenin toplam yüklenme süresi de azalacaktır.

Resimlerin orjinal boyutlarında kullanılması hem doğallık ilkesi gereği önemlidir, hem de sitenin hızını optimize etmek için gereklidir.

Resimlerin gerçek boyutu dikkate alınmaksızın, site üzerinde görüntülendiği boyutu genişlik ve yükseklik ölçüsü olarak belirtmek gerekmektedir. Eğer kodlamada resim boyut etiketleri bulunmuyorsa, tarayıcılar öncelikle resmi tarayıcının, tam ekranı büyüklüğünde açar daha sonra orjinal koyutuna küçülür. Ancak günümüz teknolojileri sayesinde bu işlem saniyeden daha az bir sürede gerçekleştiği için anlaşılmamaktadır. Sitenizdeki resimlerin genişlik ve yükseklik ölçüleri kodlamada belirtmek, tarayıcıların resimlerin boyutlarını daha hızlı okuyarak, hızlı yüklenmesini ve görüntülenmesini sağlaycaktır.

Resim boyut etiketleri height=yükseklik ölçüsü ve width=genişlik ölçüsü olarak belirlenmektedir. Örnek bir kullanım : height="60" width="468"

RESİM BÜYÜKLÜĞÜ VE ŞIKIŞTIRMA

Resimlerin kalitesi genellikle baskı ve web olarak belirlenir. Bu kaliteye göre resimlerin boyutları küçültülerek çok daha hızlı yüklenmesi sağlanabilir. Oyle ki, sıkıştırılan 10 resim şıkıştırılmamış 1 resme denk düşebilmektedir. Resimleri Photoshop gibi programlarla kalite düzeyi veya çözünürlük düzeyi küçültülerek, boyutları azaltılır ve web ortamında daha hızlı yüklenmesi sağlanır.

Resimlerin sıkıştırılması online olarak çeşitli siteler ile de mümkündür. Bunlardan kullanılması önerildiği 2 site bulunmaktadır.

  • tools.dynamicdrive.com/imageoptimizer/
  • www.smushit.com/ysmush.it/

Resimlerin formatı da bu büyüklükte etki eden bir kriterdir. Web üzerinden jpg formatının orta kalitede kullanılması tavsiye edilir. 

RESİMLERİN URL YAPISI

Resimlerin kaynak kod içerisinde sahip olduğu URL yapısı da sitenin hızlanmasından az çok etkilidir. Bu konuda aslında direk resimlerle alakalı olmasa da, resimlerde de dikkat edilmesi gereken bir hususa değineceğiz. Web sitelerinde resimlerin XHTML kaynaklı kullanımı genel olarak aşağıdaki örnekteki gibidir.

<img src="http://www.siteadi.com/wp-content/uploads/2016/10/resi-adı.jpg"
 alt="Resim adı" width="125" height="125"/>

yerine, ana dizine yakın resim klasörü oluşturup resimleri içerisine atıyoruz ve URL yapısında site adresini yazmayarak oldukça fazla sayıda karakter tasarrufu yapıyoruz.

<img src="/tema/images/resim-adi.jpg" alt="Resim adi" widht="125" height="125"/>

URL yapısını kullanılyorum, aynı şekilde resim çağırıyoruz. 100'lerce resimde bu yöntem uygulandığından fazlaca karakter tasarrufu ile kaynak kodunuzu sadeleşmiş ve siteniz hızlanmış olacaktır.

Yunus Emre SAK
Eğitmen • Yazar • Girişimci
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git