SEO İçin Düzgün Kullanılan Web Öğeleri

Son Güncelleme 16 Ocak 2019

Çoğu web sayfası HTML, CSS ve JavaScript olmak üzere 3 temel öğeden oluşur. Bu yapı taşları, onları oluşturmak için ne kullanırlarsa kullansınlar tüm web sayfalarını oluştururlar. Her web öğesinin uygun yeri vardır. Bazı örtüşmeler olsa da, bunları bilerek kullanmak SEO için optimize edilmiş bir sayfa oluşturmaya yardımcı olur. Peki bu unsurlar nasıl kullanılmalı ve bunların kötüye kullanılmasının bazı yolları nelerdir?

Temel web öğesi işlevleri

Bir web sayfasını bir evle karşılaştıralım. Bir evin, her biri yerinde ve amacına hizmet eden birkaç bölümü vardır. Web sayfamızdaki HTML, yapısal web elemanlarına, kafes kirişlere, duvarlara, temele benzer. HTML, sırasını ve hangi öğelerin nerede göründüğünü özetleyen önemli sayfa içeriği düzeni sağlar.

Stil için CSS kullanılmalıdır. Ev resmine sadık kalırsak, bu, duvarlarınızın rengi, dolaplarınız, ne tür bir döşemeye sahip olduğunuz vb. olacaktır. Sayfanızın renkleri, yazı tipi boyutları, sayfanın gerçek düzeni de CSS'de tanımlanabilir. Ama bekle, düzen HTML'de olmamalı mı? İyi soru. HTML, sayfanızda olacak öğeleri düzenlerken, CSS bu öğelerin o sayfada nasıl görüntüleneceğini kontrol etmelidir. CSS, web'in duyarlılığının çoğundan sorumludur.

Artık eviniz inşa edildiğine göre, elektriğiniz ve akan suyunuz gibi bazı hizmetlerin zamanı geldi. JavaScript, tıklandığında öğelerin değiştirilmesi, verilerin görüntülenmesi vb. gibi sayfanızın etkileşimli öğeleri için kullanılmalıdır. JavaScript, sayfanızı belirli bir hedef kitleye veya kullanım durumuna göre uyarlıyorsanız iyi çalışan tüm görünümünü ve verdiği hissi değiştirmek için kullanılabilir.

Neden onları ayıralım?

Öyleyse, hem düzen için HTML ve CSS'yi hem de stil için JavaScript ve CSS'yi kullanabiliyorsanız, neden onları ayırıyorsunuz? Google sayfanızı dizine eklediğinde, sayfanızın ne hakkında olduğuna ve nasıl çalıştığına dair temel göstergeler arar. Öğelerden birini uygunsuz kullanırsanız, yanlış sinyaller gönderebilir ve sıralamalarınıza zarar verebilirsiniz. Bu, genellikle öğeler için ön ayarları kullanarak stil veren veya CSS'de yapılabilecek şeyleri yapmak için sayfaları yavaşlatan gereksiz JavaScript çalıştıran CMS düzenleyicileriyle çalışırken ortaya çıkabilir.

Öyleyse, bazı yaygın yanlış kullanımları gözden geçirelim.

Başlık etiketlerini yanlış kullanma

En yaygın yanlış kullanımlardan biri, web öğelerine stil vermek için başlık etiketlerinin kullanılmasıdır. Başlık etiketleri, en önemli H1 etiketinden (her sayfada olması gereken) H6'ya kadar bir sayfadaki ana konuları ana hatlarıyla belirtir. Öğeleri biçimlendirmek için kullanıldığında, Google'a bu kelimelerin sayfanızın neyle ilgili olduğunu söylüyorsunuz. Veya yanlış başlık etiketi kullanıyor olabilirsiniz (yazı tipi boyutunu daha çok beğendiğiniz için h2 yerine h3 kullanmak gibi). Her iki durumda da yanlış mesajı gönderiyorsunuz. Bunun yerine, öğeleri istediğiniz uygun boyuta veya yazı tipine göre biçimlendirmek için CSS kullanmalısınız.

Çift H1 etiketleri

Diğer bir yaygın sorun, bir sayfada 2 veya daha fazla H1 etiketinin bulunmasıdır. H1 etiketiniz sayfanın ana fikri olmalıdır; sayfayı ziyaret eden herkese (ve her tarama botuna) sayfanın neyle ilgili olduğunu söylemeli ve bu nedenle yalnızca bir tane olmalıdır. İki H1 etiketine sahip olmak, sayfada iki farklı sinyal göndermek gibidir. Bazı insanlar ve hatta profesyonel temalar, logolarını bir H1 etiketine koyma eğilimindedir. Bu nedenle, her sayfada yalnızca bir tane olduğundan emin olmak için dikkatli olun.

Tüm resimler arka plan resimleridir.

Bir görüntü arka planına sahip olmanın yanlış bir tarafı yok. Görseller dikkat çekicidir ve sitenize çok fazla değer katabilir ve kullanıcıların ürün veya hizmet satın almasını sağlayabilir. Ancak tüm resimleriniz arka plan resimleri olmamalıdır. Son zamanlarda bir sitede çalışırken, CMS'nin tüm resimleri arka plan resimlerine çevirdiğini buldum. Buradaki amaç, onları daha kolay biçimlendirmek ve yeniden boyutlandırmaktır. Daha iyi görünmesini sağlasa da, sayfanızdaki resimlerin avantajının hayati bir bölümünü kaybedersiniz: alternatif metin. Alternatif metin, resimde ne olduğunu açıklar ve ekran okuyucular tarafından resimde ne olduğunu belirlemek için kullanılır. Tüm resimlerinizi arka plan resimleri yaparak, sayfanın erişilebilirliğini azaltarak engelli kişilerin işini zorlaştırır ve sıralamalarınızda Google'dan bir hit alabilirsiniz.

JavaScript ile CSS Oluşturma

JavaScript aracılığıyla gereksiz yere CSS sunmak, sayfalara yükleme sürelerini artırır. CSS dosyasını bu ekstra adımdan geçirmek yerine başlıkta bağlamak çok daha iyidir. Ayrıca, basit animasyonlar veya fareyle üzerine gelme efektleri için JavaScript kullanmak, CSS aracılığıyla çok daha hızlı yapılabildiğinde yükleme süresini artırır. Gerekmediğinde JavaScript çerçeveleri eklemek bile yükleme sürelerini artırabilir. Bir düğmeyi canlandırmak için jQuery yüklemek gibi. Vanilya JavaScript'i yazmak veya daha da iyisi, CSS'deki animasyon öğelerini veya hatta bir CSS animasyon stil sayfasını kullanmak yerine çok daha hızlı yüklenir.

Web öğelerini HTML'de şekillendirme

Öğeleri doğrudan HTML dosyasında şekillendirmek tartışmalı bir konudur. WordPress ve diğer CMS'lerdeki birçok tema ve eklenti, sürekli olarak stil sayfalarının ve diğer eklentilerin üzerine yazmaya dayanır. Bu genellikle kötü bir uygulama olarak görülür. Bazı içerik oluşturucular, tema stillerini değiştirmek istedikleri için stilleri doğrudan içeriklerine yazar. Bununla ilgili sorun nedir? Doğrudan HTML öğelerine yazılan stiller CSS dosyasındaki stillerin üzerine yazdığında genellikle CSS sorunlarına neden olur. Bunu önlemek için, doğrudan HTML'ye yazmak yerine, web öğelerine bir sınıf atayın ve stilleri eklediğiniz yeni bir stil sayfası ekleyin. Bu, sitenizi yanlış şekilde bozabilecek veya biçimlendirebilecek çakışan sayfalarla ilgili sorunları önleyebilir.

Düzenleri şekillendirmek için HTML kullanma

Bu biraz zor çünkü temalar genellikle CSS Seçicileri HTML Yapısı ile birleştirir. Bu, bir kişinin, sayfayı okunabilir ve işlevsel hale getiren önemli stilleri bozmadan HTML yapısında değişiklik yapmasını zorlaştırır. Örneğin:

Örnekte, öncekinin HTML'sinin yapısını değiştirirseniz, yapıya bağlı olduğu için o öğenin tüm stillerini kaybedersiniz. Bunun yerine, daha sonra sınıflar aracılığıyla olduğu gibi, stili yapıdan ayırmak, HTML yapısını değiştirseniz bile CSS'nizi yeniden kullanmanıza izin verecektir.

Düzgün biçimlendirilmiş bir sayfa, iyi optimize edilmiş bir sayfadır.

Sayfanızın içeriği, sıralamalarda büyük bir faktördür. Web sayfası öğelerini doğru şekilde kullanmak da öyle. Özellikle, HTML, CSS ve JavaScript, sayfanızın SEO'sunu optimize etmede eşit derecede büyük bir rol oynar. Her bir web öğesinin rolünü bilerek ve uygun şekilde kullanarak sıralamanızı yükseltebilirsiniz. Basitçe hem işlevsel hem de çekici bir sayfa oluşturun. Bir CMS için tema değiştirmeyi veya sayfalarınıza özel CSS veya JavaScript eklemeyi düşünüyorsanız, ikinci bir göz atın ve web öğelerinizi doğru kullandığınızdan emin olun.