راهنمای جامع تگ های معنایی در HTML مخصوص سئوکاران

تصور کنید که یک راننده هستید و وارد چهارراه پر پیچ و خمی می‌شوید. یک چهارراه معمولی اما با یک تفاوت بزرگ. در این چهار راه خبری از خط کشی خیابان، چراغ‌های راهنما و تابلوهای راهنمایی و رانندگی نیست. چه حالی به شما دست می‌دهد؟ آیا دچار سرگشتگی نمی‌شوید؟ تگ های معنایی یا همان Semantic Tags مانند همین خطوط راهنما در چهار راه فرضی ما عمل می‌کنند. تگ های معنایی html عناصری ضروری در هر وب‌سایتی است که فرصت درک ساختار و هدف هر صفحه را به‌دست می‌دهد. اگر کنجکاوید که درباره تگ‌های سمانتیک و اهمیتش در سئو بیشتر بدانید، با من سحر محمدی همراه شوید که در این بخش از آموزش سئو منتوریکس درباره تگ‌های معنایی در HTML بیشتر صحبت کنیم.

تگ‌ های معنایی HTML چیست و چرا اهمیت دارند؟

در ابتدای تولد HTML، ساختار صفحات وب عمدتاً با استفاده از تگ‌های عمومی مانند <div> و <span> تعیین می‌شد. این تگ‌ها قابلیت‌های طرح‌بندی اولیه را ارائه می‌کردند، اما هیچ اطلاعاتی در مورد محتوای درون خود منتقل نمی‌کردند. در نتیجه، صفحات وب اغلب مجموعه‌ای از محتوای بدون ساختار بود، که هم تفسیر را برای موتورهای جستجو و هم حرکت را برای کاربران دشوار می‌کرد.

سال 1999، سال مهمی برای تغییرات ساختاری و معنایی صفحات وب در HTML بود. در این سال نسخه‌ی 4.01 HTML معرفی شد. درست در همین زمان تگ های معنایی در html نیز برای اولین بار معرفی ‌شدند. خب در ابتدا تعداد این عناصر معنایی در ساختار HTML کم بود و شامل عناصری زیر می‌شد:

• <table>
• <form>
• <frameset>

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

تگ های معنایی عناصری از HTML هستند که به‌وضوح نقش یا هدف محتوا را مشخص و توصیف می‌کنند. این تگ‌ها مانند سایر تگ‌ها به صورت < > و < /> نوشته می‌شود و پیش و پس از المان‌های محتوایی می‌آید. به عنوان مثال تگ < header> نشان‌دهنده‌ی بخش ابتدایی یک صفحه است در حالی‌که تگ < article> توصیف کننده محتوایی مستقل در نظر گرفته می‌شود.
این تگ‌ها اطلاعاتی را در مورد محتویات خود ارائه می‌کنند که مرورگرها، موتورهای جستجو و توسعه‌دهندگان می‌توانند از آنها برای درک ساختار و معنای محتوای یک صفحه وب استفاده کنند. این امر دسترسی و سئو را نیز بهبود می‌بخشد، زیرا به موتورهای جستجو کمک می‌کنند که درک درست‌تری از محتوا و زمینه صفحات داشته باشند؛ بنابراین در ارائه خدمات تخصصی سئو سایت باید به اهمیت و کارکرد تگ های سمنتیک توجه کافی نشان داد.

تفاوت تگ‌های معنایی با تگ‌های غیرمعنایی

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

• تگ‌ های معنایی (semantic tags)
• تگ‌ های غیر معنایی (non semantic tags)

تگ‌ های معنایی (semantic tags)

تگ های معنایی عناصر HTML هستند که به وضوح هدف و نوع محتوای درون خود را توصیف می کنند. در واقع semantic tags به عناصر محتوایی که دربرگرفته‌اند معنا می‌بخشند.
بیایید به نمونه‌ای از تگ های معنایی در html5 نگاهی بیندازیم:

• <header>: نمایانگر محتوای مقدماتی یا مجموعه ای از پیوندهای ناوبری برای یک صفحه یا بخش است.

<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
</header>

• <article>: یک محتوای مستقل را نشان می دهد که می تواند به طور مستقل توزیع یا پخش شود.

<article>
<h2> News Headline</h2>
<p> Details of the news article.</p>
</article>

تگ‌ های غیر معنایی (non semantic tags)

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

تگ‌های غیر معنایی اغلب در ترکیب با CSS و جاواسکریپت به صفحه‌ی وب رنگ و لعاب می‌بخشند. به‌صورت خلاصه می‌توان گفت که:

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

نحوه استفاده صحیح از تگ‌های معنایی برای بهبود سئو

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

اما آیا این تمام چیزی است که باید بدانیم؟

خیر

در ادامه به شما توضیح خواهم داد که تگ های سمانتیک چطور به بهبود سئو کمک می‌کنند.

نکته اول: تگ های معنایی و شفاف‌سازی ساختار محتوا

در قدم اول تگ های معنایی به موتورهای جستجو کمک می‌کنند تا درک درستی از سلسله مراتب و ارتباط عناصر محتوایی پیدا کنند. برای مثال تگ هدر برای معرفی قسمت ابتدایی صفحه، شامل عناصری چون عنوان سایت، منو، لوگو و… می‌شود استفاده می‌شود. تگ < header> باید حاوی کلمات کلیدی مهم برای توصیف صفحه باشد.

بیایید به یک مثال از تگ هدر نگاهی بیندازیم:

<header>
<h1>عنوان اصلی صفحه</h1>
<nav>
<ul>
<li> <a href=”#home”> Home</a> </li>
<li> <a href=”#services”> Services</a> </li>
<li> <a href=”#contact”> Contact</a> </li>
</ul>
</nav>
</header>

همان‌طور که در بالا مشاهده می‌کنید، عنوان H1 منو ناوبری در تگ هدر قرار داده شده.

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

با یک مثال از تگ main موضوع را روشن‌تر می‌کنیم:

<main>
<article>
<h2>عنوان مقاله</h2>
<p> Content</p>
</article>
</main>

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

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

این هم یک نمونه از تگ <footer>

<footer>
<p> © 2024 Your Website</p>
</footer>

نکته دوم: بهینه‌سازی تگ های HTML

یک بخش مهم سئو تکنیکال بهینه‌سازی تگ‌های HTML است. نکته مهم، در استفاده از تگ های معنایی HTML حواستان به سلسله مراتب باشد. برای مثال اگر قرار هست از تگ های HTML مرتبط با تیترها در درون تگ <article> استفاده کنید، سلسله مراتب و اولویت بندی‌ها را رعایت کنید.

برای مثال پس از یک تگ <H2> مستقیما سراغ تگ <H4> نروید. با این کار سلسله مراتب و نظم تگ‌های معنایی را بهم ریخته‌اید و یک ساختار نامناسب را به کاربر و موتورهای جستجو معرفی کرده‌اید.

بیایید باهم تگ‌های هدینگ را مرور کنیم:

• تگ <H1> درون تگ <Header>
• سایر تگ‌های H درون تگ <Main> و تگ <Article>

تگ آرتیکل با تمرکز بر روی موضوعی مشخص مورد استفاده قرار می‌گیرد. داخل تگ آرتیکل از تگ‌هایی مانند <H2> ، <H3> و <p> استفاده می‌شود. اگر بخواهیم سراغ لینک‌سازی داخلی برویم مهم است که بدانیم لینک را در کجا قرار می‌دهیم. پیوندهای داخلی مهم را در بخش <nav> و پیوندهای مرتبط را در <aside> یا <footer> قرار می‌دهیم.

به این مثال توجه کنید:

<aside>
<h2> Related Articles</h2>
<ul>
<li> < a href=”/article-1″> Article 1</a> </li>
<li> < a href=”/article-2″> Article 2</a> </li>
</ul>
</aside>

نکته سوم: بهبود دسترسی

یکی از وظایف برچسب های معنایی بهبود دسترسی به بخش‌های مختلف صفحات است. این ویژگی به‌صورت غیر مستقیم به بهبود سئو صفحات نیز کمک می‌کند. از طرف دیگر استفاده از برچسب های معنایی کمک بزرگی به افراد دارای معلولیت مانند نابینایان است. برای مثال:

• <nav>: به خوانندگان صفحه کمک می کند پیوندهای پیمایش را شناسایی کنند.
• <header>، <footer>، <main>: به کاربران و موتورهای جستجو کمک می کند تا طرح و ساختار صفحه شما را درک کنند.

نکته چهارم: HTML خود را اعتبارسنجی کنید

اطمینان پیدا کنید که HTML شما معتبر است و به درستی از تگ های معنایی استفاده کرده‌اید. وجود خطا یا استفاده نامناسب از تگ های معنایی در html بر نحوه‌ی تفسیر موتورهای جستجو از محتوای صفحه‌ی شما تاثیر منفی می‌گذارد. برای حل مشکلاتی از این دست می‌توانید از ابزارهای کمکی مانند W3C Markup Validation Service استفاده کنید. با کمک این ابزار به‌راحتی می‌توانید مشکلات را شناسایی و نسبت به رفع آن‌ها اقدام کنید.

نکته پنجم: ترکیب تگ های معنادار با داده‌های ساختاریافته

تگ‌های معنایی را می‌توان با داده‌های ساختاریافته (Schema.org) تکمیل کرد تا اطلاعات بیشتری برای موتورهای جستجو فراهم شود. به عنوان مثال، می‌توانید درون تگ <article> از نشانه‌گذاری Schema استفاده کنید تا نوع محتوا مانند یک پست وبلاگ یا مقاله خبری را مشخص کنید.

مثال‌هایی از تگ‌های معنایی مهم

خب، در این بخش قرار است به مهم‌ترین تگ‌ های معنایی در HTML بپردازیم.

<h3>تگ &lt;header&gt;</h3>

تگ < header> نماینگر بخش ابتدایی یا همان سربرگ هر صفحه است. این بخش عمدتا شامل اطلاعات ناوبری است. به این تگ هدر نگاه کنید:

<header>
<h1> Welcome to My Website</h1>
<nav>
<ul>
<li> < a href=”#home”> Home< /a> </li>
<li> < a href=”#about”> About< /a> </li>
<li> < a href=”#contact”> Contact< /a> </li>
</ul>
</nav>
</header>

کاربرد تگ <header>

• معرفی و عنوان‌بندی: تگ <header> معمولاً برای نمایش عنوان اصلی صفحه یا بخش و توضیحات مقدماتی استفاده می‌شود.
• حاوی ناوبری: در بسیاری از مواقع، تگ <header> شامل لینک‌های ناوبری اصلی سایت مانند منوی اصلی یا لینک‌های مهم دیگر است.
• بهبود ساختار صفحه: استفاده از تگ <header> کمک می‌کند تا ساختار صفحه به صورت منظم‌تری مشخص شود و بخش‌های مختلف صفحه به خوبی از هم تفکیک شوند.
• بهبود سئو و دسترسی: مانند تگ <nav> , تگ <header> نیز به موتورهای جستجو کمک می‌کند تا بخش‌های مختلف صفحه را به درستی تشخیص دهند، که می‌تواند به بهبود سئو و دسترسی کمک کند.

تگ <nav>

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

این هم یک مثال از تگ <nav>

<nav>
<ul>
<li> < a href=”#home”> Home< /a> </li>
<li> < a href=”#services”> Services< /a> </li>
<li> < a href=”#contact”> Contact< /a> </li>
</ul>
</nav>

کاربرد تگ < nav>

1. شناسایی بخش‌های ناوبری: تگ < nav> به طور واضح مشخص می‌کند که کدام بخش از صفحه شامل لینک‌هایی است که کاربران را به صفحات یا بخش‌های مختلف سایت هدایت می‌کند
2. بهبود سئو: با استفاده از تگ < nav> , موتورهای جستجو بهتر می‌توانند ساختار سایت را درک کنند و ارتباط بین صفحات مختلف را شناسایی کنند، که می‌تواند به بهبود رتبه سایت کمک کند.
3. افزایش دسترسی: تگ < nav> برای فناوری‌های کمکی مانند صفحه‌خوان‌ها، بسیار مفید است. این فناوری‌ها می‌توانند به راحتی بخش‌های ناوبری را تشخیص داده و کاربران را بهتر هدایت کنند.

تگ <main>

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

<main>
<article>
<h2> عنوان مقاله</h2>
<p> این یک پاراگراف از محتوای اصلی مقاله است.</p>
</article>
</main>

کاربرد تگ < main>

1. تعیین محتوای اصلی: تگ < main> به مرورگر و موتورهای جستجو اعلام می‌کند که محتوای درون آن بخش اصلی و مهم‌ترین قسمت از صفحه است. این بخش شامل محتوای اصلی و منحصر به فردی است که هدف اصلی صفحه را تشکیل می‌دهد.
2. بهبود سئو: استفاده صحیح از تگ < main> به موتورهای جستجو کمک می‌کند تا محتوای اصلی صفحه را شناسایی کنند و از اهمیت آن باخبر شوند، که می‌تواند به بهبود رتبه صفحه کمک کند.
3. افزایش دسترسی: تگ < main> برای فناوری‌های کمکی مانند صفحه‌خوان‌ها مفید است. این فناوری‌ها می‌توانند به راحتی محتوای اصلی صفحه را تشخیص داده و کاربران را بهتر هدایت کنند.
4. سازمان‌دهی بهتر: استفاده از تگ < main> به ساختاردهی بهتر صفحه کمک می‌کند و باعث می‌شود که بخش‌های مختلف صفحه به خوبی از هم تفکیک شوند.

تگ <article>

تگ < article> در HTML نشان‌دهنده یک قطعه محتوای مستقل است که می‌تواند به طور مستقل توزیع یا پخش شود.

مثالی از تگ آرتیکل

<article>
<h2> عنوان مقاله</h2>
< p> این یک پاراگراف از محتوای مقاله است که به طور مستقل قابل فهم است و می‌تواند به تنهایی منتشر شود.</p>
</article>

کاربرد تگ < article>

1. محتوای مستقل: تگ < article> برای محتوایی استفاده می‌شود که به تنهایی و به طور مستقل قابل فهم است. این محتوا می‌تواند یک مقاله، پست وبلاگ، خبر، نظر کاربر و یا هر نوع محتوای مستقل دیگری باشد.
2. قابلیت توزیع مستقل: محتوای درون تگ < article> می‌تواند به طور مستقل منتشر، پخش یا به اشتراک گذاشته شود. این به این معنی است که هر بخش از محتوا که درون این تگ قرار می‌گیرد، به خودی خود معنا و مفهوم دارد.
3. بهبود سئو: استفاده از تگ < article> به موتورهای جستجو کمک می‌کند تا محتوای مستقل و مهم سایت را شناسایی کرده و به آن اهمیت بیشتری بدهند. این می‌تواند به بهبود رتبه صفحه کمک کند.
4. افزایش دسترسی: تگ < article> برای فناوری‌های کمکی مانند صفحه‌خوان‌ها مفید است. این فناوری‌ها می‌توانند به راحتی محتوای مستقل را تشخیص داده و کاربران را بهتر هدایت کنند.
5. ساختاردهی بهتر: استفاده از تگ < article> به ساختاردهی بهتر صفحه کمک می‌کند و باعث می‌شود که بخش‌های مختلف صفحه به خوبی از هم تفکیک شوند.

تگ <section>

تگ <section> در HTML یک بخش در یک سند را تعریف می‌کند، که معمولاً دارای یک عنوان مختص به خود است.

این هم یک مثال از تگ <section>

<section>
<h2> عنوان بخش</h2>
<p> این یک پاراگراف از محتوای مربوط به این بخش است.</p>
</section>

کاربرد تگ < section>

1. تعیین بخش‌های مجزا: تگ < section> برای تقسیم کردن محتوای یک صفحه به بخش‌های مجزا استفاده می‌شود. هر بخش می‌تواند موضوع خاصی را پوشش دهد و به کمک یک عنوان مشخص شود.
2. سازمان‌دهی محتوا: با استفاده از تگ < section> , می‌توان محتوا را به صورت سازمان‌یافته‌تر و منطقی‌تر ارائه داد، که به کاربران کمک می‌کند تا اطلاعات را بهتر درک کنند.
3. بهبود سئو: تگ < section> به موتورهای جستجو کمک می‌کند تا ساختار و بخش‌های مختلف یک صفحه را بهتر درک کنند. این می‌تواند به بهبود رتبه‌بندی صفحه در نتایج جستجو کمک کند.
4. افزایش دسترسی: تگ < section> برای فناوری‌های کمکی مانند صفحه‌خوان‌ها مفید است. این فناوری‌ها می‌توانند به راحتی بخش‌های مختلف صفحه را تشخیص داده و کاربران را بهتر هدایت کنند.
5. قابلیت تکرار: در یک سند HTML می‌توان از تگ < section> چندین بار استفاده کرد تا بخش‌های مختلفی از محتوا را مشخص کند.

تگ <footer>

تگ <footer> در HTML شامل اطلاعات پایانی برای یک صفحه یا بخش است، مانند اطلاعات کپی‌رایت یا لینک‌ها.

مثالی از یک تگ < footer>

<footer>
< p> © 2024 نام وب‌سایت شما. کلیه حقوق محفوظ است.< /p>
<nav>
<ul>
< li> < a href=”#privacy”> سیاست حفظ حریم خصوصی< /a> < /li>
< li> < a href=”#terms”> شرایط استفاده< /a> < /li>
< li> < a href=”#contact”> تماس با ما< /a> < /li>
</ul>
</nav>
</footer>

کاربرد تگ < footer>

1. اطلاعات پایانی: تگ < footer> برای نمایش اطلاعات پایانی و اضافی یک صفحه یا بخش استفاده می‌شود. این اطلاعات معمولاً شامل کپی‌رایت، لینک‌های تماس، سیاست‌های حفظ حریم خصوصی، و اطلاعات مشابه است.
2. بهبود ساختار صفحه: استفاده از تگ < footer> کمک می‌کند تا ساختار صفحه به صورت منظم‌تری مشخص شود و بخش‌های مختلف صفحه به خوبی از هم تفکیک شوند.
3. بهبود سئو: تگ < footer> به موتورهای جستجو کمک می‌کند تا بخش پایانی و اطلاعات اضافی صفحه را شناسایی کنند، که می‌تواند به بهبود رتبه صفحه کمک کند.
4. محل مناسب برای لینک‌ها: تگ < footer> محل مناسبی برای قرار دادن لینک‌های اضافی و مهم است، مانند لینک به صفحات حقوقی یا صفحات تماس با ما.

تگ < aside>

تگ <aside> در HTML نمایانگر محتوایی است که به طور غیرمستقیم با محتوای اصلی مرتبط است، مانند یک نوار کناری.

خب این هم یک مثال از تگ <aside>

<aside>
<h2> مقالات مرتبط</h2>
<ul>
< li> < a href=”#article1″> مقاله 1</a> </li>
< li> < a href=”#article2″> مقاله 2</a> </li>
< li> < a href=”#article3″> مقاله 3</a> </li>
</ul>
</aside>

کاربرد تگ < aside>

1. محتوای مرتبط غیرمستقیم: تگ < aside> برای نمایش محتوایی استفاده می‌شود که به محتوای اصلی مرتبط است اما جزء اصلی متن نیست. این محتوا می‌تواند شامل اطلاعات اضافی، تبلیغات، نقل‌قول‌ها، یا لینک‌های مرتبط باشد.
2. سازمان‌دهی بهتر محتوا: استفاده از تگ < aside> به سازمان‌دهی بهتر صفحه کمک می‌کند و باعث می‌شود که اطلاعات جانبی و مرتبط به طور جداگانه نمایش داده شوند.
3. مکان مناسب برای تبلیغات و لینک‌ها: تگ < aside> مکان مناسبی برای قرار دادن تبلیغات، لینک‌های مرتبط، یا سایر اطلاعات جانبی است که به محتوای اصلی مرتبط هستند اما به طور مستقیم بخشی از آن نیستند.

تگ‌ های هدینگ (Heading)

تگ‌های هدینگ (Heading) مانند < h1> تا < h6> تگ‌های معنایی در HTML محسوب می‌شوند. این تگ‌ها به مرورگرها و موتورهای جستجو کمک می‌کنند تا ساختار و سلسله‌مراتب محتوا را بهتر درک کنند.

مثال:

<h1> عنوان اصلی</h1>
<p> این یک پاراگراف مقدمه است که به عنوان اصلی مرتبط است.</p>
<h2> زیرعنوان اول</h2>
<p> این یک پاراگراف مربوط به زیرعنوان اول است.</p>
<h3> زیرعنوان دوم</h3>
<p> این یک پاراگراف مربوط به زیرعنوان دوم است.</p>

بیشتر بخوانید: هدینگ در سئو چیست؟ آموزش اصولی استفاده از هدینگ در محتوا

کاربرد تگ ‌های هدینگ

1. سلسله‌مراتب محتوا: تگ‌های هدینگ برای نمایش عنوان‌ها و زیرعنوان‌ها در یک سند HTML استفاده می‌شوند. این تگ‌ها به ترتیب از < h1> (مهم‌ترین) تا < h6> (کم‌اهمیت‌ترین) قرار می‌گیرند.
2. بهبود سئو: استفاده صحیح از تگ‌های هدینگ به موتورهای جستجو کمک می‌کند تا ساختار و اهمیت بخش‌های مختلف یک صفحه را تشخیص دهند. این می‌تواند به بهبود رتبه‌بندی صفحه کمک کند.
3. خوانایی بهتر: استفاده از تگ‌های هدینگ به کاربران کمک می‌کند تا محتوا را بهتر و سریع‌تر بخوانند و درک کنند، زیرا این تگ‌ها بخش‌های مختلف محتوا را به وضوح از هم جدا می‌کنند.

تگ <figure>

تگ <figure> در HTML نمایانگر محتوای مستقل و خوداتکا شامل تصاویر، نمودارها، عکس‌ها یا فهرست‌های کد است که در متن اصلی درج شده‌اند.

کاربرد تگ <figure>

1. نمایش محتوای مستقل: تگ figure برای نمایش محتوای بصری‌ای استفاده می‌شود که به صورت مستقل دارای معنا و اطلاعات است، مانند تصاویر، نمودارها، یا فهرست‌های کد. این محتوا معمولاً به طور مستقیم به متن اصلی مرتبط است.
2. افزودن توضیحات: تگ <figure> به شما امکان می‌دهد تا توضیحات اضافی برای محتوای بصری با استفاده از تگ < figcaption> اضافه کنید. این توضیحات می‌توانند اطلاعات بیشتر یا توصیفاتی درباره محتوای مستقل ارائه دهند.
3. بهبود سئو: استفاده از تگ <figure> به موتورهای جستجو کمک می‌کند تا محتوای بصری و توضیحات مرتبط با آن را شناسایی کنند.

تگ < details>

تگ < details> در HTML یک ویجت تعاملی ایجاد می‌کند که کاربر می‌تواند آن را باز یا بسته کند. این تگ معمولاً برای ارائه اطلاعات اضافی یا افشای جزئیات بیشتر به کار می‌رود.

<details>
<summary> اطلاعات بیشتر< /summary>
<p> این متن اضافی است که پس از کلیک بر روی “اطلاعات بیشتر” نمایش داده می‌شود.</p>
</details>

کاربرد تگ <details>

1. ویجت تعاملی: تگ <details> به شما این امکان را می‌دهد که یک بخش از محتوا را به صورت تعاملی نمایش دهید. کاربران می‌توانند با کلیک بر روی این بخش، محتوا را مشاهده کنند یا پنهان کنند.
2. افشای اطلاعات اضافی: این تگ معمولاً برای نمایش اطلاعات اضافی یا توضیحات بیشتر در مورد یک موضوع خاص استفاده می‌شود، که ممکن است به طور پیش‌فرض مخفی باشد.
3. بهبود تجربه کاربری: استفاده از تگ <details> به کاربران این امکان را می‌دهد که تنها زمانی که به اطلاعات اضافی نیاز دارند، آن را مشاهده کنند و فضای صفحه را بهینه‌تر کنند.

5 نکته طلایی در استفاده صحیح از تگ‌های معنایی

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

1. هدف هر تگ را درک کنید

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

• <header>: محتوای مقدماتی یا پیوندهای ناوبری
• <nav>: ناوبری اصلی
• <main>: محتوای اصلی سند
• <article>: محتوای مستقل مانند پست های وبلاگ یا مقالات خبری
• <section>: گروه بندی موضوعی محتوا
• <aside>: محتوای مرتبط مانند نوارهای کناری
• <footer>: محتواهای پاورقی، بخش پایانی صفحه
• <figure>: محتواهای مستقل مانند تصاویر یا نمودارها

2. از استفاده بیش از حد خودداری کنید

در استفاده از برچسب های معنایی در جایی که معنای واضحی اضافه نمی کنند خودداری کنید. استفاده بیش از حد از این برچسب ها می تواند اثربخشی آنها را کاهش دهد و باعث سردرگمی کاربران و موتورهای جستجو شود.

3. رعایت ساختار سلسله مراتبی

حواستان به ساختار سلسله مراتبی منطقی تگ های معنایی باشد.

• از تگ های <header> و <footer> و <body> به صورت مناسب استفاده شود.
• <nav> به صورت استراتژیک قرار می گیرد تا ناوبری در سراسر سایت یا در بخش های خاصی برای ناوبری محلی را در بر گیرد.
• <main> فقط یک بار در هر سند برای بسته بندی محتوای اصلی استفاده می شود.
• سرفصل های (< h1> تا < h6>) برای ایجاد ساختار شفاف و سلسله مراتبی از محتوای سند استفاده می شود.

4. تگ ها را با داده های ساختاریافته ترکیب کنید

برچسب‌های معنایی را با داده‌های ساختاریافته (Schema.org) تقویت کنید تا زمینه اضافی برای موتورهای جستجو فراهم شود.

5. تاثیر بر سئو را فراموش نکنید

اطمینان حاصل کنید که هر صفحه دارای یک تگ < h1> است که موضوع اصلی را نشان می دهد، و از تگ های عنوان دیگر (< h2> تا < h6>) برای ساختاربندی موضوعات فرعی استفاده کنید. این به موتورهای جستجو کمک می کند تا سلسله مراتب محتوا را درک کنند و رتبه بندی را بهبود بخشند.

تگ‌های خاص سئویی

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

بیشتر بخوانید: متا تگ چیست؟ {آشنایی با قطعه کدهای محبوب سئوکاران}

تگ <title>

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

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

تگ های هدینگ که شامل H2، H3 و H4 می‌شوند، نقشی حیاتی در سازماندهی محتوا و سئو دارند. موتورهای جستجو از تگ های هدر برای درک سلسله مراتب محتوا استفاده می کنند. گنجاندن کلمات کلیدی مرتبط در تگ‌های عنوان، خوانایی محتوای را افزایش می‌دهد و ساختار آن را نشان می‌دهد.

تگ <strong>

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

تگ Image & alt text

تگ‌های تصاویر و توضیحات تصاویر به بهینه‌سازی عکس‌ها برای موتورهای جستجو کمک زیادی می‌کند. به مثال زیر از تگ alt توجه کنید:

< img src=”keyword.jpg” alt=”keyword” />

بیشتر بخوانید: سئوی تصاویر چیست؟ {11 نکته طلایی}

تگ Hyperlink

تگ هایپرلینک، که اغلب به عنوان ” link” شناخته می‌شود و عنصری است که به کاربران اجازه می دهد با کلیک بر روی یک متن، تصویر یا محتوای دیگر از یک صفحه به صفحه دیگر یا به بخش های مختلف در همان صفحه حرکت کنند.

به این مثال توجه کنید:

< a href=”http://www.website.com/page.html” title=”keyword”> keyword</a>

تگ Canonical

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

اینهم یک مثال از تگ Canonical

< link rel=”canonical” href=”https://www.example.com/page” />

تگ توضیحات متا (Meta Description)

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

یک مثال از Meta Description

< meta name=”description” content=”Learn how to create effective title tags for better SEO results.” />

بیشتر بخوانید: هر چه باید درباره تایتل و متای دیسکریپشن بدانید

تگ < cite>

تگ <cite> در HTML برای ارجاع به عنوان یک اثر استفاده می‌شود. این تگ معمولاً برای اشاره به منابع مختلف مانند کتاب‌ها، مقالات، شعرها، فیلم‌ها، نمایش‌ها، نقاشی‌ها، مجسمه‌ها، برنامه‌های تلویزیونی، آهنگ‌ها، آثار هنری و غیره به کار می‌رود.

تگ <cite> برای نمایش نام یا عنوان یک اثر به کار می‌رود. محتوای داخل این تگ به‌طور پیش‌فرض توسط مرورگرها به صورت ایتالیک (کج) نمایش داده می‌شود تا به‌صورت بصری از متن معمولی متمایز شود. برای مثال به این توضیحات نگاهی بیندازید:

<p> یکی از معروف‌ترین رمان‌های تاریخ، < cite> جنگ و صلح< /cite> نوشته لئو تولستوی است.< /p>

تگ <dfn>

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

< p> در علم کامپیوتر، < dfn> الگوریتم< /dfn> به مجموعه‌ای از دستورات گفته می‌شود که برای حل یک مسئله خاص طراحی شده‌اند.< /p>

تگ <abbr>

تگ < abbr> برای نمایش اختصارات و عبارات کوتاه استفاده می‌شود. این تگ معمولاً یک توضیح کامل‌تر از اختصار را در attribute title ارائه می‌دهد.

<p> HTML stands for < abbr title=”HyperText Markup Language”> HTML< /abbr>.</p>

تگ <q>

تگ <q> برای نقل قول‌های کوتاه استفاده می‌شود. با کمک این تگ می‌توانیم نقل قول‌ها را برای موتورهای جستجو و کاربران مشخص و برجسته کنیم.

<p> She said, < q> Hello, World!< /q> < /p>

سخن پایانی

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