راهنمایHTML5 Semantics برای سئو بهتر

مفهوم "معنادار" یاSemantics  از حوزه زبان شناسی ‌‌می‌آید. این کلمه به معنی "مطالعه معنا" است. بنابراین، معناشناسی، رشته‌ای برای یافتن ارتباط بین نشانه‌‌های مختلف از قبیل کلمات، نمادها و علائم است.

HTML یک زبان نشانه‌گذاری است که به جای  زبان برنامه نویسی، معناشناسی بخش مهمی ‌از آن است. اگر از  HTML5 معنادار استفاده ‌‌می‌کنید، ‌‌می‌توانید وب سایت خود را بیشتر در دسترس قرار دهید، تجربه کاربر را بهبود بخشید، و همچنین رتبه‌بندی خود را برای موتورهای جستجو بهتر کنید.

در این مقاله سعی کرده‌ایم که شما را با مفهموم Html معنادار آشنا کنیم تا بتوانید در راستای بهبود سایت خود، آن را به کار ببرید. همچنین راه حل‌‌هایی ارائه خواهیم داد تا به وسیله آن کدهای html معنادار بهتری وارد کدهای خود کنید.

Html5 معنادار چیست؟

معناشناسی از ابتدا به عنوان بخشی جدایی ناپذیر از HTML بوده است. با این حال، پس از معرفی HTML5 به طور گسترده‌ای مورد توجه قرار گرفت.

 کمتر دیده شده که HTML4.01 و نسخه‌‌های قبل از آن شامل برچسب‌‌های معنادار باشند، از جمله مهم‌‌ترین برچسب‌‌های html، head وbody  هستند که در همه صفحات HTML مورد نیاز ‌‌می‌باشند.

علاوه بر این، تگ‌‌های HTML دیگری نیز دارای معنا هستند، مانند عنوان (h1، h2، h3، h4، h5، h6)، لیست‌‌های مرتب شده و نامرتب (<ol> <ul> <li>)، پاراگراف‌ها (<p>)، تصاویر (<img>)، جداول (<table>  <thead>  <tbody>  <tfoot>  <tr>  <td>)، عناصر فرم (<form>  <fieldset>  <label>  <input>  <textarea>) و لینک‌ها (<a>).

در html5 عناصری جدیدی به عنوان تگ‌‌های معنادار اضافه شده‌اند، مانند: <figure>  <header>  <footer> و <article>  <aside>  <nav> و <section>. این تگ‌ها به شما اجازه ‌‌می‌دهند تا مستندی کاملا معنادار برای برای صفحات  html خود ایجاد کنید.

چگونه Semantics ‌‌می‌تواند SEO را بهبود بخشد؟

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

 اگر ‌‌می‌خواهید در Google و دیگر موتورهای جستجو بالاترین رتبه را داشته باشید، باید محتوای دقیقی بنویسید که بتوان به درستی آن را درک کرد. اینجاست که HTML5 Semantics روی کار ‌‌می‌آید.

به طور پیش فرض، ربات‌‌های موتور جستجو ساختار محتوای شما را درک نمی‌کنند. شما ‌‌می‌توانید در مورد آن‌ها به عنوان یک فرد کور فکر کنید که تصویر، طرح و عناصر ظاهری را نمی‌بیند.

 اگر چه آن‌ها ‌‌می‌توانند متن را بخوانند (بهینه سازی کلمات کلیدی هنوز مهم است)، اما آن‌ها نمی‌بینند که چگونه قسمت‌‌های مختلف محتوای شما به یکدیگر مرتبط است. شما ‌‌می‌توانید به این ساختار بی‌معنی به دو روش مختلف معنایی اضافه کنید:

1. استفاده از HTML5 Semantics
2. از طریق بخش‌‌های غنی یا، به عبارت دیگر، داده‌‌های ساخت یافته.

استفاده از بخش‌‌های غنی rich snippets بحثی کاملا مجزاست و ما نمی‌خواهیم در این مقاله در مورد آن صحبت کنیم، با این حال، اگر ‌‌می‌خواهید محتوای با کیفیتی را که در موتورهای جستجو رتبه خوبی داشته باشد، ایجاد کنید، باید هر دو تکنیک را به کار ببرید.

بهترین عناصر معنادار را پیدا کنید

 HTML5 Semantics،در ابتدا آسان به نظر ‌‌می‌آید، با این حال،مشکلاتی وجود دارد که شما باید از وقوع آن‌ها جلوگیری به عمل آورید. مهم‌ترین موضوع قابل درک این است که همه تگ‌‌های معنادار  برای یک هدف واحد نیستند. سه نوع اصلی از تگ‌‌های معنادار وجود دارد:

1. عناصر بخش‌بندی شده block-level
2. عناصر بخش‌بندی نشده block-level
3. عناصر inline-level

عناصر بخش‌بندی شده block-level، یک طرح سند را ایجاد ‌‌می‌کنند که توسط ربات‌‌های موتور جستجو قابل خواندن است. که در زیر 4 نوع آن را بررسی ‌‌می‌کنیم:

• Article: بخش‌‌های مستقلی هستند، مانند مقالات.
• Section: برای نشانه‌گذاری بلوک‌‌های محتوایی که به طور منطقی متعلق به یکدیگر هستند.
• Aside: برای سایدبار مورد استفاده قرار ‌‌می‌گیرد.
• Nav: برای بخش‌‌های navigation استفاده ‌‌می‌شود.

تگ <main> یک عنصر بخش‌بندی نیست، با این حال باز هم یک عنصر معنادار محسوب ‌‌می‌شود. شما ‌‌می‌توانید چهار عنصر بخش‌بندی را هر بار به صفحه HTML خود اضافه کنید. اما از تگ <main> بیش از یکبار ن‌‌می‌توانید استفاده کنید.

چگونه عناصر بخش‌بندی از طرح سند حذف ‌‌می‌شوند؟

چیز جالبی که در مورد عناصر بخش‌بندی وجود دارد، این است که آن‌ها محتوایی را که خارج از طرح کلی صفحه هستند نشانه‌گذاری ‌‌می‌کنند. بنابراین، عناصر بخش‌بندی ‌‌می‌توانند عناوین(header)، سرصفحه‌‌ها(heading) و پاورقی (footers)های خود را داشته باشند.

این تگ‌‌های معنادار بخش‌بندی شده متعلق به عناصر بخش‌بندی هستند، اما به طرح سند ما اضافه نمی‌شوند. شاید این موضوع کمی ‌عجیب به نظر ‌‌می‌آید، اگر به قطعه کد زیر توجه کنید متوجه این موضوع خواهید شد:

<html>
   <head>...</head>
   <body>
        <h1>عنوان صفحه</h1>
        <h2>موضوع صفحه</h2>
        <article>
              <h1>عنوان مقاله</h1>
              <h2>موضوع مقاله</h2>
        </article>
   </body>
</html>

این مثالی بسیار ساده است، همانطور که ‌‌می‌بینید، شما ‌‌می‌توانید از یک تگ h1 جداگانه برای مقاله استفاده کنید.

این کار شدنی است، چرا که تگ article جدای از عنوان صفحه است. در واقع منظور این است که شما نمی‌توانید از دو تگ h1 به طور همزمان در یک صفحه استفاده کنید.

سرصفحه‌ها و پاورقی‌ها (Headers and footers)، رفتار مشابهی دارند. برای مثال، تگarticle  ‌‌می‌تواند یکheader  وfooter  جداگانه داشته باشد، بدان معنا که فقط به آن article تعلق دارد (اما از طرح کلی صفحه حذف ‌‌می‌شود):

<html>
   <head>...</head>
   <body>
        <header>هدر صفحه</header>
        <article>
              <header>هدر مقاله</header>
              <p>...</p>
              <p>...</p>
              <footer>فوتر مقاله</footer>
        </article>
        <footer>فوتر صفحه</footer>
   </body>
</html>

این نوع تفکیک معنایی، از نظر SEO بسیار مفید هستند، زیرا موتورهای جستجو ‌‌می‌توانند بلوک‌‌های موجود شما را به عنوان بخش‌‌های جداگانه اداره کنند.

از عناصر بی‌معنای (Non-Semantic) درست استفاده کنید

علاوه بر عناصر معنادار، اگر شما بخواهید در رتبه‌بندی برای موتورهای جستجو خوب عمل کنید، باید به برچسب‌‌های بی‌معنا توجه داشته باشید. برچسب‌‌های بی‌معنا نیز اهداف خود را دارند. آن‌ها ‌‌می‌توانند زمانی مورد استفاده قرار گیرند که شما فقط برای ظاهرِ طراحی خود از آن ها استفاده می‌کنید.

به عنوان مثال، هنگا‌‌می‌که ‌‌می‌خواهید یک left margin را به گروهی از محتوا اضافه کنید که با یکدیگر ارتباط ندارند، باید یک کلاس HTML را معرفی کنید تا بتوانید با CSS آن را استایل دهی کنید. 

در این زمان استفاده از تگ نامتعارف div، بهترین انتخاب است، چرا که معنای ساختاری را به گروه اختصاص نمی‌دهد. تگdiv  یک عنصر inline-level است.

بسیاری از مواقع، تصمیم‌گیری درباره این که آیا شما نیاز به یک عنصر معنادار یا بی‌معنا دارید یا خیر، آسان نیست. 

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

خوانایی بلاک‌‌های متنی خود را حفظ کنید

درست است که زیبایی ظاهری سایت اهمیت دارد، اما موضوع مهم‌‌تر، خوانایی مطالب شماست.

حفظ خوانایی مطالب نه تنها به خواننده امکان بررسی مقالات شما در یک نگاه را ‌‌می‌دهد، بلکه به موتورهای جستجو این توانایی را ‌‌می‌دهد تا درک بهتری از مطالب شما داشته باشند.

تگ‌‌های Html، با شکستن محتوا به بخش‌‌های قابل درک، این کار را برای شما عملی ‌‌می‌کنند. تگ‌‌هایی مانند <figure> ،<video> ،<audio> ،<ul>، <ol> به شما برای داشتن محتوایی بهتر، کمک ‌‌می‌کنند.

کلام آخر

استفاده از HTML5 semantics گام بسیار موثری برای رسیدن به محتوایی مناسب و قابل رتبه‌بندی است. پس ارزش آن را در سایت خود در نظر بگیرید.

منبع