Bir web sitesinin hızlı olması kullanıcılar kadar arama motorları için de önemlidir. Bunu site hızının SEOya etkisi başlıklı yazımızda detaylı olarak anlatmıştık. Resim optimizasyonu yaparken SEO çalışmalarınıza olumlu yönde etki yaratması adına sizlere önerilerimizi sunuyoruz. Dikkat edilmesi gereken konularda detaylı açıklamalarımıza yer vererek siz değerli okurlarımıza resim optimizasyonuna dair önemli bilgilerin yer aldığı içeriğimize göz atmaya başlayalım.
Resimlerin Adlandırılması
Görseller Google’de arama yapan kullanıcılar ilgili sonuç hakkında en hızlı ve anlamlı görsellere erişmek ister. İşte tam bu aşamada görsellerin doğru bir şekilde adlandırılması hedef kitlenin aramalarında yer almanızı sağlayacaktır. Çünkü arama motoru botları görselleri anlamlandıramaz. Bunun için site sahibinin görseli isimlendirirken anlamsız bir isimlendirme yapmak yerine anlamlı Google’a anlatan bir şekilde isimlendirmelidir. Örneğin erkek spor ayakkabı hakkında arama yapan bir kullanıcıya sunulacak görsellerin adlandırması IMG123.jpg şeklinde değil, erkek-spor-ayakkabi.jpg şeklinde olmalıdır.
Açıklayıcı Alt Metinler Kullanılması
Alt metinler, bir görüntüyü metin olarak açıklar. Ayrıca bu metini kullanmanız durumunda resmin altında kullanıcıya anlamlandırılmış bir mesaj niteliğinde sunma şansına sahipsiniz. Bu metinler görsel adlandırılması ile başlayan alt metin kullanımı ile devam eden, arama motoru botlarına görselin ne anlama geldiğini belirten çalışmalardan biridir. Alt metinleri kod yapınızda HTML etiketleri arasında kullanmalısınız.
<img src="erkek-spor-ayakkabi.jpg" alt="Erkek Spor Ayakkabı"/>
Resimlere Boyut Etiketleri
Web sitelerinde yer alan resimler, xhtml veya css kaynaklı boyutlandırılırlar. Bunların dışında xhtml kaynaklı resimler için hiçbir ölçü tanımlaması yapılmamış da olabilir. İşte bu gibi resimlerin yüklenmesi, ölçüsü olan resimlere oranla daha yavaş gerçekleşir. Web tarayıcıları hiçbir ölçü bilgisi girilmeyen resimlerde, öncelikle resimi tam boyutta açar, sonra orjinal boyutuna getirir. Bu işlem saniye veya saliselerle ifade edilse de 100 lerce resim barındıran sitelerde büyük zamanlara denk gelmektedir.
Bu sebeple xhtml kaynaklı kullanılan resimlerde height="100" width="100" şeklinde resim boyutları belirtilmelidir ki tarayıcılar resimleri ve boyutlarını daha hızlı okuyarak kullanıcıya daha hızlı göstersin.
Resimlerin kalitesi genellikle baskı ve web olarak belirlenir. Bu kaliteye göre resimlerin boyutları küçültürek çok daha hızlı yüklenmesi sağlanabilir. Öyle ki, sıkıştırılan 10 resim sıkıştırılmamış 1 resime 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 bir tanesi Dynamic Drive sitesidir.
Resim Boyut Optimizasyonu
Sitelerde kullanılacak resimler genellikle orjinal boyutunda kullanılmazlar. 400x400 pixellik bir resim 100x100 pixellik bir alanda küçültülerek kullanılır. Ancak resimin gerçek kaynağı 400x400 pixellik bir resimdir. Dolayısıyla 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 boyutlayarak kullanmakta fayda var.
Resim Formatı
Jpg, png ve gif gibi resim formatları amaçlarına göre farklı yerlerde kullanılabilirler. Formatlar farklı sıkıştırma tekniklerine göre boyutları farklılıklar gösterir. Bu konuda kendi deneyimlerime göre tavsiyelerim, Eğer web üzerinde kullanılacak bir resim ise, kalite düzeyi 60 da olan bir jpeg, şeffaf bir resim olacaksa 8 bitlik png, animasyon olacaksa gif tercih ederim. Yapılan testler sonucunda jpeg formatı fotoğraflar gerçekçi görüntüler için kullanılırken, png formatı çizgi resimler, metin ağırlıklı resimler ve az renk içeren resimler için kullanılır.
Resimlerin Url Yapısı
Resimlerin kaynak kod içerisinde sahip olduğu url yapısı da sitenin hızlanmasında az çok etkilir. 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="
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/seo-danismanligi2.jpg" alt="SEO Danışmanlığı" width="125" height="125"/>
url yapısını kullanıyorum, aynı şekilde resimi çağırıyoruz. 100 lerce resimde bu yöntem uygulandığında fazlaca karakter tasarrufu ile kaynak kodunuz sadeleşmiş ve siteniz hızlanmış olacaktır.
Css Sprite Tekniği
Css sprite tekniği, xhtml kaynaklı resimlerin birleştirlerek tek bir resim olmasını 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ız 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.
csssprites.com
spritegen.website-performance.org
Resimlerde Yapılandırılmış Veri Kullanımı
Görsellerinizde yapılandırılmış veri kullanımına yer verirseniz kullanıcılara sayfanız hakkında bilgi verebilir ve resminizi zengin sonuçlarda kullanıcılara sunabilirsiniz. Yapılandırılmış veri kullanımı ve daha fazlasına ulaşmak isterseniz
Resimlerde Site Haritası Oluşturma
Google’ın bu konuda açıklaması bulunuyor. Açıklama; “Resimler sitenizdeki içerikle ilgili önemli bir bilgi kaynağıdır. Google’a resimlerinizle ilgili daha fazla ayrıntı verebilir ve bir resim site haritasına bilgi ekleyerek başka türlü bulamayacağımız resimlerin URL’sini sağlayabilirsiniz .” şeklinde kullanıcılara sunuluyor. Haydi site haritasında kullanabileceğiniz etiketlere göz atalım.
<image:image> : Bir görsel <url> etiketi içerisinde bulunur. Bu etiket en fazla 1000 adet <image:image> etiketi barındırabilir. Bu etiket görsel ile ilgili tüm bilgileri içerisinde barındırır.
<image:loc> : Resmin URL’inin belirtildiği kısımdır. Burada dikkat edilmesi gereken nokta bu URL’lerin robots.txt dosyasında taranmasının engellememiş olmadığını kontrol edin.
<image:caption> : Resim hakkında açıklama yazısını bu etiketi kullanarak gerçekleştirebilirsiniz.
<image:geo_location> : Resmin coğrafi konumun belirtildiği etikettir.
<image:title> : Resmin başlığının belirtildiği kısımdır.
<image:license> : Resmin lisansı var ise bu lisansa bağlantı veren URL’in belirtildiği etikettir.
Resimleriniz içi oluşturacağınız site haritası içerisinde <image:image> ve <image:loc> etiketlerini kesinlikle barındırmalıdır. Diğer etiketlerimizin kullanımı isteğe bağlıdır.
Resimlerin Yüklenmesi İçin Önbellekleme İşlemi
Çok fazla resim kullanımında kullanıcının bekleme süresini azaltmak adına tarayıcı önbellekleme işlemi kullanılmalıdır. Bu işlem ile resimler ziyaretçilerinizin tarayıcısında depolanır. Siteye bir sonraki girişte tarayıcı deposunda yer alan görseller hızlı bir şekilde ziyaretçilerinize sunulacaktır.
Örneğin, ana sayfanıza ulaşmak isteyen ziyaretçiniz bu sayfada ki görsellerin yüklenmesini bekleyecektir. Bir sonra ki gün tekrar ana sayfaya giriş yapan ziyaretçiniz tekrar görsellerin ve sayfanın yüklenmesini bekleyecek ve bu durum ziyaretçi tarafında olumsuz etki yaratabilir.
Eğer önbellekleme işlemi gerçekleştirirseniz ilk açılışta yüklenen görselleri bir sonraki ziyaretlerde tekrar yüklemek durumunda kalmayacaksınız. Bu durum sayfalarınızın çok daha hızlı yüklenmesini sağlayacaktır.
WordPress Sistemler İçin SEO Friendly İmages Eklentisi
Sadece yazılarından değil, sitesine yüklediği resimler ile de hit almak isteyenler için mükemmel bir eklenti olan SEO Friendly Images, Türkçe anlamı SEO dostu resimlerdir. Ayrıca eklenti, Vladimir Prelovac isimli WordPress eklentisi yazarı tarafından kodlanmıştır. Bu eklenti sayesinde Google görsel arama başta olmak üzere tüm resim arama motorlarından sitenize hit çekebilirsiniz.
SEO Friendly İmages Kurulumu
●Eklentiyi indirdikten sonra FTP'den /wp-content/plugins/ dizinine gönderin.
●Admin paneline girerek "Eklentiler" sayfasından eklentiyi aktifleştirin.
●Eklentinin ayarlarını Admin Panelinden değiştirebilirsiniz(Ellememenizi öneririm, kendi ayarları zaten yapılandırılmış).
SEO Friendly İmages Ayarları
Admin Paneli > Ayarlar > SEO Friendly Images sayfasına girerek resimlerinize özel bağlantılar verebilirsiniz. Varsayılan ayarları, en iyi ayarlardır, değiştirmemenizi öneririz.
Alt Etiketi ile, resimlerin alt etiklerinde görüntülenmesi istenilen yazılar ayarlanabilir. %name ile önce resimin isminin sonrasında %title ile yazı başlığının alt etiketi olarak kullanılması sağlanmıştır.
Resimlerin title etiketlerinde ise, sadece sayfa başlığı kullanılması sağlanmıştır.
Bir web sitesinin hızlı olması kullanıcılar kadar arama motorları için de önemlidir. Bunu site hızının SEOya etkisi başlıklı yazımızda detaylı olarak anlatmıştık. Resim optimizasyonu yaparken SEO çalışmalarınıza olumlu yönde etki yaratması adına sizlere önerilerimizi sunuyoruz. Dikkat edilmesi gereken konularda detaylı açıklamalarımıza yer vererek siz değerli okurlarımıza resim optimizasyonuna dair önemli bilgilerin yer aldığı içeriğimize göz atmaya başlayalım.
Resimlerin Adlandırılması
Görseller Google’de arama yapan kullanıcılar ilgili sonuç hakkında en hızlı ve anlamlı görsellere erişmek ister. İşte tam bu aşamada görsellerin doğru bir şekilde adlandırılması hedef kitlenin aramalarında yer almanızı sağlayacaktır. Çünkü arama motoru botları görselleri anlamlandıramaz. Bunun için site sahibinin görseli isimlendirirken anlamsız bir isimlendirme yapmak yerine anlamlı Google’a anlatan bir şekilde isimlendirmelidir. Örneğin erkek spor ayakkabı hakkında arama yapan bir kullanıcıya sunulacak görsellerin adlandırması IMG123.jpg şeklinde değil, erkek-spor-ayakkabi.jpg şeklinde olmalıdır.
Açıklayıcı Alt Metinler Kullanılması
Alt metinler, bir görüntüyü metin olarak açıklar. Ayrıca bu metini kullanmanız durumunda resmin altında kullanıcıya anlamlandırılmış bir mesaj niteliğinde sunma şansına sahipsiniz. Bu metinler görsel adlandırılması ile başlayan alt metin kullanımı ile devam eden, arama motoru botlarına görselin ne anlama geldiğini belirten çalışmalardan biridir. Alt metinleri kod yapınızda HTML etiketleri arasında kullanmalısınız.
<img src="erkek-spor-ayakkabi.jpg" alt="Erkek Spor Ayakkabı"/>
Resimlere Boyut Etiketleri
Web sitelerinde yer alan resimler, xhtml veya css kaynaklı boyutlandırılırlar. Bunların dışında xhtml kaynaklı resimler için hiçbir ölçü tanımlaması yapılmamış da olabilir. İşte bu gibi resimlerin yüklenmesi, ölçüsü olan resimlere oranla daha yavaş gerçekleşir. Web tarayıcıları hiçbir ölçü bilgisi girilmeyen resimlerde, öncelikle resimi tam boyutta açar, sonra orjinal boyutuna getirir. Bu işlem saniye veya saliselerle ifade edilse de 100 lerce resim barındıran sitelerde büyük zamanlara denk gelmektedir.
Bu sebeple xhtml kaynaklı kullanılan resimlerde height="100" width="100" şeklinde resim boyutları belirtilmelidir ki tarayıcılar resimleri ve boyutlarını daha hızlı okuyarak kullanıcıya daha hızlı göstersin.
Resimlerin kalitesi genellikle baskı ve web olarak belirlenir. Bu kaliteye göre resimlerin boyutları küçültürek çok daha hızlı yüklenmesi sağlanabilir. Öyle ki, sıkıştırılan 10 resim sıkıştırılmamış 1 resime 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 bir tanesi Dynamic Drive sitesidir.
Resim Boyut Optimizasyonu
Sitelerde kullanılacak resimler genellikle orjinal boyutunda kullanılmazlar. 400x400 pixellik bir resim 100x100 pixellik bir alanda küçültülerek kullanılır. Ancak resimin gerçek kaynağı 400x400 pixellik bir resimdir. Dolayısıyla 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 boyutlayarak kullanmakta fayda var.
Resim Formatı
Jpg, png ve gif gibi resim formatları amaçlarına göre farklı yerlerde kullanılabilirler. Formatlar farklı sıkıştırma tekniklerine göre boyutları farklılıklar gösterir. Bu konuda kendi deneyimlerime göre tavsiyelerim, Eğer web üzerinde kullanılacak bir resim ise, kalite düzeyi 60 da olan bir jpeg, şeffaf bir resim olacaksa 8 bitlik png, animasyon olacaksa gif tercih ederim. Yapılan testler sonucunda jpeg formatı fotoğraflar gerçekçi görüntüler için kullanılırken, png formatı çizgi resimler, metin ağırlıklı resimler ve az renk içeren resimler için kullanılır.
Resimlerin Url Yapısı
Resimlerin kaynak kod içerisinde sahip olduğu url yapısı da sitenin hızlanmasında az çok etkilir. 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="
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
" alt="SEO Danışmanlığı" 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/seo-danismanligi2.jpg" alt="SEO Danışmanlığı" width="125" height="125"/>
url yapısını kullanıyorum, aynı şekilde resimi çağırıyoruz. 100 lerce resimde bu yöntem uygulandığında fazlaca karakter tasarrufu ile kaynak kodunuz sadeleşmiş ve siteniz hızlanmış olacaktır.
Css Sprite Tekniği
Css sprite tekniği, xhtml kaynaklı resimlerin birleştirlerek tek bir resim olmasını 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ız 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.
csssprites.com
spritegen.website-performance.org
Resimlerde Yapılandırılmış Veri Kullanımı
Görsellerinizde yapılandırılmış veri kullanımına yer verirseniz kullanıcılara sayfanız hakkında bilgi verebilir ve resminizi zengin sonuçlarda kullanıcılara sunabilirsiniz. Yapılandırılmış veri kullanımı ve daha fazlasına ulaşmak isterseniz
Ziyaretçiler için gizlenmiş link,görmek için
Giriş yap veya üye ol.
adresinde yer alan içeriğimize göz atabilirsiniz. Görseller ürün, video ve yemek tarifi için yapılandırılmış veri kullanımını destekliyor. Burada dikkat etmeniz gereken nokta doğru yapılandırılmış veri kullanımını gerçekleştirmeniz gerekiyor.Resimlerde Site Haritası Oluşturma
Google’ın bu konuda açıklaması bulunuyor. Açıklama; “Resimler sitenizdeki içerikle ilgili önemli bir bilgi kaynağıdır. Google’a resimlerinizle ilgili daha fazla ayrıntı verebilir ve bir resim site haritasına bilgi ekleyerek başka türlü bulamayacağımız resimlerin URL’sini sağlayabilirsiniz .” şeklinde kullanıcılara sunuluyor. Haydi site haritasında kullanabileceğiniz etiketlere göz atalım.
<image:image> : Bir görsel <url> etiketi içerisinde bulunur. Bu etiket en fazla 1000 adet <image:image> etiketi barındırabilir. Bu etiket görsel ile ilgili tüm bilgileri içerisinde barındırır.
<image:loc> : Resmin URL’inin belirtildiği kısımdır. Burada dikkat edilmesi gereken nokta bu URL’lerin robots.txt dosyasında taranmasının engellememiş olmadığını kontrol edin.
<image:caption> : Resim hakkında açıklama yazısını bu etiketi kullanarak gerçekleştirebilirsiniz.
<image:geo_location> : Resmin coğrafi konumun belirtildiği etikettir.
<image:title> : Resmin başlığının belirtildiği kısımdır.
<image:license> : Resmin lisansı var ise bu lisansa bağlantı veren URL’in belirtildiği etikettir.
Resimleriniz içi oluşturacağınız site haritası içerisinde <image:image> ve <image:loc> etiketlerini kesinlikle barındırmalıdır. Diğer etiketlerimizin kullanımı isteğe bağlıdır.
Resimlerin Yüklenmesi İçin Önbellekleme İşlemi
Çok fazla resim kullanımında kullanıcının bekleme süresini azaltmak adına tarayıcı önbellekleme işlemi kullanılmalıdır. Bu işlem ile resimler ziyaretçilerinizin tarayıcısında depolanır. Siteye bir sonraki girişte tarayıcı deposunda yer alan görseller hızlı bir şekilde ziyaretçilerinize sunulacaktır.
Örneğin, ana sayfanıza ulaşmak isteyen ziyaretçiniz bu sayfada ki görsellerin yüklenmesini bekleyecektir. Bir sonra ki gün tekrar ana sayfaya giriş yapan ziyaretçiniz tekrar görsellerin ve sayfanın yüklenmesini bekleyecek ve bu durum ziyaretçi tarafında olumsuz etki yaratabilir.
Eğer önbellekleme işlemi gerçekleştirirseniz ilk açılışta yüklenen görselleri bir sonraki ziyaretlerde tekrar yüklemek durumunda kalmayacaksınız. Bu durum sayfalarınızın çok daha hızlı yüklenmesini sağlayacaktır.
WordPress Sistemler İçin SEO Friendly İmages Eklentisi
Sadece yazılarından değil, sitesine yüklediği resimler ile de hit almak isteyenler için mükemmel bir eklenti olan SEO Friendly Images, Türkçe anlamı SEO dostu resimlerdir. Ayrıca eklenti, Vladimir Prelovac isimli WordPress eklentisi yazarı tarafından kodlanmıştır. Bu eklenti sayesinde Google görsel arama başta olmak üzere tüm resim arama motorlarından sitenize hit çekebilirsiniz.
SEO Friendly İmages Kurulumu
●Eklentiyi indirdikten sonra FTP'den /wp-content/plugins/ dizinine gönderin.
●Admin paneline girerek "Eklentiler" sayfasından eklentiyi aktifleştirin.
●Eklentinin ayarlarını Admin Panelinden değiştirebilirsiniz(Ellememenizi öneririm, kendi ayarları zaten yapılandırılmış).
SEO Friendly İmages Ayarları
Admin Paneli > Ayarlar > SEO Friendly Images sayfasına girerek resimlerinize özel bağlantılar verebilirsiniz. Varsayılan ayarları, en iyi ayarlardır, değiştirmemenizi öneririz.
Alt Etiketi ile, resimlerin alt etiklerinde görüntülenmesi istenilen yazılar ayarlanabilir. %name ile önce resimin isminin sonrasında %title ile yazı başlığının alt etiketi olarak kullanılması sağlanmıştır.
Resimlerin title etiketlerinde ise, sadece sayfa başlığı kullanılması sağlanmıştır.
