WordPress Görsel SEO-Profesyonel Optimizasyon

Son Güncelleme Eylül 28th, 2018 - Saat: 02:15 am

Gelelim WordPress için Görsel SEO & Optimizasyona. Görsellerde optimizasyon ve SEO beraberdir. Görsel boyutu düşürme,görsele alt etiket verme vs vs. Teknik kısımları olacak fakat sizi yoracak ve üşendirecek bir yanı olmayacak bu yazının.

#Görsel SEO  Nedir bu? Neleri Kapsar?

Görsel SEO görsellerinizin açıklamalarının,boyutunun ve hacim boyutunun iyileştirme çalışmalarına denir. İnternetin sitemizin en önemli parçalarından biridir görseller. Zaten bloglar mutlaka görsel kullanır,her yazıda görsel olur illa ki. Bu yazı sonunda artık  hız testlerinde görsellerinizi sıkıştırın,boyutları yanlış gibi hatalar almayacaksınız.

Nereden başlayalım? Öncelikle görsellerinizin boyutundan başlayalım işe.


görsel seo nedir?

Gereksiz görsel boyutlarından kaçının,sitenizin yazı alanını tanıyın

Yazınıza 1920×1080 boyutlarında bir görsel yüklediğinizde bunu tam anlamıyla kırpmadan gösterebilmek için sitenizin yazı alanı genişliğinin 1920px olması lazım. Örneğin benim blogumun yazı alanı genişliği 548px ve ben görselleri mutlaka 548x genişliğinde yüklerim ya da yüklediğimde bu formatta olmasını sağlayacak eklentim vardır.

Örneğin bloguma gelen ziyaretçim 548px genişliğinde görsel görecek olmasına rağmen ben 1920px genişliğinde yüklersem ziyaretçim gereksiz boyutta,yüksek  hacimli bir görsel indirecektir. 1920px nerede,548px nerede?

Akılda kalmasın► Neden görselin yükseklik değerinden bahsetmedik? Çünkü görselin yükseklik değerinin önemi yoktur,blog alanı aşağı doğru sonsuza kadar gider sonuçta.

Kendi blogunuzun maksimum görsel genişlik alanını nasıl bulacaksınız?

Blogunuzun yazı alanına bakın. Ortalama kaç pixel olabilir? Biz alanımızın genişliğini anlamak için öncelikle büyük genişliğe sahip görsel yükleyelim. Örneğin 2000px genişliğine sahip bir görseli google üzerinde bulalım ve yazımıza ekleyip önizle diyelim.

Yazı önizleme alanında göreceksiniz ki görsel sorunsuz,normal,gayet yerinde bir şekilde gözüküyor. Fakat görsele sağ tıklayıp farklı sekmede açtığınızda kocaman olduğunu göreceksiniz. İşte ziyaretçi bu görselin belki yarısı kadar genişlikle tatmin olacakken biz ona 2 katı büyüklüğünü gereksizce indirtiyoruz.

Şimdi, önizleme dedik. Bu görsele sağ tıklayıp “incele” diyoruz.

görsel inceleme chrome

İncele dedikten sonra sağ tarafta bir alan açılacak. Bu alanın en sağında kare bir şekil olacak ve bu şeklin içinde görselin boyutu yazacak. Bu boyut blogunuzun yazı alanı genişliğinin sığdırabildiği maksimum genişliktir. Ziyaretçilerin ekran çözünürlüğüne göre en fazla 100 200 oynar fakat bu önemli değildir. Şimdi siz o alanda gördüğünüz genişliği bir kenara not edin.

Benim blogumun yazı alanı genişliği maksimum 548px.

Mevcut alandaki sol kısmı ciddiye alın,358 olan önemsizdir çünkü o yükseklik değeridir. Boyutumuzu öğrendik, artık içeriğimize görsel hazırlarken  bu alandaki genişlik değerine göre yapıyoruz.

#Ben Görselimin Boyutunu Düşürmeyle Uğraşamam 

Not: Eklenti kullanmanız önermiyorum. Çünkü sıkıştırma işlemi yaparken tek hamlede zaten boyutlandırma yapabiliyorsunuz. Aşağıda anlatım mevcuttur.

Görselinizin boyutunu düşürme işlemini pratik şekilde yapmak istiyor olabilirsiniz. Bunun için imsanity eklentisi mevcut,oldukça pratik.

►İmsanity hakkında 

imsanity eklentisini kurduktan sonra Ayarlar→imsanity yolunu izleyerek paneline gidebilirsiniz.

Aşağıda imsinity panelinin bir kısmı.Zaten diğer kısımlarına dokunmayacağız(eklenti tek sayfadır,karışık değildir)

imsanity ayarları

Bu kısımda bulunan genişlik kısmına az önce sağ tıklayıp incele dediğinizde karşınıza gelen değeri gireceksiniz. Yükseklik ise 0 olacak,yani devredışı. Böylelikle sitenize yüklediğiniz görseller otomatikman bizim burada verdiğimiz genişlik değeriyle yüklenecek.

Önemli► Sadece JPG formatındakileri görüyor eklenti. Eğer farklı bir format yüklerseniz kırpmadan olduğu gibi kabul ediyor. Bundan dolayı eklenti ayar kısmında bulunan(boyut verdiğimiz kısmın altında)

pngtojpg

Convert PNG kısımlarını yes olarak işaretleyip kaydediyoruz.    ( Photoshop ile optimize edip boyut verdiğiniz bir görseli yüklediğiniz vakit bu ayar yüzünden görsel boyutu artacaktır. Eğer photoshop programında zaten boyut verip,optimizasyon yapacaksanız bu eklentiyi kullanmayın,fakat kullanacağım diyorsanız da photoshop ile optimize edip,boyutlandırdığınız görseli yüklerken bu 2 seçenği hayır olarak değiştirin. Ben bunu yeni farkettiğim için bazı görsellerimin boyutunun  sıkışmamış gibi yüklendiğini farkettim)

Not~ JPG görseller saydam olmaz! Eğer bir görselinizin mutlaka saydam olarak yüklenmesi gerekiyorsa bunun boyutunu bilgisayardayken kendiniz düşürüp PNG olarak kaydedin ve öyle yükleyin.

Tamam,artık genişlik sorunumuz yok. Peki bu yeter mi? Hayır.


Görsellerinizi sıkıştırın,okunabilir düzeye indirip bırakın

Görsellerinizi Photoshop ile sıkıştırmayı tavsiye ediyorum. Daha mini programlar vardır fakat Photoshop ile kıyaslanamazlar. Çünkü Photoshop yönetilebilirlik sunuyor. Yani görselin özelliklerini kısarken çok seçenek sunuyor ve her an boyutu görebiliyor,her formatta kaydedebiliyorsunuz.

2 önemli ayrım var burada. dar kapsamlı görseller ve geniş kapsamlı görseller.

Dar kapsamlı görseller daha fazla optimize edilebilir fakat geniş kapsamlılar daha kısıtlı optimize edilebilir. Bunun sebebi dar kapsamlı görselin kaybedecek pek şeyinin olmayışıdır.

Photoshop► Optimizasyon 

Photoshop programı lazım tabii. Adobe Photoshop’tan bahsediyoruz.

Örneğin aşağıdaki dar kapsamlı görseli sıkıştırmaya çalışalım (neden dar kapsamlı? çünkü bakın çevresi bile yok görselin,yoğunlaşılan alan çok net,küçük)  Boyut:8KB,bakalım optimizasyon sonrası kaça iniyor.

etiket ekleme wordpress

Görselimizi Photoshop programımızı açtıktan sonra programın üzerine sürüklüyoruz.

Görselimizi Photoshop programına sürükledikten sonra ekranımızda öylece duracak. Ardından sağ üstte bulunan menülerden “File→Export→Save for Web” yolunu izleyerek sıkıştırma panelimize geliyoruz. Esasında burası bir sıkıştırma paneli değil dışa aktarım panelidir fakat isteyen sıkıştırma paneli olarak kullanabiliyor,örneğin biz.

Karşımıza aşağıdaki sayfa gelecek-Bu panel de üst kısımda bulunan “2-up” kısmına tıklayın. Tıklayın ki orjinal görsel ile optimizasyon yaptığınız görsel arasındaki görüntü ve görüntü boyuntu farkını görebilin. Aşağıdaki görselde bulunan ayarlamalar optimize edilmiştir,anlamak için bir sonraki görsele geçerek aşağıdan devam ediniz.

optimization panel photoshop

Yukarıda paneli genel olarak gördük,sağ tarafa yaklaşalım şimdi. Bu ayarlar optimize ayarlarıdır,en iyi şekilde optimize etmek isterseniz bu şekilde olmalıdır. Fakat görseliniz dar kapsamlı değilse bu kadar fazla optimize edemeyebilirsiniz.

(Optimizayon ayarından önce optimizasyon kısmının altında bulunan yeniden boyutlandırma kısmına sitenize uygun genişlik değerini verin. 2 görsel aşağıda bu alan belirtilmiştir,bakıp uygulayınız ve tekrar buraya dönünüz. Sadece “W”  ile belirtilen alanı değiştirin ve o alana sitenizin genişlik alanını girin)

PNG-8 Optimizasyon tipi ► Dikkat ettiyseniz PNG-8’i seçtim,renk kısmını 16 seçtim,dither ve web snap kısmını 0 yaptım. Bunları yaptığınız zaman görseliniz okunabilir boyuttaysa(görselin anlam ifade etmesi) sorun yok. Örneğin renkler ciddi bir değişime uğradıysa ve orjinalinden çok bağımsız olduysa rengi 32 yapın mutlaka düzelir. Burada önemli olan orjinal görselden renk olarak,okunabilirlik olarak kopmamaya dikkat etmek.

Optimizasyona uğramış görsel (3.5KB)

Bu optimizasyon kısmının altında ise boyut verme bölümü de bulunur. Önemlidir,boşuna mı birinci maddede yazı alanının genişliğine göre görsel ayarlamamız lazım deyip durduk?

photoshop yeniden boyutlandirma

Yukarıdaki görsel yeniden boyutlandırma bölümü evet. Fakat! Kırmızı dairenin içinde bulunan kilit simgesine tıklamadan boyutlandırmak isterseniz otomatik dengelenir. Eğer iki değeri de ben vereceğim derseniz o kilide tıklarsınız. (Kilide tıklamanızı önermiyorum,biz zaten sadece genişlik kısmını önemsiyoruz(W) ,hani blogumuzun yazı alanı genişliği falan vardı hatırlarsınız yaaaa,zaten programın kendisinden daha iyi bir yükselik(H) değeri giremezsiniz. 🙂

Bilgi► Yükseklik boyutunu  değiştirdiğiniz vakit herhangi yukarıdaki kutucuklardan herhangi birini tıklayın,bu sayede verdiğiniz yükseklik değerine göre tekrar boyut alır görsel. Aksi halde ekranda önceki boyutuyla durmaya devam eder. Ardından o kutucuğa tekrar tıklayıp eski haline getirin. O kutucuğa tıklama sebebiniz çözünürlüğü güncellemek

Görselin optimizasyonunu bitirediyseniz,genişliğinizi sitenize uygun girdiyseniz ve “son hali acaba nasıl?” diye soruyorsanız panelin sol altında bulunan “preview” butonuna tıklayın.

preview optimization

Ancakkkkkkk ! ► Geniş kapsamlı görsellerde PNG-8 ayarını kolay kolay seçemeyiz,seçeriz fakat ciddi bozulma olabilir. Eğer olmazsa sorun yok fakat olursa sorun tabii. Fakat şu var, PNG-8’i seçemediğimiz durumlarda PNG-24’ü hiç seçemeyiz  çünkü PNG-24 optimizasyon seçeneği vermez. PNG-8’i seçemediğimiz durumlarda JPEG seçeneğini işaretliyoruz. Bu da demek oluyor ki geniş kapsamlı görsellerde JPEG seçeneğini kullanmamız gerekebilir.

Not► Her görsele önce PNG-8 deneyin,PNG-8 olarak kalitesini kaybetmeyecek görseller de mevcuttur. Ancak bozulan görsel sayısı çok olacaktır. Örneğin geniş kapsamlı bir görsele uygulanan PNG-8 optimizasyonu

Yukarıdaki görselde kırmızı daire içine alınan kısımda normalde tablolar var fakat PNG-8 ayarı bu hale getirdi görseli. Okunabilirlik ise berbat,bunu size sunsam bana ne derdiniz? Olmaz yani.


JPEG Optimizasyon tipi► Yukarıda dedik,her görsele PNG-8 optimizasyonu uygulayamazsınız,okunabilirlik  çok düşer ve renk kaybından dolayı görsel anlamını  kaybeder. Şimdi Aynı şeyleri düşünün,optimizasyon panelindeyiz ve PNG-8 yerine JPEG seçmişiz düşünün,düşünmeyin hatta direkt seçin şu an.  Farklı seçenekler geldi değil mi? Quality gibi.

Örnek JPEG optimizasyonu

jpeg optimization

JPEG seçeneğinde tek optimizasyon ayarı vardır zaten. Bu ayar kısmı ise Quality adındadır. Daha kolay ve anlaşılırdır. Quality çubuğunu kademeli olarak düşürün ve görselin kalitesine bakın. Okunabilirliğin bozulmadığı ve boyutun epey düştüğü zaman   kaydedersiniz.

Görselinizin boyutunu ayarlamadan optimizasyon yapmayın ilk iş sitenizin genişlik değerini “W” ile belirtlen alana girmeniz. W=Width yani Genişlik demektir.

Örnek bir JPEG optimizasyon sonucu

Optimizasyon öncesi bu görsel 60KB idi fakat şimdi 15KB. Evet JPEG optimizasyonu da anlaşılmıştır sanırım.


 WP Smush eklentisi ile görsellerinizi tekrardan optimize edin

WP Smush eklentisi ücretli ve ücretsiz 2 sürüme sahiptir. Ücretsiz sürümü +1milyon üzeri kuruluma sahiptir. En çok kullanılan WordPress eklentilerinden biridir.

Ekletiyi kurduktan sonra “ortam→Smush” yolunu izleyerek genel bi optimizasyon yapınız.  Önce taratın ve ardından  sıkıştır butonuna basınız.

wp-smush-toplu-sikistir

Bunun dışında görsellerinizi yüklediğinizde otomatik olarak sıkıştırma yapar.


Görsel isimlendirmesi

Görsellerinize Doğru İsimleri Vererek Ne Olduklarını Belli Edin

Bir görselin  görsel arama sonuçlarında daha üst sıralarda çıkması için  açıklama ve başlığı girilmelidir. Bir görsel yüklediğiniz vakit daha yüklemeden önce adını belirleyip onda sonra yükleyin.

Bir görsel yüklediğiniz zaman aşağıdaki gibi ekran gelir karşınıza

Bu ekrandaki açıklama alanlarını eksiksiz ve özenle doldurmaya gayret ediniz.


Boyutu tercihinze kalmış görselleri akıllıca boyutlandırın

Boyutu tercihinize kalmş bazı kücük boyutlu görselleri oluştururken akıllıca davranın. Örneğin 300×249 boyutunda bir görsel ile 300×250 boyutunda görsel arasında uçurum farkı vardır.

Dünya çapında, özelleştirilmiş Google görsel aramalarda Adsense reklam formatındaki boyutlar çok daha fazla aranır. Dolayısıyla görsellerinizi eğer sitenizi taşırmıyorsa mutlaka Adsense reklam formatlarına uygun boyutta biçimlendirin. Bu her zaman mümkün olmayabilir tabii.

Aşağıdaki görsele bakınız. Özelleştirilmiş aramadan boyutları 300×250 yazdığım vakit karşıma hep anlamlı görseller geliyor çünkü 300×250 Adsense sayesinde popüler bir boyut olmuştur. Tabii diğer adsense formatlarıda.

300x250-example

Yazının sonunan geldik.

Yazar hakkında: kadir

Yeni bloggerlara destek olmak bu blogu açtık. Amaç içerik kalitesi yüksek blogların ortaya çıkmasını sağlamak ve kazanç elde etmek için ortaya koyulması gereken kalite ve mantığı anlatabilmek
Blog Aç

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir