Alt Text (Alt Metin) Nedir, Görsel SEO İçin Nasıl Optimize Edilir? #
Alt metin (alt text), görsellerin içeriğini açıklayan ve arama motorları ile erişilebilirlik araçları tarafından kullanılan metinleri ifade eder. SEO dostu içeriklerde kritik bir rol oynar ve web erişilebilirliği açısından zorunlu bir bileşendir. Bu rehberde, alt metin kavramını tüm yönleriyle ele alacak ve SEO için nasıl optimize edileceğini detaylandıracağız.
Alt Text (Alternative Text) Nedir? #
Alt Text, “Alternative Text” (Alternatif Metin) ifadesinin kısaltmasıdır. Alt text,, bir web sayfasındaki görsellerin açıklamasını sağlamak amacıyla kullanılan bir HTML özniteliğidir (HTML attribute).
Alt text, özellikle ekran okuyucular tarafından sesli olarak okunarak görme engelli kullanıcıların içeriklere erişimini kolaylaştırır. Ayrıca, arama motorlarının görsel içeriği anlamasına ve dizine eklemesine yardımcı olur.
Özellikle Web Content Accessibility Guidelines (WCAG) tarafından erişilebilirlik standartlarının bir parçası olarak zorunlu hale getirilmiştir ve SEO açısından kritik bir unsur olarak kabul edilir.
Aşağıda bir alternative text kullanım örneğini inceleyebilirsiniz:
<img src="SEO-optimizasyonu.jpg" alt="SEO Optimizasyonu için grafik tablosu">Bu kod parçasında <img> etiketi görseli temsil eder. <img> etiketine eklenen alt özniteliği, görselin SEO optimizasyonuyla ilgili bir grafik içerdiğini belirtir. Bu özniteliğin eklenmesi ilgili görselin “SEO optimizasyonu için grafik tablosu” içeriğine sahip olduğunu ifade eder.
Alt Metnin Tarihçesi ve Gelişimi #
Alt metin kavramı, 1990’ların başında World Wide Web Consortium (W3C) tarafından web erişilebilirlik standartları çerçevesinde tanımlanmıştır.
- 1999: İlk olarak W3C’nin Web Content Accessibility Guidelines (WCAG) belgelerinde standart hale geldi.
- 2018: WCAG 2.1 güncellemesiyle birlikte, alt metinlerin modern cihazlarda ve ekran okuyucularda daha kapsamlı şekilde desteklenmesi sağlandı.
Bu tarihsel süreç, alt metinlerin hem erişilebilirlik hem de SEO açısından kritik önemini ortaya koymuştur.
Alt Text Ne İşe Yarar? #
Alt text kullanımı birçok açıdan önem taşır:
Erişilebilirlik İçin Alt Text Kullanmanın Önemi:
Web Content Accessibility Guidelines (WCAG) standartlarına göre, tüm anlamlı görseller için alt text kullanımı zorunludur. Görme engelli kullanıcılar, ekran okuyucular aracılığıyla web içeriğini anlamlandırırken alt text’lerden faydalanır.
SEO Açısından Alt Text Kullanmanın Önemi:
Arama motorları görselleri anlayabilmek için alt text’leri kullanır. İyi hazırlanmış alt text’ler, görsellerin arama sonuçlarında daha iyi sıralanmasını sağlar ve web sitesinin genel SEO performansını artırır.
Teknik Sorunlarda Yedek Plan:
Görsel yüklenemediğinde, bağlantı koptuğunda veya düşük internet hızında alt text devreye girer ve kullanıcılara görselin içeriği hakkında bilgi verir.
Alt Text Görsellere Nasıl Eklenir? #
HTML ve XHTML’de alt text eklemenin temel formatını ve farklı kullanım senaryolarını adım adım açıklayalım:
- Temel Olarak Alt Text Ekleme Örneği:
<img src="gorsel.jpg" alt="Görselin açıklaması">- Boş Alt Text (Dekoratif Görseller İçin):
<img src="dekoratif.jpg" alt="">- Başlık (Title) İle Birlikte Alt Text Kullanımı:
<img src="gorsel.jpg" alt="Görselin açıklaması" title="Fare üzerine geldiğinde görünecek metin">- Kompleks Görseller İçin Uzun Açıklamalı Alt Text Örneği:
<img src="karmasik-gorsel.jpg"
alt="Kısa açıklama"
longdesc="uzun-aciklama.html">- Figure Elementi İçinde Alt Text Kullanım Örneği:
<figure>
<img src="gorsel.jpg" alt="Görselin açıklaması">
<figcaption>Görsel altı açıklama metni</figcaption>
</figure>- Responsive Görseller İçin Alt Text Kullanım Örneği:
<img src="gorsel.jpg"
srcset="gorsel-small.jpg 300w,
gorsel-medium.jpg 600w,
gorsel-large.jpg 900w"
sizes="(max-width: 320px) 300px,
(max-width: 640px) 600px,
900px"
alt="Görselin açıklaması">- Background Image İçin Alt Text Kullanımı (CSS):
<div role="img" aria-label="Görselin açıklaması">
<!-- Arka plan görseli CSS ile eklenir -->
</div>Alt Text ile alakalı önemli notlar:
- Alt text her zaman çift tırnak içinde yazılmalıdır
- Alt özelliği her img elementi için zorunludur
- Dekoratif görseller için boş alt text (alt=””) kullanılabilir
- XHTML’de alt özelliği her zaman küçük harfle yazılmalıdır
- Alt text içinde HTML etiketleri kullanılamaz
HTML5’te Yeni Alt Text Özellikleri:
<picture>
<source media="(min-width: 800px)" srcset="buyuk.jpg">
<source media="(min-width: 400px)" srcset="orta.jpg">
<img src="kucuk.jpg" alt="Görselin açıklaması">
</picture>Bu kodları doğru şekilde kullanmak için dikkat edilmesi gereken noktalar şunlardır:
- Dosya yollarının (src) doğru olduğundan emin olun
- Alt text’in görseli doğru şekilde tanımladığından emin olun
- Responsive tasarımlar için srcset ve sizes özelliklerini düzgün yapılandırın
- WCAG standartlarına uygunluk için alt text kullanımını ihmal etmeyin
Alt Text Oluştururken Dikkat Edilmesi Gerekenler Nelerdir? #
Etkili bir alt text oluşturmak için şu prensiplere dikkat edilmelidir:
Doğru Yaklaşım:
- Görseli kısa ve öz şekilde tanımlayın
- Bağlam içinde anlamlı olmasına dikkat edin
- Önemli detayları vurgulayın
Kaçınılması Gerekenler:
- “Resim”, “Fotoğraf” gibi gereksiz kelimeler kullanmayın
- Aşırı uzun açıklamalardan kaçının
- Anahtar kelime dolgusundan uzak durun
Google’ın Alt Text İçin Önerdiği En İyi Uygulamalar: #
- Doğru ve açıklayıcı olun
- Bağlamsal ilişki kurun
- Doğal dil kullanın
- Aşırı optimizasyondan kaçının
- Maksimum 125 karakter kullanın
Alt Metinler İçin Örnekler ve Kod Kullanımları #
Aşağıda, farklı türde görseller için alt metin kullanım örnekleri verilmiştir:
| Görsel Türü | Alt Metin Örneği |
| Ürün Fotoğrafı | <img src=”ayakkabi.jpg” alt=”Siyah deri spor ayakkabı modeli”> |
| Grafik veya İstatistik | <img src=”grafik.jpg” alt=”2024 SEO trendlerini gösteren grafik”> |
| Dekoratif Görsel | <img src=”cizgi.jpg” alt=””> |
| Logolar | <img src=”logo.jpg” alt=”Şirket logosu”> |
Alt Text Kullanmanın Avantajları ve Dezavantajları Nelerdir? #
Alt text kullanmanın avantajları olduğu gibi web yöneticileri için bazı göze alınması gereken dezavantajları da bulunmaktadır.
Alt text kullanmanın avantajları:
- Gelişmiş erişilebilirlik
- Daha iyi SEO performansı
- Zenginleştirilmiş kullanıcı deneyimi
- WCAG uyumluluğu
Alt text kullanmanın olası dezavantajları:
- Her görsel için uygun açıklama yazma gerekliliği
- Çok sayıda görseli olan siteler için zaman alıcı olması
- Düzenli güncelleme ihtiyacı doğruması
Alt Text Kullanımı Gereken Dosya Formatları Nelerdir? #
Alt text, genellikle görseller üzerinde uygulanır. Aşağıda alt text kullanımının desteklendiği ve önerildiği dosya formatları listelenmiştir:
| Dosya Formatı | Alt Text Kullanımı | Açıklama |
| JPEG/JPG | Gereklidir | Yaygın olarak kullanılan fotoğraf ve grafik formatıdır. SEO ve erişilebilirlik için alt text şarttır. |
| PNG | Gereklidir | Şeffaflık destekleyen görseller için kullanılır. Açıklayıcı alt metin eklenmelidir. |
| GIF | Gereklidir | Hareketli veya statik görsellerde, içerik açıklaması sağlamak için gereklidir. |
| SVG | Desteklenir, ancak farklı yöntemlerle uygulanabilir | Vektörel grafiklerde alt text yerine <title> ve <desc> etiketleri kullanılabilir. |
| WebP | Gereklidir | Modern, yüksek sıkıştırmalı formatlarda alt metin eklenmesi SEO açısından önerilir. |
| BMP | Gereklidir | Daha az yaygın bir format olmasına rağmen, erişilebilirlik için alt metin eklenmelidir. |
| TIFF | Önerilmez, ancak kullanılabilir | Genellikle profesyonel baskı formatları için kullanılır, web için optimize edilmesi önerilir. |
| ICO | Önerilmez | Favicon gibi küçük simgeler için kullanılır. SEO açısından alt text yerine meta açıklamalar önerilir. |
SVG Dosyaları İçin Alternatif Metin Kullanımı #
SVG formatında doğrudan alt text kullanılamaz.
Bunun yerine, erişilebilirlik sağlamak amacıyla SVG dosyaları için şu etiketler kullanılır:
<svg>
<title>Grafik başlığı</title>
<desc>Grafikte SEO optimizasyon trendleri gösterilmektedir.</desc>
</svg>Bu yapı, SVG görsellerinin ekran okuyucular tarafından tanınmasını ve açıklanmasını sağlar.
Alt Text Gereksiz Olan Durumlar #
- Dekoratif Görseller: Dekoratif amaçlı görseller için alt metin eklenmesi zorunlu değildir. Örneğin, bir çizgi veya arka plan süslemesi için:
<img src="dekoratif-cizgi.png" alt="">- Arkaplan Görselleri (CSS ile Eklenmiş): CSS ile eklenen görseller için alt text kullanılmaz. Bunun yerine, HTML üzerinden bilgi verilmesi önerilir.
- Simge ve İkonlar: Kullanıcı arayüzü ikonları için açıklama gerekiyorsa, ek bir aria-label kullanılabilir:
<i class="fa fa-search" aria-label="Ara"></i>Alt Text Kullanımı Zorunlu Dosya Formatları Önerileri #
SEO ve erişilebilirlik açısından en sık kullanılan formatlar JPEG, PNG ve GIF’tir. Bu formatlar için mutlaka alt text eklenmeli ve metin, içerikle uyumlu olacak şekilde optimize edilmelidir.
Alt metin optimizasyonu için aşağıdaki hususlara dikkat edilmelidir:
- Görselin ne olduğunu açıklayın.
- Anahtar kelimeleri doğal şekilde ekleyin.
- Maksimum 125 karakter uzunluğunu geçmeyin.
Alt Text ile Image Name Farkı Nedir? #
Alt text ve image name farklı amaçlara hizmet eder:
Alt Text:
- Görselin içeriğini tanımlar
- Erişilebilirlik için kullanılır
- SEO açısından önemlidir
Image Name:
- Dosya organizasyonu için kullanılır
- URL yapısını etkiler
- Teknik tanımlama sağlar
| Özellik | Alt Text | Image Name |
| Tanım | Görselin metinsel açıklamasıdır | Dosya adıdır |
| SEO Etkisi | Erişilebilirlik ve sıralama artışı | URL yapısı ve indeksleme faktörü |
| Kullanım Alanı | HTML içinde alt etiketi | Dosya kaydı ve görsel URL’si |
Alt Text Hangi Arama Motoru Algoritmalarına Hitap Eder? #
Google Algoritmaları #
- Googlebot Görsel Arama: Alt metinler, Google Görseller dizinine eklenirken önemli bir sıralama faktörüdür.
- RankBrain ve BERT: Alt metinlerin semantik anlamlarını değerlendirerek içeriğin bağlamını analiz eder.
Diğer Arama Motorları #
- Bing Görsel Arama: Alt metinleri analiz ederek, görüntü sıralamasında öncelik verir.
- Yandex ve Baidu: Görsel açıklamalarına dayalı sıralamalar oluşturur.
Alt Metin Hakkında Sıkça Sorulan Sorular (FAQ) #
Alt Metinlerin SEO Başarısındaki Rolü #
Alt metinler, hem erişilebilirlik hem de SEO açısından hayati bir rol oynar. Görsellerin indekslenmesini kolaylaştırır, kullanıcı deneyimini iyileştirir ve arama motorlarında daha yüksek sıralamalar elde edilmesini sağlar.
Alt metin optimizasyonu, web sitenizin görünürlüğünü artırmak ve daha geniş bir kitleye ulaşmak için atılabilecek en etkili adımlardan biridir.