Görsel SEO: Resimler İçin SEO Çalışması

Web sitelerinin arama motoru performansını iyileştirme amacıyla uygulanan SEO, temelde pek çok farklı parçanın bir araya gelmesi ve bu parçaların en doğru şekilde senkronize edilmesi halinde başarılı olmaktadır. Bu bağlamda en çok gözden kaçan noktalardan biri, web sitesindeki görsellerin optimize edilmesi gerekliliğidir. 

Günümüzde web sitelerine görseller genellikle henüz web tasarım sürecinde optimize edilmeden yüklenir. Gerekli optimizasyonun yapılmamış olması web siteleri açısından olumsuz bir etken haline gelebilir. Çünkü internet kullanıcılarının arama motorlarında yaptığı görsel aramaların sayısı her geçen gün artmaktadır. Buna bağlı olarak web sitelerinin öne çıkmasını sağlayan unsurlar arasında görsel SEO son derece önemli bir kriter olarak kabul edilmektedir. 

Web sitelerinde paylaşılan görsellerin uygun bir şekilde optimize edilmemesi, son derece yoğun bir potansiyel trafikten ve arama motoru sıralamalarının üst sıralarından uzak kalınacağı anlamına gelmektedir. Bunun nedeni, görsellerin yalnızca içerikleri daha erişilebilir ve ilgi çekici kılıp kullanıcılarla olan etkileşimi artırmakla kalmaması, aynı zamanda SEO için de son derece önemli bir yapı taşı olmasıdır.

Resim SEO Nedir?

Kabul etmek gerekiyor ki, başarılı bir dijital pazarlama stratejisi yalnızca metin içerikleriyle sınırlı değildir. Web sitelerinde paylaşılan görseller, internet kullanıcılarının ilgisini çekme ve web sitesinin görünürlüğünü artırma noktasında son derece güçlü bir araç olma özelliğine sahiptir. Ayrıca web sitelerindeki resimleri optimize etmek yalnızca internet kullanıcılarının değil, aynı zamanda arama motorlarının da dikkatini çekmeye yardımcı olacaktır. Bu aşamada ise devreye resim SEO diğer bir deyişle görsel SEO girmektedir.

Resim SEO ya da görsel SEO, herhangi bir web sitesinde bulunmakta olan görsellerin arama motoru optimizasyonu kullanılarak içeriklere uygun bir şekilde hazırlanması ve düzenlenmesi anlamına gelir. Görsel SEO kapsamında, web sitesinin performansını ve görsel arama sıralamasını iyileştirmeye yönelik SEO stratejileri uygulanır. Bu doğrultuda görsel SEO’nun sayfa içi SEO’nun en önemli parçalarından biri olduğu ifade edilebilir.

Resim SEO ya da görsel SEO kapsamında bir blogun ya da sitenin kullanıcı deneyimini iyileştirmek ve ziyaretçi trafiğini artırmak için ideal format, boyut ve çözünürlükte yüksek kaliteli görüntüler oluşturulup paylaşılır. Aynı zamanda, arama motoru tarayıcılarının bunları okuması ve sayfa bağlamını en iyi şekile anlaması için görsellerin başlıkları, alt etiketleri ve açıklamaları doğru bir şekilde yapılandırılır.

Görüntülerin optimize edilmesinin pek çok farklı nedeni vardır. Web sitesinde paylaşılan resimler çok büyük olduğunda, buna bağlı olarak web sayfası yavaşlar ve kullanıcı deneyimi olumsuz yönde etkilenir. Görsel optimizasyonu kapsamında dosya boyutunun küçültülmesiyle sayfa yükleme süresi hızlandırılır.

Görüntülerin boyutu kaliteden ödün vermeksizin küçültüldüğünde, sayfa yükleme sürelerinin ve genel kullanıcı deneyiminin iyileşmesi avantajı elde edilir. Arama motoru sıralamaları üzerinde olumlu etki sağlayan bu durum, aynı zamanda müşteri katılımını, dönüşümleri ve müşterinin elde tutulmasını da iyileştirir.

Ayrıca yazıda kullanılan görseller, web sitesinin SEO puanını yükseltmeye yardımcı olur. Resimler için doğru adın ve alt etiketinin kullanılması, içeriklerin daha SEO dostu hale gelmesini sağlar. Aynı zamanda optimize edilmiş görüntüler sunucuda daha az depolama alanı kaplayacağı için site yedeklemelerinin de daha hızlı tamamlanması mümkün olur.

Görsel SEO Nasıl Yapılır?

Web sitesinde kullanılan görselleri optimize etmek ve arama motorlarının bu görselleri anlamasını sağlamak için uygulanan görsel SEO, bir dizi stratejik adımdan oluşur. Görsel SEO, web sitesinin genel SEO performansını olumlu yönde etkileyebilir ve kullanıcı deneyiminin iyileşmesini sağlayabilir. Doğru anahtar kelimeler ve optimize edilen görseller kullanılarak arama motoru botları tarafından daha iyi derecelendirme ve daha çok organik trafik elde etme avantajı sağlanabilir.

Görsel Yerleşimini Doğru Yapın

Görselleri mutlaka ilgili yazıların yakınına ekleyin. Bunun için sayfanın yazı içeriğinde görselin olması gereken en doğru yerleşim yerini bulmalısınız. Çünkü, bir okuyucu sayfanızı okurken web erişilebilirliği kapsamında görsellerin yazı akışını bozmaması çok önemlidir. Bunun için yapılması gereken görselleri yazı akışına uygun olarak konumlandırmaktır.

Görselleri Doğru İsimlendirin

Kullanıcılar Google’da görsel arama yaptıkları zaman, yaptıkları aramayla ilgili en anlamlı görsellere en hızlı şekilde erişmek isterler. Görsellerinizi doğru bir şekilde adlandırmanız bu aşamada önem kazanır ve hedef kitlenizin yaptığı aramaların sonuçlarında listelenmenizi sağlar. 

Arama motoru botları görselleri anlamlandıramadığı için sizin web sitenizde paylaştığınız görselleri isimlendirirken, Google’ın görseli en iyi şekilde anlamlandırma imkanı verecek şekilde isimlendirmeniz gerekir. Bu doğrultuda, görsel dosyalarını en doğru şekilde isimlendirmeli ve kullandığınız görsel isimlerinin net ve tanımlayıcı olmasına özen göstermelisiniz.

Doğru: “gorsel-seo.jpg”

Yanlış: “WhatsApp-Image-2024-03-22.jpeg”

Açıklayıcı Alt Metinler Ekleyin

Görsel SEO çalışmaları sırasında unutulmaması gereken en önemli konulardan biri, izleyiciler bir görsele baktığında bunun ne olduğunu anlayabilse de bu durumun arama motoru botları için geçerli olmadığıdır. Arama motoru botları, görselin içeriğini doğru bir şekilde dizine eklemek için alternatif metinlere ihtiyaç duyarlar. 

Herhangi bir görseli tanımlamak için alt metinlerden faydalanılır. Ekran okuyucuları alt metinleri kullanarak görsellerden söz ettiği gibi tarayıcılar görsel getirmekte zorlandığında kullanıcılara alt metin gösterilmektedir. Alt metin eklenirken yapılması gereken, görseli tanımlayacak olan cümleyi oluşturmaktır. Cümlede yer alan isim kelimelerinin bir araya getirilmesi, görsel için en doğru alt metni bulmayı sağlayacaktır. Ürün görseli eklendiği durumlarda alt metinde ürünün model numarasına yer verilmelidir. 

İyi bir alt etiketi, içeriğe bağlam sağladığı gibi görme engelli kullanıcılara da yardımcı olur. Arama motorları alt metinleri okuyabildiği için görüntünün yüklenmesini engelleyen olası bir aksaklık halinde sayfa sıralamasını yine de bildirebilirler. Bunun için alt etiketler dosya adından daha ayrıntılı bir şekilde yazılmalıdır. Görünürlüğün artırılması için markayla alakalı terimlerin alt etiketlerde kullanılması söz konusu olabilir. Ancak, aramalarda öne çıkmak için kullanıcılar tarafından görülemese de arama motoru botlarının fark ettiği keyword stuffing’den kaçınmayı unutmayın.

Örnek

Dosya Türünü Dikkatli Seçin

Web ortamında yer alan görsellerin seçimine ilişkin her aşamada dikkatli olmalısınız. Görseller söz konusu olduğunda genellikle JPEG, PNG ve GIF olmak üzere üç farklı görsel türü seçilir. Bu dosya türlerinden her birinin sıkıştırma yöntemi farklı olduğu gibi her bir dosya türünün boyutu da kendine özgüdür.

Görseller söz konusu olduğunda onları en iyi şekilde sıkıştırmalı, ancak görselin kalitesinden de ödün vermemelisiniz. Çünkü görseller web sayfalarının yüklenme süresini önemli ölçüde etkileyebilirler. Sayfa yüklenme süresi de SEO açısından en kritik faktörlerden biridir. Google web sayfalarının yüklenme süresini masaüstü ve mobil olarak iki farklı kategori altında değerlendirir. Bu süreçte sizin üzerinize düşen ise her görsel için en uygun dosya türünü bulmaktır.

Genel bir sınıflandırma yapmak gerekirse, JPEG’in fotoğraflar için PNG’nin ise çizimler için ideal görsel dosya türü olduğu ifade edilebilir. Aralarında teknik açıdan birçok fark vardır. Kaliteli bir görsel işleme yazılımı kullanmanız halinde görselleri isteğinize bağlı olarak JPEG, PNG ya da GIF olarak kaydedebilirsiniz. Ekran görüntüleri söz konusu olduğu durumlarda ise Lightshot ya da Monosnap gibi programlardan destek almayı tercih edebilirsiniz.

Görselleri Yeniden Boyutlandırın

Bazı web sitelerini ziyaret ettiğinizde kenarlarında çok fazla boşluk olması dikkatinizi çekmiş olabilir. Bunun temel nedeni, içerik alanı için belirli bir genişlik belirlenmesidir. İçerik alanı için yapılan boyutlandırma genellikle 720px şeklinde olmaktadır.

Diğer yandan görselin kullanılacağı aşan ne kadar büyükse, görselin boyutunun da o kadar büyük olması gerekir. Ancak tarayıcı görselin alanından bağımsız olarak görselin tam boyutlu halini yükler. Bu nedenle, 720px alanda görsel göstermiş olsanız dahi görsel boyutunun 1920px olması durumunda tarayıcı 1920px görseli yükleyecektir. 

Bu tür bir sorunu gidermek için yapmanız gereken görseli yeniden boyutlandırmak ve yeniden yüklemektir. Görselin boyutu, maksimum genişlik için gereken boyutta olmalıdır. Bu aşamada önemli olan nokta, 720px genişliğin her zaman için söz konusu olmadığı ve web sitenizin tasarımında belirtilen boyutu göz önünde bulundurmanız gerektiğidir. 

Bu süreçte, maksimum genişlik sunarak resimleri işleme özelliği bulunan Smart Resize aracını kullanabilirsiniz. JPEG ve PNG resimleri ayrı ayrı işlemeniz gerekmekle birlikte tüm görselleri tercih ettiğiniz en uygun dosya türüne dönüştüren bir araç olarak sıklıkla kullanılır.

• Max-width boyutlandırması: Web sitenizin maksimum genişliğinin 720px olduğunu ve elinizde boyutlandırılması gereken yüzlerce resim olduğunu varsayalım. 700px genişliğinde olan görselleri 720px yapmaya çalışırsanız resimlerinizin kalitesi bozulur. Bu araç genişlik değerinden daha az genişliğe sahip olan görselleri işlemeden sonuca ulaşmanızı sağlar.
• Görsellerin isimlerinin tutması: Elinizde bulunan görselleri SEO için yeniden adlandırdıysanız, yeniden boyutlandırma işlemi zorlayıcı olabilir. Çünkü pek çok araç, toplu yeniden boyutlandırma işlemi sonrasında görselleri image1, image2 şeklinde isimlendirir.  

Görsel Boyutunu Düşürün

JPEG dosya türündeki görseller arasındaki kalite farklılığı kolay anlaşılmaz. Bu yüzden pek çok kişi web sitesinde görselin normal hali yerine sıkıştırılmış halini kullanmayı tercih eder. Bu amaçla kullanılabilecek farklı araçlar vardır. 

Ancak her araçta görselin sıkıştırma miktarını kendinizin seçmesi söz konusu olmaz. Bu yüzden tercihinizi kayıplı ve kayıpsız olarak iki farklı sıkıştırma yöntemi sunan araçlardan yana kullanmanız daha doğru olabilir. Pek çok görsel sıkıştırma aracı, görselde bulunan EXIF bilgilerini siler ve sıkıştırma işlemini gerçekleştirir. EXIF bilgilerinin sizin için önemli olması halinde bu araçları kullanmamaya özen gösterin.

Diğer yandan JPEG için benzersiz bir sıkıştırma sağlayan bir aracın, PNG için aynı düzeyde sıkıştırma sunamayacağını unutmayın. Her biri için farklı araçlar kullanmak daha iyi bir seçim olabilir. Görsel sıkıştırmak için kullanabileceğiniz çeşitli araçları sizler için aşağıda bir araya getirdik:

• Imageoptim – JPEG
• io – PNG
• Shortpixel – PNG
• Optimizilla – PNG
• TinyPNG – PNG
• io – JPEG

Görsel Site Haritası Oluşturun

WordPress ve beraberinde All in One SEO Pack ya da Yoast SEO kullanıyorsanız site haritanız otomatik bir şekilde oluşturulur. Ayrıca medya sayfalarını noindex olarak ayarlamış olsanız bile, bu durumda görsel için site haritası oluşturmuş olursunuz. All in One SEO Pack ya da Yoast SEO kullanmadığınız takdirde, farklı yöntemler kullanmalı ve web siteniz için görsel bir SEO haritası oluşturmalısınız.

Görsel Site haritası hakkında buradan tüm detaylara ulaşabilirsiniz.

Vektör Grafikleri Kullanın

Pek çok web sitesi logosunda ya da web sitesindeki farklı noktalarda vektör grafiklere yer verir. SVG dosya türü, vektör türü görselleri için en popüler dosya türlerinden biri olma özelliğine sahiptir. XML üzerine olan dosya türü W3C tarafından geliştirilmiştir ve tüm modern tarayıcılar tarafından desteklenmektedir.

Web sitenizde vektör grafikleri kullanmak istiyorsanız uygun yöntemler kullanmalı ve onların boyutlarını düşürmelisiniz.vektör grafikler temelde her web sitesi için kullanışlı olabilse de web sitenize uygun olmamaları halinde daha önce seçtiğiniz dosya türüyle devam etmek doğru bir karar olabilir.

Görsel URL Yapıları Doğru Yapılandırılmalı

Google, web sitelerinde paylaşılan görselleri daha iyi anlayabilmek için görsel dosya adından ve URL’den faydalanır. Bu nedenle görselinizi web sitenize yüklemeden önce dosya adını içerik bağlamına uygun olacak şekilde ve boşluk değil (-) işareti kullanarak oluşturmalısınız. WordPress gibi CMS’lerde URL yapıları dosya adı olarak oluşturulmakta olduğunu unutmayın.

<img srcset> Özelliğini Kullanın

Her ekran boyutunda doğru bir şekilde çalışacak görseller oluşturmak için <img srcset> özelliğini kullanabilirsiniz. Ancak bu özellik tüm tarayıcılarda çalışmayabileceği için <img srcset> ile görsel URL adresini belirtmelisiniz.

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Duyarlı Görseller için <picture> Özelliğini Kullanın

<picture> özelliği aynı görselin farklı ekranlarda en iyi şekilde gösterilebilmesini sağlar. Diğer bir deyişle bir görselin WebP, SVG, PNG, JPEG sürümlerini belirtir ve kullanıcının ilgili görseli en iyi şekilde görebileceği kaynaktan alınmasını sağlar. Bununla birlikte <img srcset> ile görsel URL adresini belirtmelisiniz.

<picture>
  <source media="(max-width: 600px)" srcset="seo-square.jpg">
  <source media="(max-width: 1023px)" srcset="seo-rectangle.jpg">
  <source media="(min-width: 1024px)" srcset="seo-large.jpg">
  <img src="seo-large.jpg">
</picture>

Görselleri Site Boyutuna Göre Optimize Edin

Web site boyutunuzun 720px genişliğinde olması durumunda, görsellerinizi de bu genişliğe göre optimize etmelisiniz. Aksi takdirde daha büyük genişlikteki görseller sayfa açılış hızının yavaşlamasına neden olacaktır. Bu görsellerin yalnızca genişliğini sitenizin boyutlarıyla aynı hale getirmek için çeşitli araçlardan faydalanabilirsiniz. 

Optimizasyon süreci için imagecompressor – tinypng ve MozJPEG araçlarını kullanabilirsiniz.

Esnek Görseller Kullanın

Web sitenizde içerik gösterme alanı 720px genişliğinde olsa dahi sitenizin daha düşük ekran genişliğine sahip cihazlardan 720px şeklinde gözükmemesi gerekir. Bunun için esnek tasarım kullanmalı ve görselleri benzer şekilde sunmalısınız.

Mobil cihazlardan sitenizi ziyaret eden kullanıcılara görselleri 720px boyutunda gösteremezsiniz. Çünkü bu görsel kendisine ait olan normal alandan daha fazlasını kaplar ve kullanıcıyı rahatsız eder. Bu yüzden görsellerin esnek bir şekilde sunulması çok önemlidir. Örnek vermek gerekirse, WordPress kullanıyorsanız yazının içine eklediğiniz her görsel otomatik olarak srcset niteliğini alır. Bu nitelik sayesinde kullanıcıya gösterilmesi gereken görsel boyutu otomatik olarak belirlenir.

Görsellerinizin genişliğini site sayfalarınızın boyutlarıyla aynı hale getirmek için smartresize aracını kullanabilirsiniz

Schema Biçimlendirmesi Kullanın

Google aramalarda karşınıza sıklıkla çıkan Schema biçimlendirmesi çok önemlidir. Yaptığınız herhangi bir aramadan sonra görseller, puanlar ve fiyatların yer aldığı sonuçlar karşınıza çıkıyorsa, bunların Schema biçimlendirmesi kullanılarak hazırlanmış sayfalar olduğunu anlayabilirsiniz.

Schema biçimlendirmesi aynı zamanda görseller için işe yarayan bir teknik olarak öne çıkar. Çünkü Google, mobildeki kullanıcılara resimleri göstermekte ve bu alan için daha fazla yer ayırmaktadır.

Google mevcut durumda dört farklı biçimlendirmeyi destekler: ürünler, tarifler, videolar ve GIF türü görseller. Web sitenizde bulunan görsellerin arama sonuçlarında görünmesini sağlamak için uygun biçimlendirmeleri kullanmanız önemlidir. Google görsellerin GIF olduğunu otomatik bir şekilde algılayabildiğinden, GIF türü görseller için ekstra bir işlem yapmanız gerekmez.

Tembel Yüklenmeyi Düşünün

Tembel yüklenme, tarayıcıların görsel gözükmeden görseli yüklememesi anlamına gelen bir yöntemdir. Bir görsel yüklenmesi gerektiği zaman yüklendiği için sayfanın açılış hızı çok daha iyi olabilir. WordPress kullanıyorsanız farklı tembel yüklenme eklentilerinden faydalanabilirsiniz. Bunların başında cache eklentileri ve A3 Lazy Road gibi eklentiler gelmektedir.

Örnek HTML Kod

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Lazy load yapmak için içeriğimize göz atabilirsiniz.

Tarayıcı Önbellekleme Tekniğini Kullanın

Tarayıcı önbellekleme yöntemi, görsellerin ve diğer dosyaların ziyaretçinin tarayıcısında saklanmasını sağlar. Sonuç itibarıyla ziyaretçiler web sitesini yeniden ziyaret ettiklerinde sayfaların daha hızlı yüklenmesi avantajını elde ederler. Tarayıcı önbellekleme özellikle görselleri kullanıcının bilgisayarında belirli bir süre boyunca saklar. Bu sayede kullanıcı sayfayı yeniden ziyaret ettiğinde görsellerin yeniden yüklenmesi gerekmez. Diğer bir deyişle ziyaret edilen web sayfası çok daha hızlı bir şekilde açılır.

WordPress kullanıyorsanız W3 Total Cache eklentisini kullanabilir ve tarayıcı önbellekleme tekniğini aktive edebilirsiniz. Bu aşamada, her dosya türü için dosyaların farklı tarihlerde yenilenmesi gerektiği bilgisini ekleyebileceğinizi unutmayın.

CDN Kullanın

Pek çok site dosyalarını sabit bir noktada konumlanmış sunucular üzerinden gönderir. Türkiye’de olan web siteniz Türkiye’deki ziyaretçiler tarafından kolayca görüntülenip yüklenir. Ancak farklı ülkelerden ziyaretçiler web sitenize geldiğinde görsellerin indirilmesi için belirli bir sürenin geçmesi gerekir. 

Bu sorunu ortadan kaldırmak için CDN kullanabilirsiniz. Böylece web sitenize ait tüm görseller global ağlarda saklanır ve sitenizi ziyaret eden kişilere sunulur. Bu sayede bir kullanıcı web sitenizi ziyaret ettiğinde görseller daha hızlı bir şekilde indirilir. 

CDN kullanmak istiyorsanız Cloudflare, KeyCDN, Amazon CloudFront ve Google Cloud CDN başta olmak üzere çeşitli seçenekleri değerlendirebilirsiniz. WordPress kullanıyorsanız CDN kurulumunu kolayca gerçekleştirebilirsiniz. W3 Total Cache, CDN Enable ya da WP Rocket eklentilerinden birini kullanabilir ve CDN kurulumunu kolayca yapabilirsiniz.

Diğer Kaynaklar

https://ahrefs.com/blog/image-seo/

https://developers.google.com/search/docs/appearance/google-images?hl=tr

https://www.semrush.com/blog/image-seo/

Diğer rehber yazılarımıza göz atın:

• Kullanıcı Deneyimi (UX) Nedir
• Landing Page Nedir
• SEO Hosting Nedir
• WordPress Site Hızlandırma
• CDN Nedir, Ne İşe Yarar
• Core Web Vitals Nedir
• Lazy Load Nedir