Etiket: Araçlar

HTML’de, <img> bir resmi veya fotoğrafı web sayfanıza yerleştirmek için kullandığımız kod etiketidir.

Bu <img> etiketin iki gerekli niteliği vardır: src görüntüye giden yolu belirtmek ve alt görüntü için alternatif bir metin belirtmek için kullanılır. Nitelik alt, herhangi bir nedenden dolayı (belki yanlış görüntü yolu) görüntünün görüntülenmemesi durumunda ilgili görseli tanımlamak için kullanılmaktadır.

<img src="/ornek-resim.jpg" alt="Resmi tanımlayan açıklama kısmının geleceği yer">

alt Etikette öznitelik zorunlu olmasına rağmen birçok kişi bunu boş bırakmayı veya görüntüyle ilişkili olmayan bir metin yazmayı tercih ediyor.

İlgili Araç : Web sayfanızdaki görselleri şimdi SEO aracımız ile kontrol edebilirsiniz. 10 farklı kritere göre analiz gerçekleştirerek Alt Text Checker aracımızla en doğru tavsiyeleri alın. SEO uzmanlarımızın kullandığı Alt Text Checker aracını şimdi ücretsiz kullanabilirsiniz.

Çoğu web tasarımcı alt metnin ne kadar yararlı olduğunu bilmediği için ona çok az dikkat eder veya hiç dikkat etmez ve çoğu web tasarım veya seo eğitimlerinde de önemini vurgulamakta başarısız olunur.

Bu Türk SEM makalemizde alt metnin ne anlama geldiğini, ne işe yaradığını ve web sayfanıza bir resim eklerken ne kadar yararlı olduğunu sizlere anlatacağız. Ayrıca resimleriniz için alt metin yazarken dikkate alınması gereken birkaç noktayı vurgulayacağız.

İçeriğimizi kısa tuttuk, tam olarak doğru kullanımlarını anlamanızı sağlayacağız.

Alt Text Nedir?

Alt Text Türkçesi : Alt Metin

Alternatif veya alt metin, alt niteliği olarak da adlandırılır. Bir resmi doğru bir şekilde tanımlayan özlü, açıklayıcı bir metindir.

Varsayılan olarak tarayıcıda bir web sayfasını görüntülediğinizde bu metin gösterilmez. Yine de, bir resmi herhangi bir nedenle ziyaretçiniz görüntüleyemediği bir durumda, alt metin görünür hale gelir. Bu metin, okuyucuya veya kullanıcıya resmin ne hakkında olduğu ve hangi materyalleri barındırdığı konusunda bir fikir verecek kadar bilgilendirici ve açıklayıcı olmalıdır.

Örneğin, şöyle bir görseliniz varsa:

Dağ veya Göl gibi genel bir ifade vermek yerine tam açıklayıcı olmaya çalışmalısınız. Doğru kullanım; “Arka planda Hasandağı manzarası olan Helvadere gölü”

<img src="/imgs/hasandagi.jpg" alt="Arka planda Hasandağı manzarası olan Helvadere gölü">

Resim Alt Metni Neden Önemlidir?

Alt niteliğinin <img> etiket içine neden eklememiz gerektiği konusuna değinelim.

Ancak görsellerinize yalnızca basit alternatif metin eklemeyi değil, aynı zamanda açıklayıcı ve bilgilendirici alternatif metinler eklemeyi de düşünmeniz için birkaç neden daha var:

1. Bağlantı sorunlarınız olduğunda veya görüntünüzün yolu yanlış eklendiğinde, görüntünüz web sayfanıza yüklenemeyebilir. Bu durumda, alt metin değeri görüntünün yerine gösterilerek ziyaretçilerinizi bilgilendirir.
2. Alt Text, arama motorlarının web sayfanızın SEO‘sunu iyileştirmek için kullanabileceği bir görselin açıklanmasını sağlar. Arama motorlarına web sayfanızı SERP‘lerde daha yüksek sıralar için daha iyi bilgiler verir, yani uygun bir alt metne sahip olmak web sayfanızın daha üst sıralarda yer almasına yardımcı olur.
3. Ekran okuyucu kullanan görme engelli kullanıcılar, görüntünün açıklamasını dinleyebilirler. Ekranı göremeyen kişiler için erişilebilirliği artırmanın ziyaretçinizin sitenizde tam istifade etmesini sağlayacaktır.
4. Resminizi başka bir sayfaya veya belgeye bağlamak istediğiniz zamanlarda resim yüklenemediği koşullarda bağlantı metni olarak alt metni kullanılır.

İyi Alternatif Metin Yazmak İçin İpuçları

Ünlü bir söz vardır: “Yapmaya değer her şey, iyi yapmaya değerdir.” Aynısı temel olarak alternatif metninizi yazarken de geçerlidir – kötü, alakasız veya anlamsız alternatif metin yazmaktansa alternatif metin yazmamak daha iyi olduğunu belirtebiliriz.

Alternatif metninizi yazarken aklınızda bulundurmanız gereken birkaç ipucu:

Resmi doğru bir şekilde tanımlayın

Alt Text (Alt Metin) yazmanın temel amacı ilgili görselin yerine geçebilmesidir.

Alt metnin amacına hizmet edebilmesi için görseli açıklayıcı ve doğru bir şekilde tanımlama yapması gerekir.

Yararlı bir ipucu : bir resmi göremeyen bir kullanıcıya o resmi tanımladığınızı düşünerek Alt Text içeriğini oluşturun.

Kısa tut

Bu noktada bu alt metinlerin bir paragraf biçiminde olacağını düşünmeye başlayabilirsiniz – ancak doğru kullanım değildir. Çoğu durumda görsellerimizi 6-7 kelimeyle açıklamanın ve tanımlamanın en iyi yolunu her zaman aramalıyız.

Ekran okuyucuların alt metni yaklaşık 125 karakterde kesebileceğini her zaman aklınızda tutun, bu nedenle bu sınıra uymak en iyisidir. Yine de her zaman tek bir kelimeyi alt metin olarak kullanmaktan kaçınmalısınız.

Örnek Kullanım : Helvadere Parkından Helvadere Gölü ve Hasandağı Manzarası

55 karakterlik bir kullanımla resmi tam olarak tanımladık. 125 karaktere kadar limitimiz olduğunu varsaysakta çoğunlukla 60 -70 karakterle tanımlamayı gerçekleştirebiliyoruz.

Anahtar kelimeleri kullanın ancak anahtar kelime doldurmaktan kaçının

Bir görseli tarif ederken anahtar kelime seçimimiz en önemli önceliğiniz olması normaldir. Fakat; ilgili imajı anahtar kelimelerle doldurmak doğru değildir.

Anahtar kelimelerinizin alt metninizde olması web sayfanızın arama motorlarında daha üst sıralarda yer almasına yardımcı olsa da, arama motorlarının yardımcı olmayan veya kötü alt metinlerin sorun meydana getireceğini unutmayın.

Hatalı Kullanım : Hasandağı, Helvadere, Aksaray, Türkiye, Dağ, Park, Göl Fotoğrafı

Bu madde yalnızca web sayfanızın saygınlığını güçlendiren önemli görselleri kullanmanız ve bunları tanımlamak için yalnızca en önemli anahtar kelimeleri kullanmanız gerektiği anlamına gelir.

Kendini tekrarlama

Tekrarlardan kesinlikle kaçının. Web sayfanızın başlığını veya başlığını neden alt metin olarak kullanıyorsunuz ki? Tekrarlanan altyazılardan veya web içeriklerindense boş bırakmak genellikle daha iyidir.

En iyi tavsiyemiz ise bu konuda bir görseli iyi tanımlayamadığınızda, rastgele bir metin eklemektense alternatif metni boş bırakmanız veya tekrar eden alternatif metin olarak resim açıklamalarını kullanmanızdır.

Resim Başlıkları ve Alt Metin

Resim açıklamaları ile alternatif metni karıştırmak veya alternatif metninizdeki içeriği resim açıklaması olarak tekrarlamak kolaydır.

Açıklamalar, kullanıcıların çevredeki metinle ilişki kurmasına yardımcı olmak için görüntüleri tanımlarken, alternatif metin, bir görüntüdeki bilgileri açıklar veya ekran okuyucu kullanıcıları için bir görüntüyü tanımlar.

Açıklamalar görselin gösterdiğiyle birebir aynı olmak zorunda değildir; görselin yerleştirildiği metin veya içerikle nasıl ilişkili olduğunu açıklar.

‘Resim’ veya ‘fotoğraf’ kelimelerini eklemeyin

alt niteliği image etiketinde kullandığınızda bu da arama motorlarının bunun bir imaj olduğunu bileceği anlamına gelir, bu nedenle alt metin yazarken imaj, resim veya fotoğraf kelimelerini kullanmaya gerek yoktur.

Ancak, insanların bağlamı veya ne tür bir resim veya fotoğraf olduğunu anlamalarına yardımcı olmak iyidir. Örneğin, headshot, çizim, ekran görüntüsü, grafik ve daha fazlasını söyleyebilirsiniz.

Yapay Zeka ile Alt Text Kullanımı

• Rankmath SEO eklentisi, bütünleşik olarak yapay zeka ile fotoğrafları tanımlıyor.
• Alt Text AI, herhangi bir işlet yapmadan yüklediğiniz her fotoğrafa otomatik olarak yapay zeka destekli içerik oluşturur. Bir kaç projemde kullandım oldukça işlevsel olduğunu belirtebilirim.

Özetleme

Bu Türk SEM makalemizde Türkçe yeteri kadar kaynak olmayan Alt Text konusunu inceledik ve bir de sizler için Alt Text Aracı yayınladık. Buraya kadar okuduysanız alt metnin ne anlama geldiğini ve neden önemli olduğunu öğrendiniz. Ayrıca, web sayfanıza resim eklerken nasıl kullanılacağına dair bazı önemli ipuçları da biliyorsunuz.

Son olarak, logonuz, düğme olarak kullanılan resimler ve daha pek çok şey dahil olmak üzere sitenizde kullandığınız tüm imajlere her zaman alternatif metin eklemeniz gerektiğini ve bunu neden yaptığınızı bilmeniz gerektiğini unutmamalısınız.

Ancak web sayfalarınızı süslemek ve bilgi aktarmaktan ziyade öncelikli amacı bu olan site tasarımının bir parçası olan görsellerin alt text gerektirmediğini de unutmayın.

Okuduğunuz için teşekkürler, sizlere SEO konusunda ücretsiz şekilde çok değerli bilgiler aktarıyoruz. Makalelerimizi takip ederek kendinizi geliştirebilir ve SEO uzmanlarımızın kullandığı araçları ücretsiz kullanabilirsiniz.

Web tasarımla uğraşan herkesin işine yarayacak muhteşem bir araçla bir konuyu da inceliyoruz. Yazı içerisinde bulunan aracımız sayesinde ilgili sayfa içerisinde ki tüm Inline CSS listelemelerini nitelikleriyle beraber görebileceksiniz. Sayfa hızı konusunda devamlı karşınıza Inline CSS konusu geliyorsa Türk SEM’in bu aracı sayesinde sorunlarınızı eksiksiz bir şekilde görebilirsiniz.

Inline CSS, Türkçe olarak Satıriçi CSS olarak da anılmaktadır.

Yukarı kısımdan incelemek istediğiniz sayfayı giriş yaparak kontrol edebilirsiniz. Kontroller sırasında satıriçi kullanılan CSS kodlarının ne olduğunu anlatan bir kılavuzla karşılaşacaksınız.

Inline CSS Nedir?

Inline CSS (Satır içi CSS), CSS kurallarını doğrudan bir HTML öğesine içerisinde style niteliğini kullanarak uyguladığınız bir tasarım yöntemidir. Bu yaklaşım CSS’yi doğrudan HTML kodlarınız içine eklemenize ve yalnızca uygulandığı belirli öğeyi etkilemenize olanak tanıyan o kısma özgü bir yöntemdir.

Satır içi stiller, HTML sayfanızdaki öğelerin görünümünü harici bir stil sayfasına (.css) bağlanmaya veya başlık bölümünü dahili stil sayfalarından veri çekmeye gerek kalmadan değiştirmenin hızlı ve pratilk bir yoludur.

Satır içi CSS’nin sözdizimi

Satır içi CSS için sözdiziminin kullanımı oldukça basittir. Bir HTML etiketi içindeki style niteliğiyle başlarsınız, ardından eşittir işareti gelir. Style niteliğinin değeri daha sonra tırnak işaretleri içine alınmış bir dizi CSS özellik-değer çifti ekleyerek kullanılabilir.

Her özellik karşılık gelen değerinden iki nokta üst üste işaretiyle ayrılır ve her özellik-değer çifti noktalı virgülle ayrılarak kullanılır.

‘Style’ Özelliği

Style niteliği, CSS’yi doğrudan bir HTML kodları içerisine eklemek için kullandığınız HTML niteliğidir. Satır içi stil için bir ağ geçididir ve tüm HTML öğeleri ve tarayıcılar tarafından desteklenir. Bir HTML etiketine style niteliğini eklediğinizde, tarayıcıya belirtilen stilleri yalnızca o öğeye uygulanmasını sağlar.

Style Niteliği içindeki CSS Özellik-Değer Çiftleri

Style özniteliği içinde, istediğiniz sayıda CSS özellik-değer çifti belirtmeniz mümkündür. Bir CSS özelliği, renk, kenarlık veya kenar boşluğu gibi biçimlendirmek istediğiniz bir öğenin tüm yönlerini kapsar. Değer, sırasıyla kırmızı, 2 piksel düz siyah veya 10 piksel gibi bu özelliği o alana özgü ayarlamanız için Inline CSS kullanılabilir.

İşte bir paragrafın metin rengini ve yazı tipi boyutunu değiştirmek için satır içi CSS’yi nasıl kullanabileceğinize dair bir örnek:

<!-- ORNEK INLINE CSS KODU -->
<p style="color: red; font-size: 20px;">Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.</p>

Şimdi bu kodun önizlemesine bakalım.

Bu içerik Inline CSS konusunu anlatmaya yönelik Turksem.com tarafından yapılmış örnek bir koddur.

Satır İçi CSS’nin Avantajları

• Bireysel Öğelere Stil Eklemek Hızlı ve Kolay
• Değişiklikleri Test Etmek ve Önizlemek İçin Yararlıdır
• Yüksek Özgüllük Nedeniyle Diğer CSS Stillerini Geçersiz Kılar

Satır içi CSS’nin Dezavantajları

• Daha Büyük Projelerde Bakım Zorluğu
• Karmaşık HTML Yapısı
• Tekrar Kullanılamayan Kod
• Aşırı Kullanıldığında Sayfa Yükleme Performansını Azaltır
• Birden Fazla Öğe veya Sayfada Tutarlılıkla İlgili Zorluklar

Sayfa hızına Etkisi ve Pagespeed Test Uyarısı

Çoğu zaman kolayımıza geldiği için kullandığımız Inline CSS uygulaması sitenizi yavaşlatma eğiliminde olan modası geçmiş bir uygulamadır. Örneğin; başlıklarınızı 20px ve kırmızı yapmak istediğinizi varsayalım. Sayfada 10 başlık varsa her birine aynı kodu yerleştireceksiniz. Bu durum gereksiz bir kod çokluğuna neden olmaktadır. Halbuki harici bir .css dosyasına .h1 başlık etiketi tanımlasanız bu kod yoğunluğunu azaltmış olacaksınız.

Yukarıda yer verdiğimiz test aracı sizler için tam olarak kusursuz bir kılavuz sunmaktadır. İlgili sayfalarınızı kontrol ederek sıklıkla tekrar ettiğiniz kodlara göz atabilirsiniz.

Bir webmasterın işine yarayacak bir çok etkili aracı Web Sitesi Test Araçları kısmında yayınlamaktayız.

Son Bilgi

Bir SEO ajansı olarak bizi genellikle hız konusunda ilgilendirse de Inline CSS konusunda yaşadığınız sorunları bizlere yazabileceğinizi, fikir alabileceğinizi unutmayın.

Veri sıkıştırma aracı olarak kullanılan gzip, Unix tarafından yazılmış program olan compress’e güçlü bir alternatif geliştirmek için çalışmalar yapan Jean-Loup Gailly ve Mark Adler tarafından geliştirilmiştir.

İşlevleri ve davranışları uyarlanabilir Lempel-Ziv algoritmasını kullanarak dosya sıkıştırmayı sağlayan POSIX standardında tanımlanmış bir teknolojidir. Üstlenen ekibin başarılı çalışmalar yaptığı ve şu an en yaygın kullanılan sıkıştırma yöntemi olduğunu belirtmeliyiz. Siteniz için aşağıdaki kısımdan test edebilirsiniz.

Gzip teknolojisi sitenizde %80’e varan tasarruf sağlamaktadır.

Sitenizde GZIP’i Test Edin

Gzip nasıl çalışır?

Gzip, ‘GNU ZIP‘in kısaltmasıdır ve veri sıkıştırma yöntemi LZ77’nin (Lemprl-Ziv 77) bir çeşidi olan özgürce kullanılabilen deflate algoritmasına ve Huffman kodlaması temeline dayanır. Bu teknikleri kullanarak, gzip dosyaları yinelenen veri dizelerini tarar. Program bu yinelenen dizilerle karşılaşırsa, bunları ilk görünen dizeye bir bağlantıyla değiştirir. Bu dizilerin uzunluğu genellikle 32.000 baytla sınırlıdır. Bir karakter dizisi önceki 32.000 baytta görünmüyorsa, .gz sonunu alan gzip dosyasında (sıkıştırılmadan) saklanır. Prosedür tek tek dosyalarla sınırlıdır, bu nedenle paketleme programı tar’ın .tar , .gz ve .tgz sonlarıyla sözde tarball arşivleri oluşturması gerekir. İşin teknik ve hikaye kısmı işin aslı bu kadar. Daha da fazla anlatıp uzatmaya gerek. Şimdi sizin sunucunuzda nasıl etkinleştirileceğini ve sitenizde yapmanız gereken ayarlardan bahsedeceğiz.

Apache web projeniz için gzip sıkıştırmasını nasıl kullanırsınız

Web sunucuları genellikle, etkinleştirilmesi gereken bir modül biçiminde pratik sıkıştırma sürecini sunar . Günümüzde, birçok web barındırma sağlayıcısı bu özelliği paylaşmaktadır, ancak geçmişte durum böyle değildi. Bunun nedeni muhtemelen sıkıştırma sürecinin ek işlemci gücü gerektirmesinden kaynaklıydı. Gzip’in sunucunuz tarafından yetkilendirilip yetkilendirilmediğinden emin değilseniz, sunucu yöneticinizle doğrudan iletişime geçebilir veya alternatif olarak manuel bir sorgu yapabilirsiniz. Örneğin, bir Apache web sunucusunda, basit bir phpinfo() çıktısı kullanarak sunucu modül ayarlarını kontrol edin. HTTP_ACCEPT_ENCODING bilgisi, hangi sıkıştırma yönteminin seçildiğini söyler.

Eğer sunucunuzda kurulu bir gzip mevcutsa, sıkıştırma yardımcısını herhangi bir amaçla kullanmak için birkaç seçeneğiniz vardır.

.htaccess dosyasında Gzip sıkıştırmasını etkinleştirme

Tüm sitenizde (bunlar geçerli dizine ve tüm alt dizinlere uygulanır) gerçekleştirmek ve web sunucunuzu gerçek zamanlı olarak yapılandırmak için bir .htaccess dosyası içerisine bir kod ekleyerek kullanabilirsiniz. .Htaccess dosyası genellikle kök dizinde bulunur ve yapılandırma dosyasının siteye ulaşan her istekte otomatik olarak okunmasını mümkün kılar. Ancak bazı web barındırma sağlayıcılarında .htaccess dosyası farklı bir klasörde saklanır, gizlenir veya erişime kapalı olabilir. Bu durumda yapmanız gereken sahip olduğunuz tek seçenek barındırıcıyla iletişime geçip erişim istemektir. Yapılandırmaları gerçekleştirebiliyorsanız, .htaccess dosyasına aşağıdaki kodu ekleyerek gzip sıkıştırmayı ( mod_gzip ) veya deflate algoritmasını ( mod_deflate ) açın :

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

PHP aracılığıyla gzip sıkıştırmasını etkinleştirin

Basit bir PHP komutu kullanarak sıkıştırma işlemini sitenizde etkinleştirmeni mümkündür. Ancak zahmetli bir sorun var o da: kodun her PHP belgesi için ayrı ayrı girilmesi gerektiğidir. Bu nedenle, bu seçeneği yalnızca .htaccess dosyasını düzenlemek için gerekli haklara sahip olmadığınız sunucularda kullanmalısınız. Her satırın başına yerleştirmeniz gereken kod satırı şu şekildedir:

<?php
ob_start("ob_gzhandler");
?>

WordPress eklentisi aracılığıyla gzip’i uygulayın

Bu iki manuel çözüme ek olarak, kurulumu yalnızca asgari çaba gerektiren bir seçeneğimiz de mevcut: kullandığınız içerik yönetim sistemi için bir eklenti kullanarak gzip sıkıştırmasını etkinleştirebilirsiniz. Birkaç dakika içinde yerleştirebileceğiniz ve ihtiyaçlarınıza göre uyarlayabileceğiniz bu tür yararlı eklentiler, öncelikle PHP tabanlı WordPress gibi CMS’ler için sitenizin hızlanmasına fayda sağlar. Aşağıdaki liste, WordPress siteniz için en popüler üç eklentiyi içerir:

• W3 Total Cache : WordPress eklentisi W3 TotalCache, web sitesi performansını on kat artırmayı vaat ettiğini söylemeliyiz. Çeşitli önbelleğe alma mekanizmalarına ve özel mobil desteğe ek olarak, SEO ve kullanılabilirlik paketi ayrıca gzip sıkıştırmayı etkinleştirme seçeneklerini de içeren bir çok ayar yapmanızı sağlayan bir eklentidir.
• GZIP sıkıştırmasını kontrol edin ve etkinleştirin : En yaygın CMS WordPress için de geliştirilen bu eklenti, projeniz için gzip sıkıştırmasının etkinleştirilip etkinleştirilmediğini kontrol etmenizi sağlayan eklentidir. GZIP Sıkıştırma kapalıysa, bu eklenti kurulumda size yardımcı olacaktır.

Joomla! kullanıyorsanız web sitenizde sıkıştırma işlevi doğrudan gelmektedir.

NGINX web sunucunuzda gzip nasıl etkinleştirilir

Sitenizin içeriğini ziyaretçilerinize bir NGINX web sunucusu kullanarak teslim ettiğinizde, projenizin yükleme süresini iyileştirmek için gzip işlemini kullanma olanağınız da bulunmaktadır. Bunu yapmak için, yalnızca ngx_http_gzip_module modülünü yapılandırmanız gerekir. Varsayılan olarak sıkıştırma hizmetini etkinleştirmek veya devre dışı bırakmak için kullanılan ‘gzip’ yönergeleri kapalıdır. Bu ayarı değiştirmek için, nginx.conf dosyasını açın ve CTRL + F ile ‘gzip’ yönergesini arayın. Ardından, ‘gzip off’u ‘gzip on’ olarak değiştirin. Aşağıdaki tablo, NGINX gzip sıkıştırmasını yapılandırmak için diğer yönergelerin anlamını ve olanaklarını gösterir:

GZIP ve alternatifleri arasında farklar

Aşağıdaki tabloda gzip’in başlıca alternatifleri arasındaki avantaj ve dezavantajlara değindik.

GZIP’i test edin

Gzıp’i test etmek için Gzıp Test Aracı kısmından site adresinizi girerek gerçekleştirebilirsiniz.

Bilgi

Sitenizde gzip sıkıştırma ile hızlandırma bir noktaya kadar oldukça fazla etkilidir. Fakat; iyi bir sunucu da oldukça önemlidir. İyi bir TTFB değeri için hosting firmalarını hız değerlerine göre listeledik.

Google Lighthouse‘un “Aşırı büyük bir DOM boyutundan kaçının” uyarısı dikkat etmeniz gereken bir performans ölçümüdür. Bunun Belge Nesne Modeli –  The Document Object Model (DOM) konusunu dikkatlice inceleyip, bu yazımızda Türk SEM SEO uzmanlarımız tarafından kullanılan DOM aracını sizlerle paylaşacağız. Büyük bir DOM boyutu performans sorunlarına, bakım sorunlarına ve çok daha fazlasına neden olabilir.

Bu Türk SEM blog yazımızda Google Lighthouse’daki ‘Aşırı büyük bir DOM boyutundan kaçının‘ uyarısını nasıl çözeceğinizi göstereceğiz. Öncelikle, bunun ne anlama geldiğini anlamanıza yardımcı olalım.

DOM Kontrol Aracı

Türk SEM SEO Uzmanları tarafından kullanılan DOM kontrol aracını şimdi herkes kullanabilir. Aracımızda 5 temel DOM kontrolü gerçekleştirilip, düzenlemeniz gereken kısımlar tek tek açıklanmaktadır. Tüm DOM düzenlemelerini görebilirsiniz.

Araç üzerinde uzun süreli çalışmalar yapacaksanız Tüm DOM hataları test aracı sayfasından çalışmalarınızı gerçekleştirebilirsiniz.

“Aşırı büyük bir DOM boyutundan kaçının” uyarısının anlamı nedir?

DOM, esasen sitenizdeki farklı öğelerin bir tür veritabanı veya çıktısı diyebiliriz. Bu veriler başlıklarınızı, paragraflarınızı, resimlerinizi, bağlantılarınızı ve daha fazlasını içerir. Bunun iyi bir görsel temsilini Elementor gibi bir WordPress sayfa oluşturucu eklentilerin kod çıktısı olarak gösterebiliriz.

Genel olarak her Elementor widget’ı tüm ‘DOM ağacı’ içindeki bir öğe olacak şekilde kod açar ve kapatır. Bunu tarayıcınızın DevTools veya Inspect Element ekranlarında görebilirsiniz:

Pagespeed’te DOM ile ilgili bir uyarı aldıysanız şu şekilde olmalıdır.

Aslında mesah oldukça açık: ‘Aşırı büyük bi DOM boyutundan kaçının.’ Lighthouse bu uyarıyı üç alanda bildirir:

• Sayfanın toplam öğe sayısı. DOM ağacında 800’den fazla öğeniz varsa Lighthouse’da bir uyarı görürsünüz.
• En fazla sayıda iç içe geçmiş öğeyi içeren kod parçasını temsil eden bir değer maksimım değerden fazlaysa – maksimum DOM derinliği uyarısı verir.
• Lighthouse ayrıca, HTML öğelerinden ziyade DOM ağacındaki herhangi bir nesne olan ve 60’tan fazla ‘alt’ düğüme sahip bir ana düğüm hakkında da bilgi verecektir.

Ancak, bu metriğin Google Lighthouse için bir ‘Tanı’ olması nedeniyle Performans puanlarınızı doğrudan etkilemediğini söylemeliyim. Ancak DOM değerleri genel Temel Web Vitals’ın bir kısmını etkileyecektir. Boyaya Etkileşim (INP) Temel Web Vital’ın DOM boyutunuzla daha doğrudan bir ilişkisi olacaktır.

“Aşırı DOM boyutundan kaçının” uyarısı nasıl çözülür

1. İyi bir kod tabanına sahip temaları ve eklentileri seçin
2. Görüntüleri optimize etmek ve tembel yüklemeyi uygulamak için Optimole’u kullanmak faydalı olabilir
3. Sayfalandırmayı veya sonsuz kaydırmayı uygulayıp yükü parçalayın
4. Sitenizin öğelerini azaltmak için minimalizm kavramlarını sitenizde kullanın

İşin aslını söylemek gerekirse DOM konusu genellikle WordPress sitelerde tema ile alakalıdır. Sade ve doğru kodlanmamış temalar uzun ve uzun kodlarla DOM konusunda hatalara neden olmaktadır. Bu sayfa açılış süresine de direk etki etmektedir. Türk SEM web sitemiz turksem.com maalesef kullandığı temada DOM konusuna çok fazla önem vermemişler. Bu sebeple DOM değerlerimiz oldukça kötü çıkmaktadır.

Temayı değiştirmek çoğu zaman oldukça fazla zahmetlidir ve bizde bu durumu yaşıyoruz. 3 kere temamızı değiştirmek istedik ama 15 yıllık yayında olmasından dolayı oldukça zahmetli olmaktadır. Fakat; eldeki kesin veri Türk SEM’in web sayfası turksem.com ‘un temasını değiştirmemiz gerektiğidir.

TTFB değeri konusunu da yakın zamanda inceledik, ilgili konumuza da göz atabilirsiniz.

Optimize Edilmiş WordPress Teması ve Katkı Sağlayan Eklentiler

Bir çok araştırmamız sonrasında Neve Themes bizim için oldukça iyi bir seçenek olmuş. Sizde çalışmanızda kullanmak için Neve temasına bir göz atabilirsiniz.

Optimole eklentisi bir çok konuda ki temel ihtiyaçlarınıza fayda sağlayabilir. Litespeed ve Wp Rocket ile entegreli çalışabilir.

Türk SEM SEO araçları sayfamızda yayınladığımız Web Sitesi Hız Testi aracı ile de çeşitli hızla ilgili verilere ulaşabilirsiniz.

Yıl 2002 yılını gösterdiği zamanlarda dünyanın en etkili arama motorları bir web sayfasında 3 temel HTML öğesine bakardı. Bunlar; Title, Meta Açıklama ve Meta Kelimelerdir. Google bir sayfanın tüm içeriğini indexlemeye başlamasından sonra Meta Keywords önemini kaybetmiş fakat; Meta Description önemini kaybetmemişti. Bu yazımızda onca zamandır önemini kaybetmeyen ve neden hala önemli olduğunu anlatacağımız Meta Description (meta açıklama) konusuna değineceğiz. Hemen alt kısımda sitenizin meta açıklamasını kontrol edebilir ve karakter sayısı ile ilgili bilgi alabilirsiniz.

Meta Açıklama Test Aracı

Meta Açıklama Nedir?

Meta açıklama etiketi (Meta Description), bir web sayfası başlığında yer alan ve web sayfasındaki içeriği özetleyen HTML kodunun bir parçacığıdır. Arama motoru optimizasyonu (SEO) gerçekleştirirken meta açıklama etiketlerini kullanmak en iyi uygulamalardan birisi olarak kabul edilir.

Etkili bir şekilde hazırlanmış bir meta açıklama okuyucuları SERP sonuçlarında web sayfanızın aradıkları bilgiyi sağlayacağına ikna etmeye çalışmaktadır. Meta açıklama, SEO açısından meta etiketlerinin Title’den sonra en önemli 2. parçası diyebiliriz.

Örnek Meta Açıklama Kullanımı

Meta açıklamaları genellikle Title kullanımı sonrasına konumlandırılır. Örnek “Meta Description Kodu” kullanımı ise şu şekildedir;

<head>
<meta name = “description” content = “Bu bir meta açıklamasıdır. Burada yazacaklarınız genellikle arama sonuçlarında görünür.”>
</head>

---

Meta Açıklaması Ne Kadar Uzun Olmalıdır?

Geleneksel olarak SERP‘de görüntülenen maksimum karakter sayısı 150-160 arasında değişmektedir. Meta açıklamalar herhangi bir uzunlukta olabilse de Google, snippet’leri 155 ila 160 karakter arasında kısaltır. İdeal olarak meta açıklamaların web sayfasında nelerin anlatıldığını kısaca tanımlaması gerekir. Bunun için yeterince açıklayıcı olmalısınız ve 50 katakter ile 160 karakter arasında bir metni kullanmanızı tavsiye ederiz.

Google’ın güncel meta açıklama uzunluğu 920 piksele kadardır, yani yaklaşık olarak 158 kelimeye tekabül eder. Mobil cihazlarda bu sınır yaklaşık 680 piksel ve 120 karakterdir.

Meta Açıklama Neden Önemlidir?

Google meta kodlarının doğrudan bir faydası olmadığını uzun süre önce açıklamıştı. Meta açıklaması yazsanız bile Google bu açıklamayı bazen kullanmadığını 2009 yılındaki açıklamasında belirtmiş. Bunun nedeninin aratılan ifade ile site içerisinde daha doğru bir cümle yapısı görmesi diyebiliriz.

Google Meta açıklamasını neden önemsiyor;

SERP Sonuçları İçin

Peki; Google işin aslı doğrudan bir faydası olmadığını belirtse de meta açıklamasını neden önemsiyor? Bunun cevabı çok net SERP sonuçlarının daha hoş bir görüntüde olmasını istemesidir.

Metin Olmayan Sayfaların Tanımlanması İçin

Java, Flash vb bazı web uygulamalarında Google site içeriğini tanımlamakta zorlanmaktadır. Bu tarz durumlarda site içeriğini tanımlayacak bir açıklamaya ihtiyaç duymaktadır. Sadece login olan sayfalarda da mesela bir metin bulamayabilir. Bu durumda SEO uzmanının ilgili sayfayı “İstanbul Eczacılar Birliği üyelerinin giriş yaparak üyeliklerine bağlanabileceği login ekranıdır.” gibi bir açıklama girilmesi gerekir.

Tıklanmaya Etkisi

Meta açıklaması bir metin tabanlıdır ve Türkçe dil kurallarına uymalısınız. Meta açıklamınızın dikkat çekici olması, içerikle ilgili merak uyandırması, okumaya devama teşvik etmesi arama motoru sonuç sayfalarında sitenizin tıklanmasını artırabilir. Bu durum da doğrudan olmasa da dolaylı olarak sıralama iyileşme meydana getirebilir.

Güçlü Meta Açıklamasının Püf Noktaları

SEO Uzmanlığı sürecinizde fayda sağlayacak bu bilgileri meta açıklama sürecinizde özümsemeye çalışın.

• Kısa ve öz tutun
• Bir harekete geçirici mesaj (CTA) ekleyin
• Benzersiz tutun
• Konuyu ele alın
• Hedef anahtar kelimeyi kullanın
• Özel karakterlere dikkat edin
• Uzunluğu optimal tutun
• Tırnak (“) işareti kullanmayın

Son madde deki (“) kodlamanın parçası olan işareti kullanmayın. Çünkü ilgili işareti kullanırsanız meta açıklaması kodunun bittiği düşünülebilir.

Türk SEM SEO Derslerinde kullanmak için Türk SEM ekibinin yayınladığı Web Sitelerine Ait IP Adresleri ve IP Adresine ait bilgilerin olduğu sorgulama aracını bu kısımdan kullanabilirsiniz. Bu araç ile IP adresine ait şu bilgilere ulaşabilmektesiniz; Ülke, bölge, şehir, enlem, boylam, ISP, AS. Fiziksel olarak hangi datacenterda barındırıldığına ulaşmış olacaksınız.

Web Sitesi IP Sorgulama ve IP Detayları

Bilgi : Kendinize ait IP adresi ve diğer bilgileri öğrenmek için Kendi IP Adresim bağlantısını takip ediniz.

IP Sorgulama Aracı Hakkında

Bu araç SEO içeriklerimizle ilgili IP konularında ziyaretçilerimizi siteleri hakkında daha fazla bilgi alabilmeleri için oluşturulmuştur. Eğer siteniz Türkçe ve genel olarak Türkiye’de hizmet veriyorsa Türkiye merkezli bir datacenter seçmeniz sitenizin açılış hızında pozitif yansıma gerçekleştirebilir. Yine aynı şekilde hedef ülkeniz İngiltere ise İngiltere’de fiziksel olarak yer alan bir datacenter seçmeniz faydalı olacaktır.

Eğer birden çok ülkeye hizmet vermekdeyseniz CDN düşünebilirsiniz.

Sitenizin hızı sadece bulunduğu lokasyon ile alakalı değildir. Eğer sitenizde bir yavaşlık hissediyorsanız Pagespeed test aracı ile sitenizin ne kadar sürede açıldığını ve hangi nedenlerden dolayı yavaşladığını görebilirsiniz.

Arama motorları bir web sitesinin içeriğini insanlardan farklı şekilde deneyimler. Arama motorları için her benzersiz URL ayrı bir sayfadır. Web sitenizdeki tek bir sayfaya benzer veya benzer içeriğe sahip birden fazla URL ile erişilebiliyorsa, Google bunları aynı sayfanın kopya sürümleri olarak yorumlar. Sonuç olarak Google, içeriğin orijinal ve en önemli parçası olarak bir URL’yi seçecek ve onu dizine ekleyecektir. Bazen bu seçimi hatalı yapar ve yanlış olanı seçer. İşte doğru olan sayfayı belirtmek için Canonical etiketini kullanıyoruz.

Canonical Test Aracı

Bilgi : Test etmek istediğiniz URL adresini tam giriniz. Örneğin; https://example.com/example/example.html

Canonical Tag Ne Demek? Örnek Canonical Kullanımı

Kurallı etiket, yinelenen veya benzer sayfalardaki ana sürümü tanımlayan bir HMTL kod parçasıdır. Şuna benzer:

<link rel=”canonical” href=”https://www.turksem.com/canonical” />

Bu kod parçacığı sayfanın ana sürümünün “href =https://www.turksem.com/canonical” yer alan uzantı kısmıdır.

Bilgi : Canonical etiketi yalnızca aynı veya neredeyse aynı URL’ler için kullanılmalıdır. Konusal gruplandırma için kullanılmamalıdır.

Bu kodu yine örneğin “Canonical Sayfa 2” başlıklı bir içeriğiniz var ve asıl içerik olan “Canonical” sayfasının doğru sayfa olduğunu düşünüyorsunuz. Bu yukarıda yer alan kodu “Canonical Sayfa 2” ve “Canonical” sayfasının her ikisininde içeriğinde yer vermeniz gerekiyor. Eğer 3. bir sayfanız varsa yine aynı şekilde bu içeriklerde ilgili doğru sayfayı belirten Canonical Tag Kodu yer almalıdır.

Canonical etiket, web yöneticilerinin yinelenen içerik sorunlarını çözmesinin ve arama sonuçlarında hangi sürümün dizine eklenmesi gerektiğini belirterek bağlantı eşitliğini ve sıralamalarını korumasının bir yolu olarak büyük arama motorları tarafından 2009 yılında tanıtıldı. Bu konu teknik SEO kapsamında değerlendirilir. 

Canonical Etiketin SEO’ya Etkisi

Canonical SEO için iyidir çünkü Google’ın yinelenen içerikleri anlamasına yardımcı olur ve canonical sürüm olarak yanlış URL’yi seçme riskini en aza indirir. Canonical tag kullanıldığında Google, bağlantı eşitliğini doğru bir şekilde birleştirebilir, dizine ekleyebilir ve içeriğinizin ana sürümünü ilgili sorgular için sıralayabilir. 

Canonical Önemli Bilgiler

Başlangıçta dikkate almanız gereken bazı tavsiyeler:

• Google’ın hangi sayfayı standart sürüm olarak değerlendirdiğini görmek için Google Search Console’daki URL Denetleme Aracını kullanın.
• Yönlendirme veya standart etiket kullanma arasında karar verirken, kullanıcı deneyimi bir şekilde olumsuz etkilenmediği sürece yönlendirmeyi tercih edin.
• Canonical etiketin hangi sayfada kullanılacağını seçerken en önemli olduğunu düşündüğünüz sürümü tercih edin. En doğru sayfa en fazla bağlantıya ve trafiğe sahip URL’dir.
• Canonical etiketi yalnızca aynı veya neredeyse aynı URL’ler için kullanılmalıdır. Konusal gruplandırma için kullanılmamalıdır.

Başlık etiketleri (H etiketleri veya başlık etiketleri olarak da adlandırılır), bir web sayfasındaki içeriğin başlıklarını tanıtmak için kullanılan HTML öğeleridir . Altı başlık seviyesi tanımlamak için H1’den H6’ya kadar bir hiyerarşileri vardır . Böylece H1, diğerlerinin başlayacağı belgenin ana başlığı olacaktır. H6 sonuncusu olabilir, ancak H4’ün ötesine geçmek nadiren gereklidir veya çok çok derin bir mevzuda ihtiyaç oluşabilir.

Şematik olarak H1 etiketinin sayfanın konusu veya ana başlığı olduğunu söyleyebiliriz . H2 alt başlıklardır ve son olarak, H3, H4, H5 ve H6 alt başlıklar içeriği bölümlere ayırarak onlara yapı kazandırır.

Başlık Etiketleri Kontrol Aracı

Bilgi : Bu araç sayesinde sitenizde kullanılan başlık etiketlerini kontrol etmenizi sağlayabilirsiniz. Bazen göden kaçan bir hata yapmış olabilirsiniz, bazen tasarımdan gelen başlık etiketleri sıralama hatalarına neden olmuş olabilir. İçeriğinizi kontrol ederek en doğru şekilde kullanımını sağlayabilirsiniz.

H etiketleri neden önemlidir?

Başlık etiketlerinin önemi, bir web sayfasındaki bir metnin yapısını daha iyi anlamaya yardımcı olmalarıdır . Ayrıca sayfa sıralamasını iki şekilde etkilerler.

Bir yandan başlık etiketleri Google içeriği anlamak ve anlamlandırmak için onlara baktığı için sınıflandırma amacına hizmet eder . Bu nedenle, iyi bir yapı, Google’ın içeriği hedefinizin arama sorgularıyla eşleştirmesini sağlar.

HTML başlık etiketleri , içeriği düzenli bir şekilde sunarak kullanıcı deneyimini geliştirdikçe dolaylı olarak sayfa sıralamasına da yardımcı olur. Kullanıcılar daha sonra aradıklarını kolayca bulabilirler, böylece sayfada daha uzun süre kalırlar (hemen çıkma oranını azaltır).

Bu nedenle başlıkların önemi göz önüne alındığında, bunları doğru kullanmak çok önemlidir. Derinlemesine araştırma yapmanız ve doğru anahtar kelimeleri kullanmanız gerekiyor, ana başlığınızın gerçek altbaşlıkları olduğuna emin olun.

Başlıklar, sayfanın içeriğiyle alakalı ve olabildiğince doğal görünmelidir.

Başlık etiketleri için 7 iyi öneri

Artık başlık etiketlerinin SEO’da neden gerekli olduğunu bildiğimize göre, bunları nasıl doğru bir şekilde uygulayacağımızı görelim :

1- İyi bir yapı oluşturmak için başlıkları kullanın

Başlık etiketleri, makaleye yapı ve bağlam sağlar. Her biri okuyucuya takip eden metinde bulacakları bilgiler hakkında bir ön fikir vermelidir.

2- Başlık Etiketlerinize Anahtar Kelimeler Ekleyin

Google, sayfanın içeriğini anlamak için başlıkları da dikkate alır . Bu nedenle, değerli bir bilgi kaynağı olduklarından anahtar kelimeleri başlık etiketlerine dahil etmek sıralamanızda katkı sağlayabilir.

3- Tek bir H1 kullanın

Birçok kişinin düşündüğünün aksine Google, bir sayfada birden çok H1 kullanmanın SEO‘nuza zarar vermeyeceğini açıklığa kavuşturmuştur. Ancak bu durum okuyucuların H1’leri ana başlık olarak kabul etmeleri nedeniyle bunun iyi bir uygulama olduğu anlamına gelmez ve birden fazla sağlamak kafa karıştırıcı olabilir.

4- İlginç Başlıklar Oluşturun

Sayfanın ilk taslağı daha az dikkat çekici başlıklara sahip olabilir, ancak en çekici başlığı seçmek için beyin fırtınası yapmak çok önemlidir. Bu durum tüm başlıklar için özellikle de H1 için uyulması gereken bir kuraldır .

5- Metni Başlık Etiketleriyle Böl

Metnin okunması kolay olmalıdır çünkü arama motorlarında iyi çalışması daha olasıdır ve iyi okunabilirlik için içerikler iyi yapılandırılmış olmalıdır .

Sosyal medya paylaşımları doğrudan bir sınıflandırma faktörü değildir, ancak bir gönderi ne kadar çok paylaşılırsa, bir sıralama faktörü olan geri bağlantı alma olasılığı o kadar yüksektir.

6- Öne Çıkan Parçacıklar İçin Başlıkları Optimize Edin

Başlık etiketlerinin Google’ın öne çıkan snippet’lerindeki sıralama üzerinde olumlu bir etkisi olduğu görülüyor . İşte bazı umut verici uygulamalar:

• Başlık etiketlerini sesli aramalara uygun uzun kuyruklu anahtar kelimeler için optimize edin ve ardından <p> paragraf etiketleri içindeki metni kullanarak aşağıdaki sorgunun yanıtını sağlayın.
• Farklı liste öğelerini özetlemek için daha küçük başlıklar kullanın. Bu şekilde, numaralı veya madde işaretli liste snippet’leri için daha yüksek bir sıralama şansına sahip olacaksınız.

7- Başlık Etiketlerinizde Tutarlılığı Koruyun

En küçük ayrıntı bile UX’i (kullanıcı deneyimini) etkileyebileceğinden kullanıcılar için tutarlı bir deneyim sağlamanız önerilir . Örneğin; büyük ve küçük harf formatını seçerseniz sitenin her sayfasında aynı şeyi yapmalısınız.

Son not

Başlık etiketleri doğrudan bir sıralama faktörü olmasa da, konumlandırmaya yardımcı olurlar. Bu nedenle hiçbir ayrıntıyı göz ardı etmemenin ve hedef kitleniz için çekici olan düşünceli başlıklar oluşturmanın önemlidir.