16.12.2020

HTML5 Semantik Elementler ve HTML5 SEO Etiketleri

    💡 HTML5 SEO Semantik Etiketleri Nelerdir ve Nasıl Kullanılır?

    HTML5 SEO semantik etiketleri, kullanımı hakkında detaylarda, HTML dilinin yeni versiyonunu ifade eden ve daha güçlü web siteleri kurmak için kullanılan yapının HTML5 SEO semantik etiketleri olduğu, çeşitli arama motoru botları için sayfa bölümlerini belirtme yöntemi üzerinden kullanıldığı ifade edilir. Hiçbir görme engeli taşımayan kullanıcılar bir web sitesini olduğu gibi görüntülerler. Ancak görme engeli olan birey için sitenin farklı bir tasarımda inşa edilmesi gerekir.

    Aynı durum Google botları içinde geçerlidir. Birbirlerinden farklı olan botlar, herhangi bir sayfanın ipuçlarını farklı noktalardan yakalarlar. İşte HTML5 SEO semantik etiketleri bu noktada devreye girerek, header, ana içerik, menü gibi önemli bölümleri çeşitli arama motorlarının tanımlamalarına uygun hale taşımak için amacıyla kullanılır. Bu işlem kapsamında sayfanın hangi alanının en önemli nokta olduğu vurgulanarak HTML5 SEO semantik etiketleri kullanılır.

    ❓ HTML5 Nedir?

    HTML5, bilinen HTML (Hypertext Markup Language)’nin en son sürümü olarak ifade edilir. Bu sürüm, sistem içeriğini arama motorlarına daha iyi ifade ederek, yeni semantik etiket elementlerinden yararlanabilmeyi sağlar.

    ➡️ HTML5 SEO Semantik Etiketleri Hangi Yenilikleri Sunuyor?

    HTML5 SEO semantik etiketlerinin yenilikleri şu şekilde sırlanır:

    1. Gelişmiş bir esneklik için yeni ayrıştırma kuralları,
    2. Modası geçmiş niteliklerin elenmesi,
    3. Bir HTML5 belgesinden diğerine semantik etiket sürükleme ve bırakma kolaylığı,
    4. Çevrim dışı düzenleme imkanı,
    5. Mesajlaşma alanlarını geliştirme imkanı,
    6. Ayrıştırma için ayrıntılı kurallardan yararlanma,
    7. MIME protokol işleyici kayıtları,
    8. SQL veritabanında veri depolama işlemi için ortak klasik bir bölüm oluşturma imkanı,

    Tüm bu yenilikler yeni HTML5 SEO ve semantik etiketler ile sunuluyor.

    ➡️ HTML5 SEO Avantajları Nelerdir?

    HTML5 SEO fırsatları şu şekildedir:

    1. Dahili video ve sesleri sayfa içinde oynatabilme,
    2. Önceki sürümlerde gerekli olan üçüncü parti programları kullanmadan işlem yapma,
    3. Web sitesi üzerinde hata paylarını minimize etme,
    4. Temek semantik etiketler ile Google arama motorunda yükselme,
    5. Dağınık HMTL kodlarının web sitesinde neden olduğu temel değişiklik yapma, güncelleme uygulama zorluğunu ortadan kaldırma,
    6. Aktif bir internet bağlantısına gerek duymadan web sayfası içe belirli öğeleri ve semantik etiketleri ekleme,
    7. İnternet bağlantısı ile çalışırken bir kopukluk yaşanda dahi ilgili sayfanın temel özelliklerini rahatlıkla geri yükleme,
    8. Bu kapsamda zamandan tasarruf ederek SEO çalışmaları gerçekleştirmek,
    9. Sayfaya mobil optimizasyon ekleyebilme ve sayfanın yatay kaydırma işlemine gerek duymamasını sağlama,
    10. Semantik etiket ekleme aşamasında büyük ve küçük harf yazım işleminden otomatik duyarlılık modunda yararlanma, hata payını düşürme,

    Tüm bu avantajlar HTML5 tarafından sunulur.

    ➡️ HTML5 SEO Semantik Etiketleri Tasarım İçin Kullanılır mı?

    HTML5 SEO semantik etiketlerinin tasarımda kullanımı yapılmaz. Bu yaygın şekilde yapılan hatalardan biridir. HTML5 SEO semantik etiketleri site tasarımlarının yapılması için değil arama motoruna siteyi en iyi şekilde tanıtmak için tasarlanmışlardır.

    ➡️ HTML5 SEO Semantik Etiketlerinin Özelliği Nedir?

    HTML5 SEO semantik etiketlerinin niteliği, iç içe geçme hareketidir. HTML dilinin en büyük özelliği olan bu iç içe geçme hareketi, bir article elementi kendisine ait header, h1, footer, nav elementi ile tanımlamaya yardımcı olur. Bu kapsamda ana elementin yan elementleri kapsaması sağlanır. SEO uzmanları teknik bilgileri ışında bu iç içe geçmiş semantik öğeleri kullanarak, mükemmel site alanları oluşturmayı hedeflerler.

    Ancak standart bir blog sitesi ve küçük çaplı bir web adresi için bu kadar kompleks HTML5 SEO semantik etiketleri kullanılması gerekmez. SEO açısından da semantik etiket kullanımının bu denli ileri götürülmesinin her hangi bir artısı bulunmaz.

    ⚠️ HTML5 SEO Semantik Etiketleri Neden Önemli?

    HTML5 SEO semantik etiketlerinin önem sebepleri şu şekildedir:

    1. SEO’ya performans katabilmek,
    2. Küçük detayları bir araya getirerek bir bütün oluşturmak,
    3. Botların sayfa içi öğeleri tanımasını sağlamak,
    4. Sayfayı ziyaret eden çeşitli arama motoru botlarını doğru alan yönlendirmek,
    5. Zaten temelde sayfayı en üste taşıma amacı güden SEO çalışmalarını bu kapsamda başarıya ulaştırmak,
    6. Google ile web sitesi arasında en sağlıklı iletişimi kurmak,
    7. SEO için en uyumlu metin ve reklam içeriklerini yaratmak için HTML5 SEO semantik etiketlerini kullanmak önemlidir.

    💎 Semantik HTML5 Etiketleri Nelerdir?

    ⛓ Format Odaklı Yeni HTML5 SEO Semantik Etiketleri Neler?

    Format hedefli yeni HTML5 SEO semantik etiketleri şunlardır:

    • < canvas >: eski < textarea > ile benzer fakat daha işlevsel bir kullanımı olan etikettir. JavaScript ile birleşerek kanvas üstünde farklı şekilleri çizme imkanı sunar. Sayfa üzerinde farklı uzantı tipleri kullanılmak zorunda kalındığında interaktif halden yararlanmak için tercih edilir.
    • < video >: Klasik Flash eklentilerinin yerini gelen < video > elementi ile web adresine video içerik yerleştirebilmeye imkan sağlar.
    • < audio >: < video > etiketi ile aynı niteliklere < audio > elementi yoluyla sayfa üzerine ses dosyası atabilmeye imkan sağlar.

    📝 İçerik Odaklı Yeni HTML5 SEO Semantik Etiketleri Neler?

    İçerik hedefli yeni HTML5 SEO semantik etiketleri şöyledir:

    • < article >: Syfa içindeki ana içeriği belirtmek için kullanılır.
    • < section >: < article > ile en benzer şekilde web adresinde yer alan içerikte alt bölümlerin belirtilmesinde tercih edilir.
    • < header >: Sayfanın doğrudan bir bölümü olarak sayılmayan header bölümünde logo, içerik başlık girişi, navigasyon linki eklemek için kullanılır.
    • < footer >: Sayfada footer alanını belirtmek için tercih edilir. Footer linkleri, copyright bilgileri ve iletişim detayları < footer > içinde yer alırlar.
    • < nav >: Sayfa içi navigasyon bilgilerini belirtir.
    • < aside >: Sayfada ana içerik harici bölümleri belirtmek için kullanılır.
    • < details >: Kullanıcıların gizle ve göster fonksiyonlarını kullanabilecekleri sayfa ek bilgilerinin yer aldığı alanı belirtmek için kullanılır.
    • < summary >: < details > etiketi için görünür ve öne çıkan bir başlığın belirlenmesinde kullanılır.

    ✅ HTML5 SEO Semantik Etiketlerinin Doğru Kullanıldığı Nasıl Anlaşılır?

    HTML5 SEO semantik etiketin doğru kullanımını anlamak için elementlerin site bölümleri hakkında bilgileri arama motoruna doğru iletip iletmediğine bakılır. Arama motorlarına doğru iletimler sağlanıyorsa etiketlerin çalışmasında her hangi bir sıkıntı bulunmaz.

    Sayfalarda basit ama doğruluğundan emin olunan etiket çeşitlerinin kullanılması daha fazla avantaj getirir. Hatalı uygulamalar arama motorlarına karmaşık sinyaller göndererek, işlerin negatif yönde ilerlemesine sebep olabilirler. Bu kapsamda eğer sayfa yapısının anlaşılmasında zorluk çekiliyorsa, basit semantik HTML5 SEO semantik etiketleri uygulanmalıdır. İlk olarak, heder, footer, nav ve main etiketleri tanımlanmalıdır. Arama motoru sitenin içeriğinin ne olduğundan daha çok sitenin kurduğu iletişime bakar. Bu yüzden basit etiketlerin doğru kullanımı, yanlış etiketlerin karmaşık kullanımından daha faydalıdır.

    HTML5 kodlamanızı doğrulamak için ücretsiz olan W3C Markup Validation aracını kullanabilirsiniz: https://validator.w3.org/

    📈 HTML5 SEO Semantik Etiketleri İle SEO Bağlantısı Nedir?

    TML5 SEO semantik etiketleri ve SEO bağlantısı hakkında detaylar şu şekildedir:

    1. Etiketler arama motorlarının sayfayı daha iyi algılamasını sağlayıp, SEO projelerinin amacı olan aram motorunda yükselme şansını beraberinde getirir.
    2. HTML5 SEO semantik etiketleri SEO uyumlu metinlerin yerleştirileceği alanların temelini oluşturur.
    3. Bu etiketler ile sayfaya geçirilen temel SEO çalışması üzerinden sayfaya ilişkin yükseliş oranı incelenir.
    Etiketler Site İçi SEO