تفاوت div و section و article در سئو (html5 seo)

تفاوت div و section و article در سئو (html5 seo)

تگ‌های معنا گرا (Semantic Tags)

اتفاق مثبتی که در html5 برای بهبود سئو شاهد هستیم ، ارائه تگ های معنایی (semantic tags) است. تگ هایی که بخش بندی های صفحات سایت ما را بهتر به ربات های موتور جستجو معرفی می کنند. تگ div که رایج ترین تگ برای بلوک بندی صفحات است هنوز هم محبوبیت زیادی دارد اما برای رعایت سئو تکنیکال باید از section و article نیز استفاده کنیم. در این مطلب به معناگرایی تگ های html5 می پردازیم.

semantic tag هایی که در html5 معرفی شدند عبارتند از :

<main>

تگ <main> محتوای غالب وبلاگ شامل کلیه مقاله و سایر بخشهای مرتبط با موضوع اصلی صفحه مانند تگ <article> و تگ <section> را درون خودش قرار می دهد.

<section>

عنصر <section> کمی خاص تر از <div> است. تگ سکشن بخش عمومی از مطالب اعمال می شود که می توانند با روشی معنادار با هم گروه بندی شوند.

<article>

تگ <article> نشانه گذاری پست های سایت را بر عهده دارد. موتورهای جستجو با مشاهده این تگ متوجه قرار گرفتن محتوای مقاله در این بخش می شوند.

<aside>

سایدبار وبسایت در این تگ قرار می گیرد و موتورهای جستجوگر با دیدن این تگ متوجه آن می شوند.

<header>

نمایش دهنده قسمت هدر سایت است.

<footer>

نمایش دهنده قسمت فوتر سایت است.

<nav>

فهرست ناوبری یا منو را مشخص می کند.

<video>

ویدیوها درون این تگ قرار می گیرند.

<audio>

فایل های صوتی هم درون این تگ قرار می گیرند.

توضیح تمامی تگ ها در بالا واضح و قابل فهم هستند ، اما درمورد استفاده از سه تگ div و section و article برای بسیار سوال و ابهاماتی وجود دارد که در ادامه به آن ها پاسخ می دهیم.

باید بدانید که برای سئوکارها سه تگ div و section و article اهمیت زیادی برای معرفی محتوا به موتورهای جستجوگر دارد. بنابراین با دانستن تفاوت و کاربردهای این سه تگ به طور دقیق تر و عمیق می توانیم از آن ها به نحو درست استفاده کنیم.

کاربرد تگ <div>

برای مشخص کردن بخش های مختلف سایت از تگ div استفاده می شود. مثل :

[php]

<div id="header">

</div>

[/php]

اما اگر بخواهیم با تگ های معناگرا قسمت هدر را تعریف کنیم باید این کد را به کار ببریم:

[php]

<header>

</header>

[/php]

کاربرد تگ <section>

از آنجا که محتویات یک <section> وقتی در کنار هم قرار می گیرند معنی دارند ، باید یک “موضوع” داشته باشند. “موضوع” <section> باید با درج عنصر عنوان (تگ H) تعریف شود. فرض کنید صفحه ای دارید که در آن لیست مطالب تان به نمایش درمی آید شما باید قسمت مربوط به لیست مطالب را با <section> نشانه گذاری کنید. اگر محتوای درون عنصر از نظر معنایی به هم مرتبط نیستند باید از <div> استفاده کنیم و وقتی با گروه بندی موضوعی از محتوا مواجه بودیم باید از <section> استفاده کنیم.

کاربرد تگ <article>

این تگ صرفا برای نمایش بدنه اصلی محتوا به کار برده می شود. درمورد سایت های وبلاگی ، مقاله کاملا در تگ <article> قرار می گیرد تا موتور جستجو متوجه شود محتوای شما دقیقا در کدام قسمت سایت درج شده است.

شکل های زیر می توانند برای درک بهتر این کدها به شما کمک کنند:

 

سه تگ بالا را با هم نیز می توان به کار برد ، مثال هایی را در ادامه به صورت کد برایتان میزنیم تا نتیجه ملموس تر شود:

[php]

<div class="modal-container">

<section class="modal">

<h1>Modal Title</h1>

Text goes here

</section>

</div>

[/php]

[php]

<section class="newsletter">

<h1>Subscribe to the Newsletter</h1>

<form> </form>

</section>

[/php]

[php]

<article class="post">

<h1>Article Title</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam…

</article>

[/php]

[php]

<article>

<h1>Article Title</h1>

John Smith

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<article>

<h2>Another Article</h2>

Jane Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</article>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</article>

[/php]

[php]

<section>

<h1>Latest Blog Posts</h1>

<article>

<h2>Blog Post Title</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</article>

<article>

<h2>Blog Post Title</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</article>

</section>

[/php]

[php]

<article>

<h1>Sectioning Content in HTML5 – div or section or article?</h1>

<section>

<h2>Overview of the Elements</h2>

<section>

<h3>div</h3>

The div element is the most general purpose element.

</section>

<section>

<h3>section</h3>

The section element is slightly more specific that a div

</section>

<section>

<h3>article</h3>

The article element is even more specific than a section

</section>

</section>

<section>

<h2>div or section or article?</h2>

</section>

<section>

<h2>Combining the Elements</h2>

</section>

</article>

[/php]