استفاده از عناصر Semantic HTML باعث می‌شود تا محتوا و قسمت‌های مختلف یک صفحه وب به طور واضح برای موتورهای جستجو تعریف شوند. نوشتن محتوا به گونه ای که برای موتورهای جستجو قابل فهم باشد سبب می شود تا مطالب بر اساس موضوعات و زیرمجموعه ها سازماندهی گردند.
استفاده از Semantic HTML، به موتورهای جستجو نشان می‌دهد محتوایی که می‌خواهید در نتایج جستجو نمایش داده شود، در کدام بخش قرار گیرد. به همین دلیل باید آن را برای سئو و دسترسی‌پذیری وب سایت در نظر گرفت. Semantic HTML عاملی برای رتبه‌بندی صفحات وب در موتورهای جستجو نیست اما با به کارگیری آن، موتورهای جستجو به راحتی می‌توانند محتوای اصلی یک صفحه را شناسایی کنند که نکته ای بسیار مثبت است.
تصویر(1)
تمرکز موتورهای جستجو بر محتوای اصلی
دستورالعمل‌های ارزیابی کیفیت جستجوی گوگل تفاوت بین سه نوع محتوا در یک صفحه وب را بیان می‌کنند.
- محتوای اصلی
- محتوای تکمیلی
- محتوای تبلیغاتی
محتوای اصلی
محتوای اصلی همان محتوایی است که موتورهای جستجو می خواهند ایندکس و رتبه‌بندی کنند.
محتوای تکمیلی
محتوای تکمیلی، مانند ناوبری سایت مفید است اما این نوع محتوا برای موتورهای جستجو جهت ایندکس کردن اهمیت چندانی ندارد.
محتوای تبلیغاتی
محتوای تبلیغاتی نیز هدف موتورهای جستجو برای خزیدن صفحات وب نیست.
مفهوم ساختار صفحه - Semantic HTML
قانون اول سئو، ساده‌سازی صفحات وب برای درک بهتر توسط موتورهای جستجو است. Semantic HTML می‌تواند به عنوان سازوکاری برای سطح‌بندی محتوای بنیادی صفحات وب عمل کند، به طوری که ساختار کلی صفحه وب را در سه بخش (محتوای اصلی، محتوای تکمیلی و محتوای تبلیغاتی) سازماندهی نماید.
Semantic HTML، به معنای استفاده از تگ‌ها و عناصر HTML است تا بتواند مفهوم و ساختار صفحه وب را بهتر بیان کند.
ساختار معمولی یک صفحه وب به صورت زیر است:
- Header (قسمت بالایی به همراه لوگو)
- Navigation یا ناوبری
- محتوای اصلی
- پاورقی یا فوتر
در هنگام ایندکس یک صفحه وب، موتورهای جستجو به ناوبری، فوتر، تبلیغات، نوارهای کناری یا هدر اهمیتی نمی‌دهند و به محتوای اصلی علاقه‌مند هستند.
تصویر(2)
عنصر <main> در HTML
با استفاده از عنصر <main> در HTML، می‌توانید مشخص نمایید که کدام بخش از محتوای صفحه وب باید ایندکس شود. عنصر <main> دارای تگ باز (<main>) است که مشخص می‌کند محتوای اصلی از کجا شروع می گردد. همچنین یک تگ پایانی (<main/>) دارد که نشان می‌دهد محتوای اصلی تا این تگ ادامه می یابد. هر صفحه وب تنها می‌تواند یک بخش <main> داشته باشد. بدین ترتیب، موتورهای جستجو می توانند به محتوای اصلی دسترسی پیدا کرده و آن را ایندکس کنند.
عناصر <header> <nav> و <footer>
چند عنصر دیگر در Semantic HTML وجود دارند که برای تقسیم یک صفحه به اجزای تشکیل‌دهنده، استفاده می‌شوند. این اجزا شامل عناصر <header> <nav> و <footer> هستند.
<header>
عنصر <header> می تواند برای نمایش بخش بالایی صفحه که معمولا شامل لوگوی سایت و نوار جستجو است، استفاده شود. معمولا این بخش در بالای ناوبری قرار دارد. همچنین عنصر <header> می‌تواند عناوین H1، H2 و … را نیز در بر گیرد.
<nav>
برای ایجاد ناوبری در صفحه، از عنصر <nav> استفاده کنید. این عنصر به مرورگر می گوید که محتوای داخل آن مربوط به ناوبری صفحه است. عنصر <nav> در HTML برای قرار دادن منوها و نوارهای ناوبری استفاده می‌شود. به عنوان مثال، اگر می‌خواهید یک ناوبری را درون عنصر <div> قرار دهید، می‌توانید عناصر <nav> را درون <div> ایجاد کنید.
مثال
<div>
<nav> main navigation links and stuff</nav>
</div>
در صورت به کار بردن <nav>، استفاده از عنصر <div> ضروری نیست. در واقع، هر دو عنصر <div> و <nav> قابلیت قرار دادن محتوا را در خود دارند و در تمامی مرورگرهای مدرن به یک شکل کار می‌کنند.
با این حال، استفاده از عنصر <nav> به عنوان یک عنصر semantic برای قرار دادن ناوبری در صفحه وب توصیه می‌شود. این کار به بهبود قابلیت دسترسی و سئو کمک می‌کند.
<footer>
تگ <footer> مشابه تگ <nav> است، بدین معنا که می توانید محتوایی مانند عکس، لینک و ویدئو را داخل آن قرار دهید.
Semantic HTML برای محتوای تکمیلی
محتوای اصلی بخش مرکزی صفحه است که موضوع و مطلب اصلی را تشریح می‌کند و سایر عناصر مانند نوار کناری و تبلیغات تنها قسمت های جانبی هستند. Semantic HTML دارای یک تگ به نام <aside> است. تگ <aside> شروع و پایان محتوا را نشان می دهد.
تصویر(3)
عنصر <article> در Semantic HTML
عنصر <article> می‌تواند درون عنصر <main> قرار گیرد اما برعکس آن امکان پذیر نیست. با این حال، ساده‌ترین و کاربردی‌ترین استفاده از عنصر <article> در یک صفحه، دسته‌بندی محتوا است که در آن عناوین و خلاصه‌های صفحات مختلف وجود دارند.
عناصر HTML Semantic متعددی وجود دارند
حدود 100 عنصر Semantic وجود دارد اما نیاز نیست تمامی آنها را مورد استفاده قرار دهید. حداقل باید عناصر <main> و <aside> در صفحه تعبیه شوند. بهتر است از عناصر <header> ،<nav> و <footer> نیز استفاده کنید زیرا این عناصر در ایجاد یک نمای کلی از صفحه وب کاربردی هستند.
جمع بندی
همانطور که بیان شد، استفاده از عناصر Semantic HTML باعث می‌شود تا محتوا و قسمت‌های مختلف یک صفحه وب به طور واضح برای موتورهای جستجو تعریف شوند. همچنین برای سئو باید صفحات وب را به گونه ای طراحی کنید که برای موتورهای جستجو قابل درک باشند.