هر آنچه باید در مورد HTML5 معنایی و تاثیر آن در سئو بدانید

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

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

مثال‌ها

HTML5 معنایی

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

HTML5 معنایی

اما این‌ها عناصر معنایی هستند و به وضوح نقش محتوای همراه خود را تعریف می‌کنند.

چرا باید از HTML5 معنایی استفاده کنم؟

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

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

HTML5 معنایی

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

HTML معنایی چه شکلی است؟

از جمله مثال‌های HTML معنایی می‌توان به <nav> <footer> و <section> اشاره کرد. تگ‌‌های HTML5 معنایی زیادی وجود دارد که می‌توان از آن‌ها استفاده کرد (مثلا <blockquote> و <em>)، اما من در این مطلب به تگ‌هایی می‌پردازم که برای تقسیم محتوای صفحه قسمت‌های پایه‌ای مورد استفاده قرار می‌گیرند.

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

HTML5 معنایی

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

مثال‌های HTML5 معنایی

مثال‌هایی فوق‌العاده ساده از HTML5 معنایی

در اینجا نقش‌های هر بخش از صفحه به سادگی تعریف شده‌اند. وقتی شروع به استفاده از HTML5 می‌کنید، header، nav، main و footer جای خوبی برای شروع است.

HTML5 معنایی

بهتر است که یک پیاده‌سازی ساده کاملا صحیح داشته باشید تا یک پیاده‌سازی پیچیده نادرست.

یک پیاده‌سازی نادرست می‌تواند سیگنال‌هایی متناقض و گیج‌کننده را به موتورهای جستجو ارسال کند که باعث بدتر شدن اوضاع می‌شود. یک پیاده‌سازی ساده درواقع گامی بزرگ به سمت ارتباط با گوگل و بینگ به حساب می‌آید. بیش از هر بلند پروازی نکنید.

مثال‌هایی پیچیده‌تر

استفاده از section و article

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

HTML5 معنایی

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

Aside مرتبط

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

HTML5 معنایی

Aside مرتبط غیر مستقیم

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

HTML5 معنایی

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

طرح نهایی

طرح نهایی کار را در تصویر زیر مشاهده می‌کنید

HTML5 معنایی

چند توصیه

Section در مقابل Article

بحث‌های زیادی در این زمینه وجود دارد. واقعیت این است که Section و Article هیچ قاعده مشخصی ندارند و پیاده‌سازی آن‌ها بسیار منعطف است. این دو در برخی موارد با یکدیگر یکسان هستند و می‌توانند جایگزین یکدیگر شوند. البته فقط باید مطمئن شوید که منطقی و سازگار هستند.

عناصر تودرتو

عناصر می‌توانند عناصر دیگر را در خود جای دهند. به‌عنوان‌مثال، یک article می‌تواند <header>، <footer>، <h1> و حتی <nav> خود را داشته باشد.

قدم بعدی چیست؟

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

ارتباط

ارتباط با ماشین‌ها- که HTML5 نقش مهمی در آن ایفا می‌کند- یکی از دو ستون اصلی موفقیت استراتژی‌های بلند مدت سئو است. کارهای بسیار زیادی وجود دارد که برای بهبود ارتباط می‌توانید انجام دهید و HTML5 معنایی تنها یکی از آن‌ها است.

نظر شما در مورد HTML5 معنایی چیست؟ آیا از آن استفاده می‌کنید؟ من و دیگر خوانندگان وبلاگ بی‌صبرانه منتظر شنیدن تجربیات شما در این زمینه هستیم.

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *