آیا می‌دانید حتی اگر بهترین محتوا و لینک‌سازی را داشته باشید، نادیده گرفتن تگ‌های HTML می‌تواند تمام تلاش‌های سئوی شما را بی‌اثر کند؟ این تگ‌ها زبان ارتباطی سایت با موتورهای جستجو هستند و به ربات‌های گوگل می‌گویند صفحه شما درباره چیست و چگونه باید نمایش داده شود.
اگر درست از آن‌ها استفاده نکنید، گوگل نمی‌تواند ساختار و محتوای صفحات‌تان را درک کند. نتیجه این کار، ایندکس شدن سایت، رتبه پایین و از دست دادن کاربرانی است که می‌توانستند مشتری شما شوند.
در این مقاله مهم‌ترین تگ‌های HTML در سئو را معرفی می‌کنیم و نحوه بهینه‌سازی آن‌ها را توضیح می‌دهیم، با ما همراه باشید.
معرفی مهم‌ترین تگ‌های HTML در سئو
HTML فقط برای ساخت ظاهر سایت نیست؛ این زبان در واقع هویت و ساختار صفحات را مشخص می‌کند. موتورهای جستجو امروزه فقط دنبال کلمات کلیدی نیستند، بلکه سعی می‌کنند معنی واقعی محتوا و ارتباط موضوعی را درک کنند.
تگ‌های HTML، به‌ویژه تگ‌های معنایی مثل title ،meta description و هدینگ‌های H1 تا H6، به موتورهای جستجو کمک می‌کنند موضوع و ساختار صفحه را بهتر درک کنند. ولی یادتان باشد، استفاده از این تگ‌ها به‌تنهایی باعث افزایش رتبه نمی‌شود؛ آن‌ها فقط یک ابزار کمکی هستند.
وقتی این تگ‌ها درست استفاده شوند، درک محتوا برای موتورهای جستجو ساده، دسترسی کاربران راحت‌تر می‌شود و احتمال نمایش سایت در ویژگی‌های ویژه مثل Rich Snippet افزایش می‌یابد. همچنین تجربه کاربری را بهتر کرده، نرخ خروج را کاهش و تعامل کاربران را بیشتر می‌کند.
در کل، رعایت اصول HTML نه‌تنها به سئو کمک می‌کند، بلکه عملکرد سایت را بهبود می‌دهد، رقابت‌پذیری را بالا می‌برد و باعث افزایش ترافیک و کلیک‌ها می‌شود. نمونه کد HTML در سئو به این شکل است:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>This is the title of a document</title>
<meta name=”description” content=”This is a description”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
در ادامه، مهم‌ترین تگ‌های HTML در سئو و روش‌های بهینه‌سازی آن‌ها را بررسی می‌کنیم.
-
تگ <html> و نقش آن در ساختار صفحه
تگ <html> تگ اصلی یک صفحه HTML است و تمام تگ‌های دیگر باید داخل آن قرار بگیرند. معمولاً با صفت lang استفاده می‌شود تا زبان صفحه مشخص شود، مثلاً <html lang=”fa”> برای صفحات فارسی. این کار باعث می‌شود صفحه برای ابزارهای دسترسی و موتورهای جستجو قابل فهم‌تر باشد.
البته، گوگل روش‌های پیشرفته‌ای برای تشخیص زبان دارد و اغلب از تگ hreflang برای سایت‌های چندزبانه استفاده می‌کند، ولی اضافه کردن صحیح lang تجربه کاربری را بهبود می‌دهد.
هر صفحه HTML باید دقیقاً یک <head> و یک <body> داشته باشد که هر دو داخل <html> قرار می‌گیرند.
صفحات اغلب با <!DOCTYPE html> و سپس <html> شروع و با بسته‌شدن <html> پایان می‌یابند. به طور کلی، <html> ساختار اصلی صفحه را مشخص و نحوه خواندن سایر بخش‌ها را تعیین می‌کند.
-
تگ <head>؛ جایی برای اطلاعات پنهان اما مهم
تگ <head> بخشی از سند HTML است که اطلاعات متادیتا (پنهان) صفحه را در خود جای می‌دهد. این اطلاعات برای مرورگرها، موتورهای جستجو و شبکه‌های اجتماعی کاربرد دارد و به‌طور مستقیم در صفحه نمایش داده نمی‌شوند.
در <head> می‌توانید مواردی مثل عنوان صفحه (<title>)، توضیحات متا (<meta>)، لینک به فایل‌های CSS و جاوااسکریپت، تگ‌های مهم سئو (مثل canonical و دستورات ربات‌ها) و تنظیمات مربوط به واکنش‌گرایی (Responsive) را قرار دهید. تنها <title> به‌صورت مستقیم در نوار مرورگر و نتایج جستجو دیده می‌شود.
این بخش نقش «مغز فنی» صفحه را دارد و به موتورهای جستجو و مرورگرها می‌گوید چگونه محتوا را پردازش و نمایش دهند. گوگل توصیه می‌کند که کدهای داخل <head> معتبر باشند و همه تگ‌ها درست بسته‌شده باشند تا خوانایی ماشینی حفظ شود. نمونه‌ای از کد <head> در ساختار صفحه به‌صورت زیر است:
<head>
<title>My awesome title tag</title>
<meta name=”description” content=”My meta description for the search snippet”/>
<link rel=”canonical” href=”https://mywebsite.com/blog/interesting-blog-post/” />
</head>
-
تگ <title>؛ تاثیرگذارترین تگ برای سئو و کاربران
تگ <title> یکی از مهم‌ترین عناصر HTML برای سئوی داخلی (On-Page SEO) است. این تگ عنوان اصلی صفحه را در نوار مرورگر و نتایج جستجوی گوگل (SERP) نمایش می‌دهد.
عنوان صفحه اولین چیزی است که کاربران در نتایج جستجو می‌بینند و تاثیر زیادی بر نرخ کلیک (CTR) دارد. همچنین، این تگ به موتورهای جستجو نشان می‌دهد صفحه درباره چه موضوعی است. در HTML به این شکل نوشته می‌شود:
<title>عنوان شما اینجا قرار می‌گیرد</title>
بهترین روش‌ها برای بهینه‌سازی تگ <title> عبارت‌اند از:
- طول مناسب: طول عنوان را بین ۵۰ تا ۶۰ کاراکتر نگه دارید تا در نتایج جستجو کامل نمایش داده شود.
- استفاده از کلمات کلیدی: کلمات کلیدی اصلی را به‌طور طبیعی در عنوان قرار دهید، بدون تکرار بی‌مورد (کیورد استافینگ).
- منحصربه‌فرد بودن: هر صفحه باید عنوان یکتا داشته باشد تا موتورهای جستجو بتوانند بهترین صفحه را برای رتبه‌بندی انتخاب کنند.
- خوانایی و جذابیت: عنوان باید هم توصیفی باشد و هم کاربران را به کلیک کردن ترغیب کند؛ کوتاه، واضح و جامع باشد تا موضوع صفحه را به‌خوبی منتقل کند.
به طور کلی، تگ <title> در بخش <head> صفحه قرار می‌گیرد و در نتایج جستجو به‌عنوان تیتر لینک دیده می‌شود. رعایت نکات بالا باعث افزایش نرخ کلیک و در نتیجه افزایش ترافیک سایت می‌شود.
-
تگ <hreflang>؛ راهنمای زبان و موقعیت جغرافیایی
تگ hreflang برای سایت‌های چندزبانه یا دارای نسخه‌های منطقه‌ای استفاده می‌شود. این تگ به موتورهای جستجو کمک می‌کند نسخه مناسب صفحه را بر اساس زبان یا کشور کاربر نشان دهند و از مشکلات محتوای تکراری جلوگیری کنند.
تگ hreflang با استفاده از کدهای استاندارد ISO برای زبان (مثل en) و کشور (مثل -us) تنظیم می‌شود. برای عملکرد صحیح، هر نسخه زبانی باید به همه نسخه‌های دیگر و همچنین به نسخه اصلی لینک‌دهی داشته باشد (لینک‌دهی دوطرفه).
اگر سایت شما صفحات به زبان‌ها یا مناطق مختلف دارد، حتماً از این تگ استفاده کنید تا گوگل بداند هر صفحه مربوط به چه زبان یا منطقه‌ای است. برای این کار می‌توانید در بخش <head> صفحات، کد زیر را قرار دهید:
<link rel=”alternate” hreflang=”lang_code” href=”URL”>
رعایت قوانین hreflang مثل لینک‌دهی دوطرفه و استفاده از کدهای ISO درست باعث می‌شود گوگل کاربران را به مناسب‌ترین نسخه هدایت کند.
-
متاتگ Description؛ توضیح کوتاه اما کلیدی برای گوگل
متادیسکریپشن (Meta Description) خلاصه‌ای کوتاه و متنی از محتوای یک صفحه وب را ارائه می‌دهد. این توضیح در نتایج جستجو، پایین عنوان صفحه نمایش داده می‌شود و به کاربران کمک می‌کند تصمیم بگیرند آیا صفحه مورد نظر نیازشان را برآورده می‌کند یا خیر.
اگرچه متادیسکریپشن به‌طور مستقیم در رتبه‌بندی گوگل تاثیر ندارد، ولی به‌دلیل نقش مهمش در افزایش نرخ کلیک (CTR)، برای سئو بسیار مهم است. نکات مهم برای نوشتن یک متادیسکریپشن خوب عبارت‌اند از:
- طول مناسب: حدود ۱۵۰ تا ۱۶۰ کاراکتر تا متن کامل در نتایج جستجو نمایش داده شود.
- جذب کاربر: از کلمات کلیدی مرتبط به شکل طبیعی استفاده کنید و یک دعوت به اقدام (CTA) مثل «بیشتر بخوانید» یا «خرید کنید» اضافه کنید.
- منحصربه‌فرد و مرتبط بودن: هر صفحه باید یک توضیح یکتا داشته باشد که محتوای صفحه را درست نشان دهد.
- جلب توجه در جستجو: اگر عبارتی که کاربران جستجو کرده‌اند در توضیحات متا باشد، گوگل آن را بولد می‌کند و توجه کاربر به آن جلب می‌شود.
متادیسکریپشن در تگ <meta name=”description” content=”…”> در بخش <head> صفحه قرار می‌گیرد و به شکل خلاصه و جذاب محتوای صفحه را معرفی می‌کند.
این کار می‌تواند باعث کاهش نرخ خروج و افزایش تعامل کاربران شود. شما می‌توانید متادیسکریپشن صفحات خود را در بخش متا یواست یا رنک مث بنویسید.
-
متاتگ Robots؛ کنترل دسترسی ربات‌های جستجو
متاتگ Robots به ربات‌های موتور جستجو می‌گوید که با صفحه وب چگونه رفتار کنند. مهم‌ترین گزینه‌های آن عبارت‌اند از:
- index: اجازه می‌دهد صفحه در نتایج جستجو ظاهر شود.
- noindex: از نمایش صفحه در نتایج جستجو جلوگیری می‌کند؛ مناسب صفحات کم‌ارزش، پیش‌نویس یا خصوصی است.
- follow: به ربات‌ها اجازه می‌دهد لینک‌های صفحه را دنبال کنند.
- nofollow: از دنبال شدن لینک‌ها جلوگیری می‌کند.
برای استفاده، متاتگ زیر را در بخش <head> صفحه قرار دهید:
<meta name=”robots” content=”noindex”>
این متاتگ به گوگل می‌گوید که صفحه را ایندکس نکند.
می‌توانید چند دستور را با هم ترکیب کنید، مثل nofollow ،noarchive و noindex تا کنترل بیشتری روی نمایش صفحه و دنبال شدن لینک‌ها داشته باشید، مثل:
<meta name=”robots” content=”noindex, nofollow”>
این متاتگ‌ها برای صفحات حساس یا خودکار مفید هستند. علاوه بر متاتگ عمومی robots، گوگل متاتگ‌های اختصاصی خودش را دارد، مثل:
<meta name=”googlebot” content=”nofollow”>
همه این متاتگ‌ها باید قبل از محتوای صفحه و در بخش <head> قرار گیرند.
-
متاتگ Content-Type؛ معرفی نوع و زبان محتوا
متاتگ Content-Type نوع محتوا (مثل HTML) و فرمت رمزگذاری کاراکترها را مشخص می‌کند. نسخه قدیمی این متاتگ به شکل زیر بود:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
نسخه جدیدتر ساده‌تر است:
<meta charset=”UTF-8″>
استفاده از UTF-8 توصیه می‌شود، زیرا همه نمادها و زبان‌ها (فارسی، عربی، چینی و…) را به‌درستی نمایش می‌دهد. همچنین قرار دادن مقادیر داخل کوتیشن (مثلاً value=”…”) باعث می‌شود مرورگرها کاراکترها را صحیح بخوانند.
در صفحات فارسی، مطمئن شوید که <meta charset> روی UTF-8 تنظیم‌شده تا صفحه درست ایندکس شود.
اگر بخواهید زبان و منطقه محتوا را مشخص کنید، می‌توانید از تگ زیر استفاده کنید:
<meta http-equiv=”content-language” content=”fa-ir”>
این تگ بیشتر برای موتورهای جستجو غیر از گوگل مثل بینگ کاربرد دارد.
-
متاتگ Viewport؛ تنظیم نمایش سایت در موبایل
تگ متا Viewport در بخش <head> صفحات وب قرار می‌گیرد و نحوه نمایش سایت روی دستگاه‌های مختلف مثل موبایل، تبلت و دسکتاپ را کنترل می‌کند:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
این تگ باعث می‌شود:
عرض صفحه با عرض صفحه‌نمایش دستگاه برابر شود (width=device-width)
زوم اولیه صفحه برابر با ۱ باشد (initial-scale=1.0)
وجود این تگ نشان‌دهنده طراحی واکنش‌گرا (Responsive) است و گوگل آن را به‌عنوان یک معیار موبایلفرندلی در نظر می‌گیرد. صفحات دارای این تگ شانس بیشتری برای رتبه‌های بالاتر در نتایج جستجوی موبایل دارند.
بیشتر قالب‌ها و سیستم‌های مدیریت محتوا (CMS) این تگ را به‌صورت پیش‌فرض دارند، اما بهتر است همیشه بررسی کنید که گوگل سایت شما را واقعاً موبایلفرندلی تشخیص می‌دهد یا نه.
برای این کار می‌توانید از ابزارهایی مثل Google’s Mobile-Friendly Test یا سرچ کنسول استفاده کنید.
نکته: فقط اضافه‌کردن تگ Viewport کافی نیست. اگر مشکلات فنی دیگر باعث نمایش نادرست محتوا شوند، باید آن‌ها را برطرف کنید تا سایت واقعاً موبایلفرندلی شود.
-
تگ Canonical؛ جلوگیری از محتوای تکراری در سئو
تگ کنونیکال به موتورهای جستجو مثل گوگل می‌گوید که یک صفحه خاص، نسخه اصلی و ترجیحی محتوا است. این تگ وقتی مفید است که چند URL مختلف محتوای مشابه یا یکسان دارند.
با استفاده از تگ کنونیکال، می‌توانید به گوگل نشان دهید که کدام URL باید به‌عنوان نسخه اصلی فهرست‌بندی و رتبه‌بندی شود و سایر نسخه‌ها نادیده گرفته شوند:
<link rel=”canonical” href=”https://mangools.com/”/>
مزایای استفاده از تگ Canonical:
- تجمیع اعتبار صفحات (PageRank): قدرت سئو و لینک‌های صفحات تکراری به صفحه اصلی منتقل می‌شود.
- بهبود خزش موتورهای جستجو (Crawling): ربات‌ها فقط روی نسخه اصلی تمرکز می‌کنند و نسخه‌های تکراری را نادیده می‌گیرند.
- کنترل محتوای منتشر شده در چند جا: موتورهای جستجو می‌دانند کدام نسخه URL باید در نتایج نمایش داده شود.
نکات مهم بهینه‌سازی تگ کنونیکال عبارت‌اند از:
همیشه از URL مطلق (Absolute URL) استفاده کنید.
تگ کنونیکال را حتی برای خود صفحه (Self-referencing) اضافه کنید.
از زنجیره‌سازی کنونیکال (مثلاً Page A → Page B → Page C) خودداری کنید، چون موتورهای جستجو را گیج می‌کند.
می‌توانید این تگ را در بخش <head> صفحات اضافه یا از افزونه‌های سئو استفاده کنید که به‌صورت خودکار مدیریت می‌شوند.
استفاده درست از تگ کنونیکال باعث جلوگیری از مشکلات محتوای تکراری، تمرکز سئو روی یک URL مشخص و راهنمایی موتورهای جستجو برای نمایش بهترین نسخه صفحه می‌شود.
-
متاتگ‌های Open Graph و Twitter Card؛ بهینه‌سازی برای شبکه‌های اجتماعی
تگ‌های Open Graph (برای فیسبوک، لینکدین و سایر شبکه‌های اجتماعی) و Twitter Card (برای توییتر) مشخص می‌کنند که وقتی صفحه‌ای را در شبکه‌های اجتماعی به اشتراک می‌گذارید، چه عنوان، توضیح و تصویری نمایش داده شود.
مثال‌هایی از تگ‌های Open Graph:
<meta property=”og:title” content=”عنوان صفحه”>
<meta property=”og:description” content=”توضیح صفحه”>
<meta property=”og:image” content=”URL-تصویر”>
تگ‌های مشابه برای توییتر هم وجود دارند، مثل:
<meta name=”twitter:card” content=”summary_large_image”>
این تگ‌ها به‌طور مستقیم رتبه صفحه در گوگل را تغییر نمی‌دهند، ولی باعث می‌شوند پیش‌نمایش لینک شما در شبکه‌های اجتماعی جذاب‌تر شود. نتیجه این کار افزایش نرخ کلیک (CTR) و تعامل کاربران است.
بسته به پلتفرمی که محتوا را در آن تبلیغ می‌کنید، می‌توانید از افزونه‌هایی مثل Yoast SEO یا All-in-One SEO برای ساخت تگ‌های OG و TC استفاده کنید، یا خودتان این تگ‌ها را دستی در هدر صفحه قرار دهید.
با استفاده صحیح از این تگ‌ها، محتوای شما در شبکه‌های اجتماعی بهتر دیده شده و احتمال به اشتراک‌گذاری و جذب ترافیک بیشتر افزایش پیدا می‌کند.
-
تگ <body>؛ قلب محتوای سایت
تگ <body> بخش اصلی یک صفحه وب است و تمام محتوایی که کاربران می‌بینند یا با آن تعامل دارند، در آن قرار می‌گیرد، مثل:
- متن
- تصویر
- ویدئو
- لینک‌ها
- منوها
برخلاف تگ <head> که اطلاعات فنی و تنظیمات صفحه را برای موتورهای جستجو نگه می‌دارد، <body> مسئول نمایش محتوای مفید و قابل فهم برای کاربران است.
این تفکیک بین <head> و <body> برای سئو اهمیت دارد:
- <head> به بهینه‌سازی فنی صفحه کمک می‌کند.
- <body> محتوای قابل استفاده برای کاربران و موتورهای جستجو ارائه می‌دهد.
به این ترتیب، می‌توانید هم روی جنبه‌های فنی و هم روی محتوای صفحه تمرکز کرده و نتایج بهتری کسب کنید.
به طور کلی، تگ <body> پس از پایان <head> آغاز شده و تا انتهای صفحه ادامه دارد. بدون این تگ، مرورگر نمی‌تواند محتوا را نمایش دهد؛ بنابراین همه محتوای قابل مشاهده باید داخل <body> قرار گیرد.
تگ‌های موجود در <body>، مثل پاراگراف‌ها، تصاویر و لینک‌ها، ساختار صفحه را شکل می‌دهند و در بهینه‌سازی هر بخش نقش مهمی دارند.
-
تگ <main>؛ بخش اصلی محتوا
تگ <main> در HTML5 برای مشخص کردن محتوای اصلی هر صفحه استفاده می‌شود و باید در هر صفحه فقط یک بار به کار برود.
این تگ بخش‌هایی از صفحه را شامل می‌شود که به موضوع اصلی آن مربوط هستند. استفاده از <main> هم برای برنامه‌نویس‌ها واضح است و هم به موتورهای جستجو کمک می‌کند مهم‌ترین بخش صفحه را تشخیص دهند و بهتر ایندکس کنند.
اغلب متن اصلی مقاله یا محتوایی که کاربر با آن تعامل دارد داخل تگ <main> قرار می‌گیرد. برای مثال، در یک وبلاگ، کل مقاله اصلی داخل <main> قرار می‌گیرد تا موتور جستجو بخش مهم صفحه را شناسایی کند.
-
تگ <nav>؛ ساخت منوی ناوبری برای کاربران و ربات‌ها
تگ <nav> برای مشخص کردن بخشی از صفحه استفاده می‌شود که شامل لینک‌های ناوبری است. مثلاً منوهای اصلی سایت، مثل نوار بالای صفحه یا سایدبار، که کاربران را به بخش‌های مهم سایت می‌برند، داخل <nav> قرار می‌گیرند. این کار به موتورهای جستجو و ابزارهای کمک‌کننده برای افراد با نیازهای خاص نشان می‌دهد که این لینک‌ها برای حرکت در سایت هستند.
معمولاً لینک‌هایی مثل «خانه»، «درباره ما» و «تماس با ما» یا فهرست مقالات سایت داخل <nav> قرار می‌گیرند. خود <nav> فقط بلاک ناوبری را مشخص می‌کند و لینک‌ها با تگ <a> درون آن قرار می‌گیرند. استفاده درست از <nav> باعث می‌شود موتورهای جستجو راحت‌تر لینک‌های مهم سایت را شناسایی و صفحات را سریع‌تر ایندکس کنند.
نمونه کد اچ‌تی‌ام‌ال تگ nav به شکل زیر است:
<!DOCTYPE html>
<html>
<body>
<h1>عنصر nav</h1>
<p>عنصر nav مجموعه‌ای از لینک‌های ناوبری را تعریف می‌کند:</p>
<nav>
<a href=”/html/”>HTML</a> |
<a href=”/css/”>CSS</a> |
<a href=”/js/”>JavaScript</a> |
<a href=”/python/”>Python</a>
</nav>
</body>
</html>
در تصویر زیر می‌توانید ببینید که کد HTML این تگ پس از اجرا چگونه نمایش داده می‌شود:
-
تگ <aside>؛ محتوای جانبی و مکمل
تگ <aside> برای محتوای جانبی و کمکی استفاده می‌شود که ارتباطی غیرمستقیم با محتوای اصلی دارد. نمونه‌های آن شامل نوار کناری (sidebar)، باکس پیشنهاد مطالب مرتبط، تبلیغات و لینک‌های کمکی است.
محتوای <aside> مکمل بخش اصلی است و موتورهای جستجو آن را می‌شناسند، ولی اهمیت کمتری نسبت به <main> یا <article> دارد. استفاده درست از <aside> باعث می‌شود ساختار صفحه معنادار شود و ربات‌ها راحت‌تر تشخیص دهند کدام بخش اصلی و کدام بخش فرعی است.
همچنین تگ <aside> از ویژگی‌های عمومی HTML (Global Attributes) و ویژگی‌های رویدادی HTML (Event Attributes) پشتیبانی می‌کند.
-
تگ <article>؛ معرفی مقالات و محتوای مستقل
تگ <article> برای بخش‌هایی از محتوا استفاده می‌شود که به‌تنهایی کامل و مستقل هستند، مثل یک مقاله، خبر یا پست بلاگ. وقتی محتوایی دارید که خودش یک مطلب جدا محسوب می‌شود، آن را داخل <article> قرار دهید تا گوگل آن را به‌عنوان «محتوای اصلی» بشناسد.
مثلاً تیتر و متن یک خبر معمولاً درون یک <article> گذاشته می‌شود. این کار باعث می‌شود محتوا بهتر سازمان‌دهی شده و در نتایج جستجو درست‌تر نمایش داده شود. نمونه کد HTML تگ article به شکل زیر است:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome یک مرورگر وب است که توسط گوگل توسعه داده شد و در سال 2008 منتشر گردید. امروز کروم محبوب‌ترین مرورگر وب در جهان است!</p>
</article>
خروجی که در سایت نمایش داده می‌شود:
-
تگ <footer>؛ بخش پایانی و اطلاعات تکمیلی
تگ <footer> پایین‌ترین بخش یک صفحه یا وب را مشخص می‌کند. در این قسمت اطلاعاتی مثل نام نویسنده، کپی‌رایت، قوانین و مقررات، راه‌های تماس (که باید داخل تگ <address> قرار بگیرند)، لینک مستندات یا صفحات مرتبط، لینک «بازگشت به بالا» و حتی نقشه سایت قرار می‌گیرد.
از نظر سئو، فوتر جای مناسبی برای لینک به صفحات مهم داخلی یا ارائه توضیحات تکمیلی است. هرچند محتوای آن اهمیت کمتری نسبت به بخش اصلی دارد، ولی سازمان‌دهی درست فوتر باعث خوانایی بهتر، بهبود تجربه کاربری و گاهی ایندکس بهتر لینک‌ها می‌شود.
-
تگ‌های H1 تا H6؛ ساختاردهی عنوان‌ها و تیترها
تگ‌های هدینگ از <h1> تا <h6> برای مشخص‌کردن عنوان‌ها و زیرعنوان‌های صفحه استفاده می‌شوند. این تگ‌ها به محتوای شما یک ساختار سلسله‌مراتبی می‌دهند که هم خواندن متن را برای کاربران آسان‌تر می‌کند و هم به موتورهای جستجو کمک می‌کند موضوع اصلی و بخش‌های فرعی را بهتر درک کنند.
- H1: عنوان اصلی و مهم‌ترین تیتر صفحه است ( فقط یک‌بار در هر صفحه استفاده می‌شود).
- H2 تا H6: برای زیرتیترها و بخش‌های جزئی‌تر به ترتیب سلسله‌مراتب به کار می‌روند.
برای استفاده از تگ‌های H1 تا H6 به نکات زیر توجه کنید:
- یک H1 در هر صفحه: داشتن چند H1 باعث گیج‌شدن ساختار می‌شود، پس بهتر است تنها یک H1 داشته باشید.
- رعایت سلسله‌مراتب: ترتیب را منطقی حفظ کنید (مثلاً از H1 به H2، سپس H3). پرش از یک سطح به سطح پایین‌تر درست نیست.
- استفاده از کلمات کلیدی: کلمه کلیدی اصلی در H1 و کلمات کلیدی مرتبط (LSI) به‌صورت طبیعی در H2 و H3 قرار گیرند.
- عنوان‌دهی معنایی: از هدینگ‌ها برای معنا دادن به محتوا استفاده کنید، نه صرفاً برای بزرگ‌تر کردن متن.
گوگل تاکید می‌کند که ساختار درست هدینگ‌ها بیشتر برای دسترس‌پذیری مهم است و تاثیر مستقیمی بر رتبه‌بندی ندارد. ولی هدینگ‌ها به موتورهای جستجو کمک می‌کنند یک «نقشه ذهنی» از محتوا بسازند و این موضوع شانس شما برای نمایش در Featured Snippets را افزایش می‌دهد.
-
تگ <a> و ویژگی‌های href و rel؛ ساخت لینک‌های داخلی و خارجی
تگ <a> برای ایجاد لینک‌های قابل کلیک در صفحات وب استفاده می‌شود. صفت href آدرس مقصد لینک را مشخص می‌کند و متنی که بین <a> و </a> قرار می‌گیرد، همان انکر تکست (Anchor text) یا متن قابل کلیک است:
<a href=”https://example.com/page”>عنوان لینک</a>
گوگل لینک‌های دارای href را دنبال می‌کند و متن لینک به درک بهتر محتوای صفحه مقصد کمک می‌کند. همچنین، صفت rel می‌تواند نوع و رفتار لینک را مشخص کند:
- rel=”nofollow”: موتورهای جستجو ارزشی به صفحه مقصد منتقل نکنند.
- rel=”sponsored”: لینک تبلیغاتی یا اسپانسری است.
- rel=”ugc”: لینک توسط کاربر تولید شده (مثل نظرات یا پست‌های انجمن).
استفاده درست از لینک‌ها، به‌ویژه لینک‌سازی داخلی و تنظیم مناسب صفت rel، نقش مهمی در بهبود سئو و تجربه کاربری دارد.
-
تگ <img> و ویژگی‌های src و alt؛ بهینه‌سازی تصاویر برای سئو
تگ <img> برای درج تصویر در صفحه استفاده می‌شود. صفت src مسیر (URL) تصویر را مشخص می‌کند و صفت alt یک توضیح متنی برای تصویر ارائه می‌دهد. متن جایگزین (alt) به موتورهای جستجو کمک می‌کند محتوای تصویر را درک کنند و ارتباط آن با محتوای صفحه را نشان دهند. به همین دلیل، در سئوی تصویر رعایت نکات زیر اهمیت دارد:
- متن alt باید دقیق، توصیفی و کوتاه باشد و محتوای تصویر را منتقل کند.
- بهتر است طول متن alt بیش از حدود ۱۲۵ کاراکتر نباشد تا توسط خزنده‌ها نادیده گرفته نشود.
- در صورت امکان، می‌توانید یک کلمه کلیدی مرتبط در alt قرار دهید، ولی از استفاده بیش از حد آن خودداری کنید.
علاوه بر سئو، متن alt زمانی که تصویر بارگذاری نشود نمایش داده می‌شود و به افزایش دسترسی‌پذیری سایت کمک می‌کند.
-
تگ‌های <ul> ،<li> ،<ol>؛ ایجاد لیست‌های منظم و کاربردی
تگ‌های <ul> (لیست بدون ترتیب) و <ol> (لیست با ترتیب) همراه با <li> (آیتم لیست) برای ایجاد لیست در HTML استفاده می‌شوند.
هر آیتم لیست داخل <li> نوشته می‌شود. این لیست‌ها کمک می‌کنند محتوا منظم شود و نکات مهم به شکل نقطه‌ای یا شماره‌دار نمایش داده شوند.
لیست‌ها مستقیم روی رتبه‌بندی سایت تاثیر ندارند، ولی موتورهای جستجو محتوای آن‌ها را می‌شناسند و گاهی در نتایج غنی (Rich Snippet) نشان می‌دهند. همچنین، استفاده از لیست خوانایی متن را افزایش می‌دهد و برای نمایش مراحل کاری، ویژگی‌ها یا نکات مهم مناسب است.
مثلاً، نکات یا مراحل کاری را در قالب لیست بنویسید تا ظاهر محتوا مرتب‌تر شود و گوگل بتواند هر بخش را به‌صورت جداگانه شناسایی و ایندکس کند.
-
تگ‌های <table> ،<tr> ،<td>؛ نمایش داده‌ها به صورت جدولی
تگ <table> همراه با <tr> (سطر جدول) و <td> (سلول جدول) برای نمایش داده‌های جدولی استفاده می‌شود. جداول برای نشان دادن داده‌های ردیفی یا عددی مناسب هستند.
نباید از جدول برای طراحی ظاهر و چیدمان صفحه استفاده کنید؛ در این موارد بهتر است سراغ CSS و تگ‌های بخش‌بندی مثل <div> بروید.
از نظر سئو، جدول اهمیت خاصی ندارد و موتورهای جستجو به استفاده از آن اهمیتی نمی‌دهند. بنابراین اگر داده‌ای مثل قیمت‌ها یا مشخصات دارید، جدول HTML مناسب است؛ ولی استفاده از جدول فقط برای ظاهر بهتر توصیه نمی‌شود. هدف اصلی این است که ساختار صفحه معنادار و خوانا باشد.
-
تگ <blockquote>؛ نقل‌قول‌ها و محتوای استنادی
تگ <blockquote> برای جداکردن نقل قول‌های طولانی یا متن‌هایی که از منابع دیگر آمده‌اند استفاده می‌شود. این تگ نشان می‌دهد که محتوا از یک منبع خارجی گرفته شده است. استفاده درست از <blockquote> مستقیم روی رتبه سایت تاثیر ندارد، ولی اگر همراه با لینک به منابع معتبر و محتوای مفید باشد، به اعتبار صفحه و تجربه کاربری کمک می‌کند.
-
تگ‌های <strong> و <em>؛ تاکید و برجسته‌سازی محتوا
تگ <strong> برای تاکید بیشتر (متن پررنگ بولد) و <em> برای تاکید معمولی (متن ایتالیک) استفاده می‌شوند. این تگ‌ها به متن معنا و اهمیت بیشتری می‌دهند؛ مثلاً <strong> نشان می‌دهد که این بخش مهم‌تر است.
امروزه گوگل فقط به وجود مستقیم این تگ‌ها توجه نمی‌کند؛ ولی قرار دادن متن‌های مهم داخل آن‌ها به کاربر کمک می‌کند راحت‌تر روی نکات کلیدی تمرکز کند. استفاده متعادل از این تگ‌ها متن را هم جذاب‌تر و هم منظم‌تر می‌کند.
-
تگ‌های اسکیما (Schema Markup)؛ راهی برای فهم بهتر گوگل
اسکیما (Schema) یا داده ساختاریافته، قالبی است که به موتورهای جستجو کمک می‌کند محتوای صفحه را بهتر درک کند. با استفاده از اسکیما می‌توانید بخش‌های مهم صفحه مثل محصول، رویداد، پرسش و پاسخ یا نقد و بررسی را مشخص کنید تا گوگل راحت‌تر متوجه محتوای شما شود.
این کد معمولاً با JSON-LD در بخش <head> یا با Microdata در تگ‌های HTML اضافه می‌شود.
مزیت اصلی اسکیما این است که باعث می‌شود محتواهای‌تان در نتایج جستجو و ریچ‌اسنپیت‌ها ظاهر شوند، مثل نمایش ستاره‌ها، قیمت، زمان آماده‌سازی و… استفاده درست از داده‌های ساختاریافته تجربه کاربری بهتری ایجاد می‌کند و احتمال دیده‌شدن و کلیک روی نتایج شما را افزایش می‌دهد.
برای هر نوع محتوا، اسکیما مناسب خودش وجود دارد (مثل schema.org/Product یا schema.org/Article) و باید متناسب با محتوای صفحه استفاده شود.
آیا استفاده از همه این تگ‌های html ضروری است؟
خیر، لازم نیست همه تگ‌ها را در هر صفحه وب استفاده کنید. باید تگ‌ها را بر اساس نیاز و محتوای صفحه به کار ببرید. مثلا اگر سایت شما تک‌زبانه است، به تگ hreflang نیازی ندارید. بعضی تگ‌های قدیمی مثل <meta name=”keywords”> هم امروزه در سئو اهمیتی ندارند.
مهم این است که تگ‌ها را درست و با معنی استفاده کنید. داشتن HTML درست به‌تنهایی باعث بهبود رتبه نمی‌شود؛ ولی از بروز مشکلات فنی جلوگیری می‌کند. مثلاً تگ‌های سئو را در جای مناسب، یعنی داخل <head> قرار دهید تا گوگل آن‌ها را بخواند. جا‌به‌جا کردن تگ‌ها باعث می‌شود گوگل آن‌ها را نادیده بگیرد.
خلاصه اینکه فقط از تگ‌هایی استفاده کنید که به محتوا ارزش می‌دهند و ساختار آن را مشخص می‌کنند؛ برچسب‌گذاری معنی‌دار مهم‌تر از استفاده صرف همه تگ‌ها است.
سخن پایانی
رعایت اصول بهینه‌سازی در استفاده از تگ‌های HTML در سئو می‌تواند به بهبود عملکرد صفحات وب در نتایج جستجو کمک کند. با استفاده درست از تگ‌های ساختاری و متا، موتورهای جستجو محتوای شما را بهتر درک کرده و کاربران بیشتری جذب می‌شوند. البته تگ‌های HTML تنها بخشی از سئو هستند و کیفیت محتوا، سرعت سایت و تجربه کاربری هم اهمیت زیادی دارند. مهم‌ترین نکته این است که محتوای ارزشمند و مرتبط تولید کنید تا هم کاربران و هم موتورهای جستجو رضایت داشته باشند.
