{"id":888,"date":"2019-07-24T17:14:44","date_gmt":"2019-07-24T14:14:44","guid":{"rendered":"https:\/\/tukanajans.com\/?p=888"},"modified":"2022-11-08T17:12:38","modified_gmt":"2022-11-08T14:12:38","slug":"daha-iyi-seo-icin-html5-semantik-etiketleri","status":"publish","type":"post","link":"https:\/\/tukanajans.com\/en\/blog\/seo\/daha-iyi-seo-icin-html5-semantik-etiketleri\/","title":{"rendered":"Daha iyi SEO i\u00e7in HTML5 Semantik etiketleri"},"content":{"rendered":"

Semantik Etiket kavram\u0131, dilbilimi fikriyle ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Semantik etiketler; kelimeler, semboller ve i\u015faretler gibi farkl\u0131 g\u00f6stergeler aras\u0131ndaki ba\u011flant\u0131lar\u0131 bulma disiplinidir. HTML bi\u00e7imlendirme dili oldu\u011fundan, semantik bunun \u00e7ok \u00f6nemli bir par\u00e7as\u0131d\u0131r. HTML5 semantik etiketlerini ak\u0131ll\u0131ca kullan\u0131rsan\u0131z, web sitenizi daha eri\u015filebilir hale getirebilir, kullan\u0131c\u0131 deneyimini \u00fcst seviyeye \u00e7\u0131karabilir ve daha iyi arama motoru s\u0131ralamalar\u0131 alabilirsiniz.<\/p>\n\n\n\n

Bu yaz\u0131m\u0131zda, HTML5<\/a> semantik etiketlerinin ne oldu\u011funu ve SEO i\u00e7in neler yapabilece\u011fini g\u00f6rece\u011fiz. Ard\u0131ndan, HTML sayfalar\u0131n\u0131z\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olacak baz\u0131 ipu\u00e7lar\u0131 verece\u011fiz.<\/p>\n\n\n\n

HTML5 semantik etiketler nedir?<\/h2>\n\n\n\n

Asl\u0131nda semantik etiketler HTML varoldu\u011fundan beri hayatta. Sadece HTML5 sonras\u0131 \u00e7ok daha geli\u015ftiler ve bilinir oldular, arama motorlar\u0131 i\u00e7in anlaml\u0131 hale geldiler. HTML4.01 ve \u00f6nceki s\u00fcr\u00fcmlerin t\u00fcm\u00fcnde, sayfalarda gerekli olan <html><\/em> , <head><\/em> ve <body><\/em> etiketlerini de i\u00e7eren baz\u0131 semantik etiketler vard\u0131.<\/p>\n\n\n\n

Biraz daha a\u00e7acak olursak; ba\u015fl\u0131klar <h1><\/em> , <h2><\/em> , <h3><\/em> , <h4><\/em> , <h5><\/em> , <h6><\/em>, s\u0131ral\u0131 ve s\u0131ralanmam\u0131\u015f listeler <ol><\/em>, <ul><\/em> , <li><\/em>, paragraflar <p><\/em>, resimler <img><\/em>, tablolar <table<\/em>><\/em> , <thead><\/em> , <<\/em> tbody><\/em> , <<\/em>tfoot><\/em> , <tr><\/em> , <td><\/em>, form \u00f6\u011feleri <form><\/em> , <fieldset><\/em> , <label><\/em> , <input>, <textarea><\/em> ve ba\u011flant\u0131lar <a><\/em> da asl\u0131nda birer semantik etikettir.<\/p>\n\n\n\n

HTML5, ile birlikte bu etiketlere baz\u0131 eklemeler yap\u0131ld\u0131. Örnek vermek gerekirse; <figure> , <header> , <footer> ve <strong> , <em> ve <mark> gibi birçok yeni semantik etiket ekledi. Ancak, en büyük \u015fey dört bölümleme etiketinin tan\u0131t\u0131lmas\u0131yd\u0131: <article> , <aside> , <nav> ve <section>. HTML sayfalar\u0131n\u0131z\u0131n her biri için anlaml\u0131 bir belge tasla\u011f\u0131 olu\u015fturman\u0131za olanak sa\u011fl\u0131yorlar.<\/p>\n\n\n\n

Semantik etiketler SEO’yu nas\u0131l g\u00fc\u00e7lendirir?<\/h2>\n\n\n\n

Arama motoru s\u0131ralamalar\u0131 nam-\u0131 de\u011fer SEO, bir\u00e7ok farkl\u0131 fakt\u00f6re ba\u011fl\u0131d\u0131r. Google’\u0131n algoritmas\u0131, son birka\u00e7 y\u0131lda kaliteli i\u00e7eri\u011fe daha fazla \u00f6nem verir hale geldi. Sonu\u00e7 olarak, Google ve di\u011fer arama motorlar\u0131nda \u00fcst s\u0131ralarda yer almak istiyorsan\u0131z, d\u00fczg\u00fcn bir \u015fekilde, anlayabilecekleri net bir i\u00e7erik \u00fcretmeniz gerekir. \u0130\u015fte tam da burada HTML5 semantik etiketleri olaya dahil oluyor.<\/p>\n\n\n\n

Varsay\u0131lan olarak, arama motoru botlar\u0131 i\u00e7eri\u011finizin yap\u0131s\u0131n\u0131 anlamaz. Bu botlar\u0131, g\u00f6r\u00fcnt\u00fcleri, sayfa d\u00fczenini ve stil \u00f6\u011felerini g\u00f6rmeyen k\u00f6r bir ki\u015fi olarak d\u00fc\u015f\u00fcnebilirsiniz. Metni okuyabilmelerine ra\u011fmen, i\u00e7eri\u011finizin farkl\u0131 b\u00f6l\u00fcmlerinin birbirleriyle ne kadar ili\u015fkili oldu\u011funu g\u00f6remezler.<\/p>\n\n\n\n

Bu anlams\u0131z yap\u0131ya iki farkl\u0131 yolla anlam ekleyebilirsiniz:<\/p>\n\n\n\n

  • HTML semantik etiketler kullanarak,<\/li>
  • Zengin snippet’ler veya ba\u015fka bir deyi\u015fle, yap\u0131land\u0131r\u0131lm\u0131\u015f veriler olu\u015fturarak.<\/li><\/ul>\n\n\n\n

    Zengin snippet’ler ba\u015fka bir konu oldu\u011fundan, bu k\u0131lavuzda bunu a\u00e7\u0131klamayaca\u011f\u0131z. Ancak, arama motorlar\u0131nda iyi kalitede i\u00e7erik olu\u015fturmak istiyorsan\u0131z, her iki tekni\u011fi de muhakkak kullanman\u0131z gerekiyor.<\/p>\n\n\n\n

    En iyi semantik etiketleri bulun<\/h2>\n\n\n\n

    \u0130lk ba\u015fta HTML5 semantik etiketleme kolay g\u00f6r\u00fcnebilir, ancak ka\u00e7\u0131nman\u0131z gereken baz\u0131 tehlikeler var. Anla\u015f\u0131lmas\u0131 gereken en \u00f6nemli \u015fey, t\u00fcm semantik etiketlerin ayn\u0131 ama\u00e7 i\u00e7in olmad\u0131\u011f\u0131d\u0131r. \u00dc\u00e7 ana semantik etiket t\u00fcr\u00fc vard\u0131r:<\/p>\n\n\n\n

    • Blok seviyesinde b\u00f6l\u00fcmleme elemanlar\u0131,<\/li>
    • Blok seviyesinde b\u00f6l\u00fcmleme yapmayan elemanlar,<\/li>
    • Sat\u0131r i\u00e7i seviye elemanlar\u0131.<\/li><\/ul>\n\n\n\n

      Blok d\u00fczeyinde b\u00f6l\u00fcmleme elemanlar\u0131, arama motoru botlar\u0131 taraf\u0131ndan okunabilen bir dok\u00fcman tasla\u011f\u0131 olu\u015fturur. Daha \u00f6nce de belirtti\u011fimiz gibi:<\/p>\n\n\n\n

      • <article> makaleler veya incelemeler gibi ba\u011f\u0131ms\u0131z i\u00e7erik par\u00e7alar\u0131 i\u00e7in,<\/li>
      • <section> mant\u0131ksal olarak birbirine ait di\u011fer i\u00e7erik bloklar\u0131, \u00f6rne\u011fin sekmeli i\u00e7erikler i\u00e7in,<\/li>
      • <aside> i\u00e7eriklerin yan taraf\u0131ndaki “sidebar” denilen alan i\u00e7in, son olarak da<\/li>
      • Site men\u00fcleri i\u00e7in <nav><\/li><\/ul>\n\n\n\n

        Section \u00f6\u011feleri di\u011fer \u00f6\u011felerden nas\u0131l ayr\u0131\u015ft\u0131r\u0131l\u0131r?<\/h2>\n\n\n\n

        \u00d6\u011feleri b\u00f6lmeyle ilgili ilgin\u00e7 olan \u015fey, t\u00fcm sayfan\u0131n d\u0131\u015f \u00e7izgisinin d\u0131\u015f\u0131nda bulunan i\u00e7eri\u011fi i\u015faretlemeleridir. \u00d6yleyse, section \u00f6\u011felerinin kendi ba\u015fl\u0131klar\u0131 <h1>, <h2>, <h3>, <h4>, <h5>, <h6><\/em>,<\/em> <header><\/em> ve <<\/em>footer> olabilir.<\/p>\n\n\n\n

        Bu b\u00f6l\u00fcmlenmeyen semantik etiketler sadece section eleman\u0131na aittir, ancak t\u00fcm sayfan\u0131n d\u0131\u015f \u00e7izgisine eklenmez. \u0130lk olarak, bu biraz garip gelebilir ama bunu ba\u015fl\u0131k b\u00f6l\u00fcmlerine dikkat ederek anlayabilirsiniz. \u00d6rne\u011fin, bu koda bakal\u0131m:<\/p>\n\n\n\n

        <html>\n   <head>...<\/head>\n   <body>\n        <h1>Sayfan\u0131z\u0131n Ana Ba\u015fl\u0131\u011f\u0131<\/h1>\n        <h2>Sayfan\u0131z\u0131n Alt Ba\u015fl\u0131\u011f\u0131<\/h2>\n        <article>\n              <h1>Makale Bölümünün Ana Ba\u015fl\u0131\u011f\u0131<\/h1>\n              <h2>Makale Bölümünün Alt Ba\u015fl\u0131\u011f\u0131<\/h2>\n        <\/article>\n   <\/body>\n<\/html><\/pre>\n\n\n\n
        Bu çok basit bir kod örne\u011fidir, ancak makale için ayr\u0131 bir <h1> etiketi kullanabilece\u011finizi görebilirsiniz. Bu, <article> sayfas\u0131n\u0131n d\u0131\u015f çizgisinin d\u0131\u015f\u0131nda oldu\u011fu için mümkündür, aksi takdirde ayn\u0131 sayfada iki <h1> etiketi kullanmamal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n
        Header ve footer benzer \u015fekilde davran\u0131r. \u00d6rne\u011fin, <article> etiketi, semantik olarak yaln\u0131zca kendisine ait ayr\u0131 bir <header> ve <footer> i\u00e7erebilir:<\/p>\n\n\n\n
        <html>\n   <head>...<\/head>\n   <body>\n        <header>Sayfan\u0131z\u0131n Header Bölümü<\/header>\n        <article>\n              <header>Makale Bölümünün Header'\u0131<\/header>\n              <p>...<\/p>\n              <p>...<\/p>\n              <footer>Makale Bölümünün Footer'\u0131<\/footer>\n        <\/article>\n        <footer>Sayfan\u0131z\u0131n Footer Bölümü<\/footer>\n   <\/body>\n<\/html><\/pre>\n\n\n\n
        Bu t\u00fcr bir semantik yap\u0131land\u0131rma, arama motorlar\u0131 i\u00e7in her ba\u011f\u0131ms\u0131z blo\u011fu ayr\u0131 varl\u0131klar olarak de\u011ferlendirebildi\u011finden, SEO a\u00e7\u0131s\u0131ndan olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n\n\n
        Metin bloklar\u0131n\u0131n sadele\u015ftirilmesi<\/h2>\n\n\n\n
        Belge yap\u0131land\u0131rmalar\u0131 önemlidir, ancak metin bloklar\u0131n\u0131z\u0131 sade tutmak da önemlidir. Yaln\u0131zca okunabilirlik için de\u011fil, ayn\u0131 zamanda arama motorlar\u0131n\u0131n içeri\u011finizi daha iyi anlamas\u0131na yard\u0131mc\u0131 olur. \u0130çeri\u011fi genellikle “bölmek” için kullan\u0131lan HTML etiketleri, ço\u011funlukla <img> , <figure> , <video>, <audio>, <ul> , <ol> ve di\u011ferleri gibi semantik etiketlerdir.<\/p>\n\n\n\n
        \u0130\u00e7erik, kullan\u0131c\u0131 deneyiminin \u00f6nemli bir k\u0131sm\u0131d\u0131r. \u0130lgi \u00e7ekici bir i\u00e7erik yazmak yeterli de\u011fildir, ayr\u0131ca kullan\u0131c\u0131lar\u0131n ve arama motorlar\u0131n\u0131n anlayabilece\u011fi \u015fekilde sunman\u0131z gerekir.<\/p>","protected":false},"excerpt":{"rendered":"
        Semantik Etiket kavram\u0131, dilbilimi fikriyle ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Semantik etiketler; kelimeler, semboller ve i\u015faretler gibi farkl\u0131 g\u00f6stergeler aras\u0131ndaki ba\u011flant\u0131lar\u0131 bulma disiplinidir. HTML bi\u00e7imlendirme […]<\/p>","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[114],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/posts\/888"}],"collection":[{"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/comments?post=888"}],"version-history":[{"count":0,"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/posts\/888\/revisions"}],"wp:attachment":[{"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/media?parent=888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/categories?post=888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tukanajans.com\/en\/wp-json\/wp\/v2\/tags?post=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}