Web Sitesi Hızını ve Web Sitesi Tanıtımını Artırmak İçin Görsel Optimizasyonu - Semalt Uzmanı

Görseller, elbette metinden sonra web'in en önemli bileşenlerinden biridir. Görüntüleri olmayan bir web sitesi, genellikle sıkıcı ve sörfçüler için görüntüleri olan bir siteye göre daha az motive edici olacaktır.

Ayrıca, görüntülerin kullanımının zorunlu olduğu ve hatta siteyi haklı çıkarmak için gerekli olduğu epeyce alan vardır.

Örneğin:

Online ticaret siteleri
Portföy siteleri ve eserlerin sergilenmesi
Fotoğrafların "ürün" olduğu resim siteleri - örneğin gelinlik, etkinlik fotoğrafçılığı vb.
Sosyal Ağlar - Giderek daha fazla çalışma, fotoğraflı gönderilerin, fotoğrafsız gönderilere ve durumlara kıyasla önemli bir yüzde oranında daha fazla yorum ve paylaşım aldığını gösteriyor.

Google görsel tanıtımı: görselleri doğru kullanma

Fotoğraf sitelerinden/görsel depolarından fotoğraf yatırıp satın aldınız mı, yoksa kendi başınıza büyüttünüz ve fotoğraf çektiniz mi? Bunları SEO amaçları için de maksimize etmelisiniz!

Google Görsel Promosyonu, web sitesi trafiğini artırmanın en iyi yolları belirli alanlarda - özellikle görsel tarafa odaklananlar.

Yukarıdakilere rağmen, resimlerin uygunsuz kullanımı siteye yarardan çok zarar verebilir ve hatta tanıtım çabalarını önemli ölçüde bozabilir. Resimlerin kullanımından bahsederken organik promosyon bağlamıBirkaç kuralı da akılda tutmak önemlidir, resimlerin uygunsuz kullanımı sitenin hızını önemli ölçüde azaltabilir ve bu nedenle tanıtım üzerinde önemli bir etkiye sahip olabilir.

Temel görsel optimizasyon kuralları:

1. Görüntünün ağırlığı ve boyutları

Görüntüleri çevrimiçi olarak tanıtmanın önemli parametrelerinden biri, görüntünün ağırlığıdır.

Bir yandan yüksek kaliteli görseller kullanmak istiyoruz ancak diğer yandan site hızı, kullanıcı deneyimi ve tanıtım pahasına olmayacak. Öneri, kaliteyi önemli ölçüde düşürmeden, her zaman görüntüleri mümkün olan en yüksek düzeye "optimize etmektir" (optimizasyon kelimesinden). Bunu yapmak için aşağıdaki tüm kurallara uyun:

Farklı durumlar için uygun bir format kullanma (jpg, png, gif ve daha fazlası) - aşağıdaki farklı format türleriyle ilgili tüm ayrıntılar.
Önemli - Sitedeki her görüntünün boyutlarını ayarlama - Gereksiz kaynakları boşa harcamamak için, görüntünün gerçek (fiziksel) boyutundan mümkün olduğunca küçük bir görüntüyü göstermekten kaçının. Site ne kadar büyük ve mobil olursa, önemi o kadar artar.
Duyarlı Eşleştirmeyi Sağlama - WordPress ve modern bir şablonla çalışıyorsanız, bu köşeyi kapatmış olabilirsiniz. Ancak değilse, sitedeki görsellerin, özellikle de yazıların içindeki görsellerin duyarlı olduğundan ve mobil cihazlarda, tabletlerde vb. İyi görüntülendiğinden her zaman emin olmak önemlidir.
Kaliteyi önemli ölçüde düşürmeden görüntü ağırlığının maksimum sıkıştırması (bunu yapmak için araçlar ve yöntemlerde genişleme - aşağıda).

Fotoğraflar için önerilen ağırlık

Hemen hemen her görüntü bir dereceye kadar sıkıştırılabilir, bu nedenle her zaman yalnızca gerçekten ihtiyaç duyulan ve sitede fiziksel olarak görüntülenen boyutların kullanılması ve görüntülerin ağırlığının mümkün olduğunca azaltılması önerilir. Bu, herhangi bir site için geçerlidir. Ancak özellikle çok sayıda görsel içeren siteler için. Her durumda geçerli olan tek bir kural yoktur, ancak özel öneme sahip bir galeri/kaydırıcı görüntüsü olmadığı sürece, görüntü ağırlığının 70-80K'yı aşmadığından emin olmanız önerilir.

2. Görüntü için uygun bir isim seçin

Bir Google görsel aramasında, sorguyla alakalı görseli görüntülemek için birkaç parametre dikkate alınır. Bunlardan biri dosya adıdır. Bir saniye daha harcamanız ve resme, resimde gördüklerinizi tanımlayan bir ad vermeniz önerilir. Bir dosya adını İngilizce tutmak ve boşluk yerine orta satırlar kullanmak önemlidir. Bunun nedeni, Google'ın orta çizgilerle daha iyi başa çıkmasıdır.

Bir resim için kötü isim örnekleri:

DSC2387.jpg

Site promoter.png

Bir görsel için iyi bir isim örneği:

Search-engine-optimizer.jpg

Merak edenler için - evet, Google diğer diller için de İngilizce resim adlarıyla nasıl başa çıkılacağını biliyor. Arama dizelerini nasıl çevireceğini ve arama sonuçlarında çevrilmiş kelimeleri nasıl vurgulayacağını bildiği için.

3. ALT görüntüye

Alternatifin kısaltması olan alt etiket, görüntüyü tanımlamayı amaçlayan bir parametredir. Alt etiketi, yönetim sistemi/HTML kodu içinde her bir görüntü için ayrı ayrı tanımlanır ve asıl işlevi, bu etiketleri tarayan ve yazılanları okuyan özel yazılım kullanan görme engelli ve engelli kişilere hizmet etmektir.

Teknik olarak kodda şöyle görünür:

<imgsrc="tree.jpg" alt="ağaç">

Etiketin web sitesi erişilebilirliği açısından öneminin ötesinde arama motorları için de önemi vardır. Alt etiketi, arama motorlarının görselin konusunun ne olduğunu anlamasına yardımcı olur (dosya adı, bulunduğu sayfanın bağlamı vb. Gibi diğer şeylerle birlikte) ve ayrıca doğal olarak Google'daki görsel aramayı da etkiler.

Ayrıca, alt etiketi, her şey için sayfa içi optimizasyonun bir parçasıdır. Ayrıca, görüntüden çıkan harici bir bağlantı olduğunda, alt etiketi, görüntü için bir tür metin bağlantısı ("bağlantı metni") işlevi görür.

Bir görüntünün ALT etiketi olup olmadığını nasıl kontrol ederim?

Birkaç yol vardır:

Tüm yol - fareyle resme tıklayın -> sağ tıklayın -> bir öğeyi kontrol edin (ifade farklı tarayıcılarda değişiklik gösterir).
Daha önce gösterildiği gibi <img> komutunun içindeki etiketi aramak istiyoruz.
Web Developer adlı bir eklenti kullanın (diğer birçok görev için harika). Uzantı, bir düğmeyi tıklayarak, resimlerin belirli bir sayfada sahip olduğu tüm alt etiketleri görüntülememizi sağlar.

Çığlık atan kurbağa - Sitede kapsamlı bir görüntü taraması yapmak istediğimizde uygun bir kurbağa kullanın.

İşlem, taranacak bir URL girmek ve ardından Görüntüler sekmesine tıklamaktır.

Orada, sitedeki birkaç parametreye göre sıralanabilen resimlerin listesini göreceğiz:

100 KB'tan daha ağır resimler
ALT etiketi olmayan resimler
100'den fazla karakter içeren ALT etiketlerine sahip resimler (ve muhtemelen onları biraz kısaltmalısınız)

Elbette çeşitli türlerde daha fazla yol ve daha fazla eklenti var, ancak bana öyle geliyor ki konuyu burada nokta ihtiyacı, sayfa başına ihtiyaç ve sitenin kapsamlı bir incelemesi açısından ele aldım.

Google resim tanıtımı - ALT etiketlerini optimize etmeye yönelik ipuçları

Anahtar kelimeleri zorlamamalısınız, ancak resimde gördüklerinizi açıklamaya çalışmalısınız.

Doğal olarak öne çıkmak için resim açıklaması + alakalı anahtar kelimeleri birleştirmek mümkünse ne iyi.
Açıklamayı abartmaya gerek yok, 2-5 kelimelik bir alt etiket fazlasıyla yeterli.
Resmin alt etiketi ile başlık etiketinin aynı olmaması önerilir.
Ticaret siteleri için - ürünün bir model numarası varsa, alt etiketinde kullanmanız önerilir (Google görsel aramalarında görünmesi için).

Duvar kağıtları/dekoratif resimler için alts kullanmaya gerek yoktur - Google'ın gereğinden fazla optimize etmeye çalıştığınızdan şüphelenmemesi için tavsiye edilmez.

4. Bir resmin başlık etiketi

Resim başlıkları veya Başlıklar, fareyi bir görüntünün üzerine getirerek görülebilen bir tür araç ipucudur. Birçok kişi bunları ALT etiketleriyle karıştırır.

Görsel başlıkları, Google'ın görselin ne hakkında konuştuğunu anlamasına ve görsel arama sıralamasını iyileştirmesine yardımcı olabilecek, görselin alaka düzeyinin ve konusunun başka bir göstergesidir. ALT etiketinden farklı olarak, bir başlık etiketi genellikle daha açıklayıcı ve biraz daha uzun olacaktır ve amacı, sörfçüye resimde görülenleri ve/veya resme tıkladıktan sonra ne geleceğini açıklamaktır. Haber siteleri bu etiketi sık sık kullanır.

Kodda şöyle görünüyor:

5. Görüntü türleri ve dosya uzantıları

Görüntüleri çevrimiçi kullanmak için birkaç yaygın biçim vardır. Her birini kısaca açıklayacağım:

JPEG/JPG - Web'deki görseller için en eski ve muhtemelen en yaygın biçim. JPG formatının avantajı, nispeten yüksek kaliteli ve düşük ağırlıklı görüntüleri gösterme yeteneğidir. JPG resimler opaklığı desteklemez.
GIF - GIF formatı da hala disketlerin olduğu günlerden başlayarak epey bir süredir bizimle. Gif'ler yalnızca 256 rengi destekler, bu nedenle daha düşük kaliteli bir görüntü formatıdır ve temel olarak çeşitli türden simgeler veya süslemeler olarak kullanılmak üzere tasarlanmıştır. Ayrıca, GIP formatı animasyonu destekler ve Facebook bile kısa süre önce bu formatı beslemede desteklemeye başladı.

Alt satır - gifler, özellikle görüntü kalitesi söz konusu olduğunda görüntüleri görüntülemek için değil, daha basit simgeler, animasyonlar ve öğeler içindir.

PNG - Bu, gruptaki (nispeten) yeni biçimdir. PNG dosyalarının ana avantajları - JPG ve GIF'e kıyasla daha yüksek kalite ve şeffaflık desteği. PNG dosyaları 2 biçime ayrılır - daha kaliteli (ve buna göre görüntünün ağırlığı) PNG24 ve hepsinden en ekonomik olan PNG8.

Kullanılabilecek birçok başka resim biçimi vardır, ancak web sitelerinde kullanımla daha az ilgilidir.

İpucu - Photoshop kullananlar için, her zaman Web için Kaydet'i kullanarak görüntü ağırlıklarını ve farklı formatlar arasındaki aygıtları karşılaştırmanızı öneririm (dosyayı kaydetmeden önce görüntü ağırlığının bir önizlemesi vardır).

Görüntü formatlarını seçmek için pratik kurallar

Çoğu durumda, JPG formatı işi yapar. JPG resimler, yüksek kalite ve düşük dosya ağırlığı sağlar.
GIF'leri birçok ayrıntı içeren büyük dosyalarda kullanmayın - dosya ağırlığı büyük olacaktır. Format bunun için tasarlanmamıştır ve küçük ve basit unsurlarla kullanım için daha uygundur.
Şeffaflık önemli bir rol oynuyorsa, PNG formatını kullanın. Görüntülerin ağırlığını mümkün olan minimum düzeye düşürmek için PNG24 ve PNG8'i karşılaştırmanız her zaman önerilir.

6. Küçük Resimlerin Doğru Kullanımı

Küçük resimler (önizlemeler), özellikle galeri tabanlı siteler ve ticaret siteleri gibi bazı sitelerin önemli ve hatta kritik bir bileşenidir. Küçük resimler (Google Translate'in "Küçük Resimleri") bir yandan harika olabilir, diğer yandan siteyi ve kullanıcı deneyimini önemli ölçüde sabote eder.

Bu görüntüleri kullanırken en kritik şey, makul bir kalite ve ağırlığı olabildiğince düşük tutmaktır. Kategori sayfalarını ve ürün önizlemelerini görüntülemek için küçük resimlere dayanan büyük ticaret sitelerinde, bu gerçek özellikle önemlidir. Sitenin yüklenmesindeki her saniye gecikmenin Amazon'a yılda 1,6 milyar dolara mal olduğunu biliyor muydunuz? Bu tür sitelerdeki yükleme süresinin çoğu görüntülerdir.

Doğru, çoğumuz ancak bu büyüklükte bir siteye sahip olmayı hayal edebiliriz. Ama biliyorsunuz - büyük değişiklikler aşağıdan yukarıya başlar ve küçük değişiklikler. Ne kadar çabuk hitap edersek o kadar iyi.

Küçük Resimleri doğru kullanmak için ipuçları

Küçük resim için bir küçük resim ve ürün sayfasının kendisi için daha büyük bir resim oluşturmanız önemle tavsiye edilir. Büyük resmi küçük resim olarak kullanmayın! Bu, özellikle bir sayfada çok sayıda küçük resim olduğunda, sitenin yükünün birkaç katını yükleyecektir. Çeşitli CMS sistemlerinde, bu sorundan otomatik olarak muaf olursunuz.

Görsel optimizasyon kuralları söz konusu olduğunda, küçük resimlerden ziyade büyük görsellere daha fazla yatırım yapmanız önerilir. Örneğin - küçük resimleri Görsel Site Haritasına (aşağıdaki uzantı) dahil etmeyin, bazı durumlarda onlar için ALT etiketleri bile ayarlamayın. Buradaki amaç, Google'ın büyük resimleri küçük resimler pahasına dizine almasıdır, tersi değil.

Görüntü Başlığının, ürünü birkaç kelimeyle ve genel olarak sörfçünün görsele tıkladıktan sonra ne göreceğini açıklayan Küçük Resimler olarak ayarlanması önerilir.

Her ürün kategorisi sayfasında çok sayıda ürün varsa (30'dan fazla ürün varsa), görüntüleri yalnızca sörfçü bulundukları alana kaydırdığında yükleyen bir Lazy Load komut dosyası kullanılması önerilir.

7. Metin kaydırma kullanımı

Genellikle, görüntüler metne hizmet eder, tersi değil. Ancak görsel optimizasyonu ve Google görsel tanıtımı söz konusu olduğunda ve site görsellere dayalı bir ağ ise, temel şeyler olsa bile metinler konusunu ihmal etmemek çok değerlidir.

Mümkün olduğunca temiz ve minimalist bir görünüm elde etmek isteyenler için (örneğin bir fotoğrafçının portföy web sitesinde), en azından aşağıdakileri bir görseli olan her sayfada tanımlaması önerilir:

H1 Görüntünün konusuna göre
Görselde kısa bir açıklama (10-20 kelime bile hiç yoktan iyidir), tercihen alakalı bir veya iki anahtar kelime ile
Başlık ve açıklama elbette ilgilidir (fiziksel bir sayfa olması ve bir galeriden açılan bir resim olmaması durumunda).
Alt ve fotoğraf başlıkları - Bu durumda şiddetle tavsiye edilir.

8. Fotoğraflar için site haritası

Görsel Site Haritası (image-sitemap.xml) Google'ın sitedeki görsellerimizi daha iyi okumasına ve dizine eklemesine yardımcı olur. Standart bir XML site haritasına benzer şekilde, site haritaları alanında Search Console kullanılarak bir resim site haritası gönderilebilir.

Search Console'a bir Site Haritası ekleyin

Bir resim site haritası özellikle komut dosyaları ve çeşitli efektler içeren her tür galeri kullanıldığında yararlıdır - Google'ın geleneksel olarak taramakta zorlandığı.

Resimlerin site haritalarını kullanmak için bazı parametreler vardır.

Site haritası nasıl oluşturulur?

WordPress - Her zamanki gibi WordPress üzerinde çalışıyorsanız, hayatınız kolaydır. Udinra Tüm Görsel Site Haritası eklentisi sizin için köşeyi kapatır. Tek yapmanız gereken eklentiyi yüklemek, ayarlarda bir miktar V işaretlemek, site haritasını oluşturmak ve Search Console aracılığıyla Google'da başlatmaktır.

Başka herhangi bir platformda - duruma göre değişir. Eklenti vb. Gibi kullanıma hazır bir çözüm yoksa, bu Screaming Frog kullanılarak yapılabilir.

Kurbağa, kolayca bir görüntü site haritası oluşturmanıza yardımcı olabilir. Tek sorun - otomatik olarak güncellenmeyecek (bir eklentinin aksine) ve zaman zaman yenilenmesi gerekiyor.

Bunu nasıl yaptın?

İstenen sitenin tam bir taraması yapılmalı ve ardından yazılımın üst menüsünde Site Haritaları -> Resim Oluştur Site Haritası'na gidin. Alacağınız şey, Search Console aracılığıyla kullanmak ve başlatmak için koşer bir XML dosyasıdır.

9. Fotoğraf paylaşımını teşvik edin

Orijinal görüntüleri (ister fiziksel bir görüntü ister bir grafik öğesi olsun) çok fazla kullanıyorsanız ve görseller sitenin ana öğesiyse veya en azından önemli bir parçasıysa, kullanıcıları resimleri sosyal medyada paylaşmaya teşvik etmek çok faydalı olacaktır. ağlar ve bunu yapmalarını kolaylaştırır.

Her zamanki gibi, WordPress platformu için pratik ipuçlarım var, diğer sistemlerde bir programcı kullanmanızı veya bunun için özel bir eklenti olup olmadığını kontrol etmenizi öneririm.

WordPress'in bu amaç için 2 güzel eklentisi vardır:

WordPress için Social Image Hover - Ücretli eklenti (em; oje - 17 $).
Pinterest Pin it Button - Sitedeki fotoğraflara küçük bir Pinterest simgesi ekleyen bir eklenti.

10. Görüntü küçültme ve optimizasyon araçları

TinyPNG - özellikle kullanışlı bir sürükle arayüzüyle görüntüleri çevrimiçi olarak sıkıştırmanıza olanak tanıyan mükemmel bir hizmet. Ayrıca, daha büyük miktarlarda ve otomatik olarak çalışmanıza izin veren bir API'ye ve ayrıca sitedeki tüm görüntüleri sıkıştırmanıza izin veren harika bir WordPress eklentisine sahiptir - API'lerinin kullanılmasını gerektirir (ayda 500 görüntü için ücretsiz).

Fotosizer - görüntüleri büyük miktarlarda düzenlemenize izin veren hoş bir masaüstü yazılımı - yalnızca sıkıştırma değil, aynı zamanda boyutların küçültülmesi, görüntülere filigranlar ve çeşitli efektler ekleyerek ve diğer pek çok güzel özellik.

Sonuç

Bir web sitesinin resimlerini optimize etmenin önemini şimdi anladınız. Ancak sitenizin mevcut durumunu öğrenmek istiyorsanız, Semalt's sayesinde ücretsiz olarak yapabilirsiniz. SEO danışmanlığı.

Semalt, sitenizle ilgili SEO sorunlarını belirlemenize yardımcı olacaktır. Ayrıca Semalt Uzmanları ile kolayca çevrimiçi işletmenizin performansını artırmak daha düşük bir maliyetle.

mass gmail