سئو - ساختار HTML

استفاده درست از تگ های HTML مخصوص عناوین می تواند تاثیر بسیار زیادی در سئو / SEO سایت ایجاد نماید.

یکی از مهمترین تگ های عناوین تگ <h1> است.

توصیه می شود فقط و فقط از یک تگ <h1> در هر صفحه استفاده شود.

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

• گاها از تگ h2 برای عناوین مقالات یا صفحات استفاده می شود و تگ h1 به نام سایت می رسد که توصیه نمی شود.
• گاها قسمت هایی از نوار کنار صفحه / Aside شامل تگ های h1 است که باید حتما تغییر کنند.
• گاها قسمت هایی از نوار پایینی صفحه / Footer شامل تگ های h1 است که باید حتما تغییر کنند.
• به عناوین Footer و Aside می توان از h4 به بعد اختصاص داد
• سایر قسمت های متن می تواند در تگ های P قرار گیرد.
• عناوین دیگر صفحه می تواند با توجه به اهمیت آن ها h2 یا h3 باشند.

برای این منظور می توان از روش های زیر استفاده کرد

• استفاده از یک افزونه / Plugins برای SEO یا اصلاح ساختار HTML سایت های مبتنی بر CMS
• استفاده از Child Theme برای تغییر ساختار برخی از صفحات در قالب های سایت های وردپرس

در سایت های مبتنی بر وردپرس وقتی نیاز باشد که با تغییر در سورس کد قالب سایت، علاوه بر تغییرات ظاهری، عملکرد قالب نیز تغییر کند راه حل توصیه شده ساخت یک قالب مجازی به نام قالب فرزند یا Child Theme است. کدهای PHP با استاندارد خاصی به قالب فرزند اضافه می شوند. با این روش بدون تغییر مستقیم در کدهای قالب اصلی، می توان تغییرات را بر روی آن اعمال کرد. از دیگر مزایای این روش امکان به روزآوری قالب اصلی بدون از بین رفتن تغییرات است، زیرا تمام تغییرات در قالب فرزند ذخیره شده اند. البته اگر تغییرات شما بر روی یک قالب به تغییرات گرافیکی خلاصه می شود ساخت قالب فرزند توصیه نمی شود.

تگ <main> اصلی ترین قسمت محتویات یک صفحه وب را مشخص می کند. این قسمت شامل مهمترین محتویات یک صفحه یا یک نرم افزار مبتنی بر وب است. این تگ شامل قسمت های تکرارشونده در سایر صفحات مانند لوگو، search-box، footer و مانند آن نمی شود.

 
 <main role="main"> 
 	...
 </main>

طبق استاندارد نباید بیشتر از یک تگ <main> در هر صفحه وب وجود داشته باشد و این تگ نباید در داخل تگ های <article> و <aside> و <footer> و <header> و <nav> استفاده شود. البته ظاهرا در استاندارد نهایی این محدودیت حذف شده است ولی با این وجود توصیه نمی شود.

همانگونه که در زیر مشاهده می کنید قسمت اصلی یک صفحه وب نمونه با دو مطلب (مطلب اول و مطلب دوم) نمایش داده شده است. قسمت هایی مانند header، footer و aside خارج از این قسمت هستند.

 
 <main>
 <h1>عنوان اصلی</h1>
 <p>توضیحات که زیر عنوان اصلی می آید</p>

 <article>
 	<h2>عنوان مطلب اول</h2>
 	<p>یک پاراگراف متن مرتبط با عنوان مطلب</p>
 	<p>... </p>
 	<p>... </p>
 </article>

 <article>
 	<h2>عنوان مطلب دوم</h2>
 	<p>یک پاراگراف متن مرتبط با عنوان مطلب</p>
 	<p>... </p>
 	<p>... </p>
 </article>
 </main>

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

• تگ <article>: برای تعیین یک قسمت مجزا از صفحه استفاده می شود و لازم است دارای یک تگ h1 تا h6 برای نمایش عنوان باشد. تگ <article> علاوه بر اینکه می تواند شامل <header> یا <footer> باشد می تواند حاوی <article> هم باشد. مثلا در پست های بلاگ ها هر کامنت می تواند خود یک <article> باشد.
• تگ <section>: شامل یک تکه از اطلاعات مرتبط به هم در یک صفحه وب است. این تگ کاربردی مشابه با <div> دارد با این تفاوت که <section> شامل چند تگ مرتبط به هم و به یک موضوع واحد است و لازم است شامل یک تگ h1 تا h6 برای عنوان هم باشد. در صورتی که اطلاعات زیادی در <section> قرار می گیرد باید از <article> به جای آن استفاده کرد.
• تگ <aside>: برای استفاده نوار کناری یا الحاقیات توصیه می شود و از استفاده برای متن های داخل پرانتز خودداری شود.
• تگ <header>
• تگ <footer>
• تگ <nav>
• تگ <hgroup>: این تگ از HTML5 حذف شده است و استفاده از آن توصیه نمی شود.

• اصلاح استفاده از h1 تا h6 در تمام صفحات
• استفاده صحیح از تگ <main>
• استفاده مناسب از تگ های HTML5
• تست صفحه به صفحه نسخه نهایی در validator.w3.org
• چک تمام صفحه ها در validator.w3.org/checklink