چرا استفاده از تگ های سمانتیک باعث بهبود سئو وب سایتمون میشه ؟

    همونطور که در مقاله مهم ترین تگ های تاثیر گذار در سئوی وب سایت اشاره کردیم استفاده بعضی از تگ ها باعث بهبود در سئوی وب سایتمون می شه و یکی از این موارد استفاده از تگ های سمانتیک بودش که در این مقاله قصد بررسی این موضوع رو داریم.در نسخه های اولیه ی HTML اسم مشخصی برای المان ها وجود نداشت و به همین دلیل توسعه دهنده های وب از اسم های دلخواه برای استفاده در پروژه های خودشون استفاده می کردن و این موضوع باعث می شد که موتورهای جستجو به سختی بتونن محتوای وب سایت ها رو ایندکس کنند.

    از این رو در نسخه ی HTML5 که آخرین نسخه ی HTML هستش لیستی از المان های ثابت رو معرفی کرد که به اون ها المان های سمانتیک (معنایی) گفته می شه که به موتورهای جستجو و توسعه دهنده ها کمک می کنه.

    تک های سمانتیک HTML5 هدف استفاده از المان ها رو مشخص می کنن.با استفاده کردن از المان های سمانتیک شما به موتورهای جستجو کمک می کنید تا متوجه بشن که این المان ها به چه قصدی ساخته شده اند و فقط جهت نمایش اون ها نیستش.علاوه بر این کمک میکنن به موتورهای جستجو تا راحت تر صفحات رو بخونن و اطلاعات ضروری رو سریعتر پیدا کنند.

    تگ های غیرسمانتیک :

    تگ های غیرسمانتیک برخلاف تگ های سمانتیک هیچ معنای خاصی ندارند و اینکه هیچ اطلاعاتی در مورد محتوای داخلشون نمی دن.نمونه ای از این تگ ها رو در ادامه مشاهده می کنید.

    <div>
    <span>

    تگ های سمانتیک :

    به طور پیش فرض ربات های موتور جستجو ساختار محتوای سایت شما رو درک نمی کنند.تگ های سمانتیک HTML5 نقش ویژه ای رو دارن و به ما میگن که انتظار چه نوع محتوایی رو باید داشته باشیم.تعدادی از تگ های سمانتیک رو در ادامه بهتون معرفی می کنیم.

    <header>حاوی اجزایی که شما معمولا در بالای صحه دنبالشون می گردید مثل لوگو،منو،دکمه لاگین و غیره</header>
    <nav>حاوی منو</nav>
    محتوای اصلی سایت در این قسمت قرار می گیرد
    <section>حاوی اطلاعات مرتبط که در کنار هم قرار می گیرن یادتون باشه هر وقت از این تگ استفاده کردید حتما باید یکی از تگ های هدینگ رو استفاده کرده باشین</section>
    <aside>محتوای سایدبار ساییتون رو می تونید در این قسمت قرار بدید</aside>
    <footer>فوتر سایت در این قسمت قرار می گیرد</footer>

    نمونه ای از ساختار یک صفحه HTML غیر سمانتیک :

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
        <title>Document</title>
    </head>
    
    <body>
        <div id="header">
            لوگوسایت،منو
        </div>
        <div id="main-content">
            محتوای اصلی سایت
        </div>
        <div id="footer">
            فوتر سایت
        </div>
    </body>

    نمونه ای از ساختار یک صفحه HTML سمانتیک :

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Document</title>
    </head>
    
    <body>
        <header>
            لوگوسایت،منو
        </header>
        <main>
            محتوای اصلی سایت
        </main>
        <footer>
            فوتر سایت
        </footer>
    </body>
    
    </html>
    امین مرعشی

    امین مرعشی

    بیش از دو سال است که در دنیای وب فعالیت می کنم و علاقه مند به یادگیری و استفاده از جدیدترین تکنولوژی های این حوزه می باشم.
    ارسال نظر

    آدرس ایمیل شما منتشر نخواهد شد.