متا تگ‌ها در HTML: چرا سایت شما در نتایج گوگل بد به‌نظر می‌رسد؟ | متا تگ ها در html

یکی از اولین پروژه‌های خبری که بازبینی کردم، سایت بزرگی بود که روزانه صدها بازدید ارگانیک داشت اما نرخ کلیکش در نتایج گوگل به‌طور محسوسی پایین بود. وقتی خروجی HTML را باز کردم، فهمیدم تمام چیزی که گوگل می‌توانست در نتایج نمایش دهد، فقط عنوان و یک تکه متن تصادفی از وسط مقاله بود — چون تگ <meta name="description"> در هیچ صفحه‌ای وجود نداشت. گوگل مجبور بود خودش انتخاب کند چه بخشی از متن را نمایش دهد و این انتخاب، همیشه آن چیزی نبود که مدیر محتوا می‌خواست. آن پروژه، نقطه‌ی چرخش نگاه من به متا تگ‌ها در HTML شد: متا تگ‌ها فقط یک جزئیات فنی نیستند؛ آن‌ها تعیین می‌کنند کاربر در نتایج گوگل و در شبکه‌های اجتماعی، اولین مواجهه‌اش با سایت شما چطور باشد.

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

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

متا تگ‌ها در نگاه اول فقط چند خط کد در بخش head هستند که نه دیده می‌شوند و نه مستقیم روی طراحی اثر دارند. اما در عمل، آن‌ها سه نقش هم‌زمان دارند که هرکدام در پروژه‌ها به‌طور مستقیم اثر می‌گذارند:

نقش سئویی: موتورهای جستجو از متا تگ‌ها برای فهم محتوای صفحه، نمایش snippet در نتایج و کنترل رفتار خزش استفاده می‌کنند. description مستقیم روی نرخ کلیک در نتایج اثر دارد و robots می‌تواند یک صفحه‌ی مهم را به‌کل از نتایج حذف کند. مطالعه‌ی این لایه در سئوی درون‌صفحه چیست و سئو تکنیکال چیست آمده است.
نقش تجربه‌ی کاربری در اشتراک‌گذاری: وقتی لینک سایت شما در واتس‌اپ، تلگرام، توییتر یا لینکدین به اشتراک گذاشته می‌شود، تصویر، عنوان و توضیحی که نمایش داده می‌شود از متا تگ‌های Open Graph می‌آید. اگر این تگ‌ها درست تنظیم نشده باشند، لینک شما در اشتراک‌گذاری‌ها به‌شکل یک لینک خالی و بی‌جذاب نمایش داده می‌شود. در عصر شبکه‌های اجتماعی، این یک اثر تجاری مستقیم دارد.
نقش فنی: متا تگ‌هایی مثل charset و viewport زیربنایی‌ترین عناصر هر صفحه‌ی HTML هستند. نبود charset باعث می‌شود کاراکترهای فارسی به‌شکل عجیب نمایش داده شوند و نبود viewport باعث می‌شود سایت در موبایل ریز و غیرقابل‌استفاده شود. این‌ها را در بخش‌های بعدی توضیح می‌دهم.

در ده‌ها پروژه‌ای که بازبینی کرده‌ام، بازبینی متا تگ‌ها یکی از سریع‌ترین راه‌های پیدا کردن بهبودهای کم‌هزینه با اثر محسوس است. در پروژه‌ای که یک سایت خدماتی بود، بازنویسی description تمام صفحات اصلی و اضافه‌کردن Open Graph، در سه ماه نرخ کلیک در نتایج گوگل را حدود ۳۰٪ بهبود داد و نرخ کلیک در اشتراک‌گذاری‌های شبکه‌های اجتماعی را بیش از دو برابر کرد.

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

ساختار پایه‌ی متا تگ‌ها

متا تگ‌ها در بخش <head> سند HTML قرار می‌گیرند و ساختار پایه‌ی آن‌ها به این شکل است:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="توضیح صفحه">
  <title>عنوان صفحه</title>
</head>

سه ویژگی اصلی در متا تگ‌ها:

charset: انکودینگ سند را تعیین می‌کند. برای صفحات فارسی، همیشه UTF-8.
name: نام متا تگ. تعیین می‌کند این متا چه نوع اطلاعاتی است (description، robots، viewport و ...).
content: مقدار متا تگ. برای متاهای name-based، این ویژگی اجباری است.
property: در بعضی متا تگ‌ها (مثل Open Graph) به‌جای name استفاده می‌شود.

نکته‌ی مهمی که در پروژه‌ها به‌کارم آمده: ترتیب متا تگ‌ها اهمیت دارد. charset باید در ۱۰۲۴ کاراکتر اول سند باشد، در غیر این صورت ممکن است مرورگر قبل از رسیدن به آن، شروع به decode کند. این یعنی قرار دادن charset در ابتدای head، استاندارد است.

charset: زیربنایی‌ترین متا تگ

مهم‌ترین متا تگ در HTML، charset است:

<meta charset="UTF-8">

این تگ به مرورگر می‌گوید سند HTML با چه کدگذاری کاراکتری نوشته شده است. برای صفحات فارسی، UTF-8 همیشه انتخاب درست است چون:

تمام کاراکترهای فارسی را پشتیبانی می‌کند.
استاندارد جهانی است و در تمام مرورگرها پشتیبانی می‌شود.
با کاراکترهای ترکیبی (مثل نیم‌فاصله، اعراب) درست کار می‌کند.
در CMSهای مدرن مثل وردپرس، به‌طور پیش‌فرض فعال است.

اگر charset را نگذارید یا مقدار اشتباه بدهید (مثل windows-1256 که در بعضی سایت‌های قدیمی ایرانی استفاده شده)، کاراکترهای فارسی به‌شکل علامت سؤال یا کاراکترهای عجیب نمایش داده می‌شوند. در پروژه‌ای که یک سایت هفت‌ساله بود، این مشکل باعث شده بود که نام‌های فارسی در بخش نظرات، کاملاً به‌هم‌ریخته و ناخوانا نمایش داده شوند. راه‌حل یک خط بود: اضافه کردن charset UTF-8 و مهاجرت از windows-1256.

viewport: ستون فقرات ریسپانسیو

متا تگ viewport، تعیین می‌کند مرورگر موبایل چطور صفحه را رندر کند:

<meta name="viewport" content="width=device-width, initial-scale=1">

بدون این تگ، مرورگر موبایل فرض می‌کند عرض ویوپورت ۹۸۰ پیکسل است و کل صفحه را در بوم کوچک موبایل زوم می‌کند. نتیجه: سایت ریز، غیرقابل‌خوان و غیرقابل‌استفاده. این یکی از پرتکرارترین اشتباهاتی است که در قالب‌های قدیمی وردپرسی می‌بینم. مطالعه‌ی مفصل این تگ در ریسپانسیو با CSS و مدیا کوئری در CSS آمده است.

دو مقدار مهم در content:

width=device-width: عرض ویوپورت برابر عرض واقعی دستگاه باشد.
initial-scale=1: مقیاس اولیه، ۱ به ۱ باشد (بدون زوم اولیه).

مقادیر اضافه‌ای که در پروژه‌ها به‌کارم آمده:

maximum-scale=5: حداکثر زوم را محدود می‌کند. توصیه می‌کنم کمتر از ۵ نگذارید چون برای دسترس‌پذیری مشکل ایجاد می‌کند.
user-scalable=no: زوم کاربر را کلاً غیرفعال می‌کند. هرگز از این استفاده نکنید چون نقض جدی دسترس‌پذیری است.

description: چراغ راهنمای نتایج گوگل

متا description یکی از مهم‌ترین متا تگ‌ها برای سئو است:

<meta name="description" content="توضیح دقیق و جذاب صفحه در حدود ۱۵۰ تا ۱۶۰ کاراکتر">

سه نکته‌ی مهم که در پروژه‌ها به‌کارم آمده:

۱. طول مناسب

گوگل معمولاً بین ۱۵۰ تا ۱۶۰ کاراکتر از description را نمایش می‌دهد. اگر کوتاه‌تر باشد، فضای ارزشمند نتایج هدر می‌رود. اگر طولانی‌تر باشد، گوگل خودش متن را می‌بُرد که معمولاً جذاب نیست.

۲. کیفیت محتوا

description یک متن تبلیغاتی است، نه یک متن تکنیکال. باید:

کلمه‌ی کلیدی اصلی را در ابتدا داشته باشد.
ارزش دیدنِ این صفحه را به کاربر منتقل کند.
یک دعوت به عمل (CTA) کوچک داشته باشد.
یکتا باشد — هر صفحه‌ی سایت باید description متفاوتی داشته باشد.

۳. تفاوت با نقش سنتی

در سال‌های اخیر، گوگل گاهی به‌جای description، متنی از خود صفحه انتخاب می‌کند که به کوئری جستجوی کاربر مرتبط‌تر باشد. این یعنی description دیگر «کنترل مستقیم» بر snippet نیست، اما همچنان «راهنما» است. اگر description خوب باشد، احتمال انتخاب شدنش بالا می‌رود.

در پروژه‌ای که یک فروشگاه لوازم ورزشی داشت، بازنویسی description تمام صفحات محصول با تمرکز روی ارزش و دعوت به عمل، نرخ کلیک در نتایج را حدود ۲۸٪ بهبود داد. این یک تغییر چندساعته بود که اثر تجاری مستقیم داشت. مطالعه‌ی بیشتر در نقش عنوان و توضیحات در CTR و بهبود رتبه در گوگل.

robots: کنترل رفتار موتورهای جستجو

متا robots به موتورهای جستجو می‌گوید هر صفحه را چطور ایندکس کنند:

<meta name="robots" content="index, follow">

مقادیر پرکاربرد:

مقدار	معنی	کاربرد
`index, follow`	ایندکس کن و لینک‌ها را دنبال کن	حالت پیش‌فرض و توصیه‌شده
`noindex, follow`	ایندکس نکن اما لینک‌ها را دنبال کن	صفحات سبد خرید، نتایج جستجو
`noindex, nofollow`	ایندکس نکن و لینک‌ها را دنبال نکن	صفحات محرمانه، پیش‌نویس‌ها
`noarchive`	کش نکن	محتوایِ زودگذر مثل قیمت
`nosnippet`	snippet نمایش نده	محتوای محرمانه در نتایج

توجه: متا robots با فایل robots.txt متفاوت است. robots.txt به موتور جستجو می‌گوید کدام بخش‌های سایت را نپیماید، در حالی که متا robots رفتار صفحه‌ی خاصی را تعیین می‌کند. تفاوت این دو در سئو تکنیکال چیست و سئو تکنیکال از خزش تا ایندکس آمده است.

یک هشدار مهم از تجربه: هرگز از noindex روی صفحه‌ی اصلی سایت یا صفحات مهم استفاده نکنید. در پروژه‌ای که یک تیم بازاریابی به‌اشتباه این تگ را روی صفحه‌ی اصلی گذاشته بود، سه هفته طول کشید تا صفحه از نتایج گوگل حذف شود، و سه ماه دیگر تا برگردد.

Open Graph: چهره‌ی سایت در شبکه‌های اجتماعی

وقتی لینک سایت شما در شبکه‌های اجتماعی (فیسبوک، لینکدین، واتس‌اپ، تلگرام) به اشتراک گذاشته می‌شود، اطلاعاتی که نمایش داده می‌شود از متا تگ‌های Open Graph می‌آید:

<meta property="og:title" content="عنوان صفحه">
<meta property="og:description" content="توضیح صفحه">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="article">
<meta property="og:site_name" content="نام سایت">
<meta property="og:locale" content="fa_IR">

نکات مهم:

og:title: عنوانی که در اشتراک‌گذاری نمایش داده می‌شود. می‌تواند متفاوت از title صفحه باشد (برای شبکه‌های اجتماعی، معمولاً کوتاه‌تر و جذاب‌تر).
og:description: توضیحی که در اشتراک‌گذاری نمایش داده می‌شود.
og:image: تصویری که به‌عنوان thumbnail نمایش داده می‌شود. سایز توصیه‌شده: ۱۲۰۰×۶۳۰ پیکسل. اگر این تگ را نگذارید یا آدرس اشتباه بدهید، شبکه‌ی اجتماعی یک تصویر تصادفی از صفحه انتخاب می‌کند که معمولاً بدترین انتخاب است.
og:url: آدرس کانونیکال صفحه.
og:type: نوع محتوا (article، product، website، video.movie و ...).
og:locale: زبان و منطقه. برای صفحات فارسی، fa_IR.

در پروژه‌ای که یک سایت خبری بود، اضافه کردن og:image و og:description به تمام مقالات، در شش هفته نرخ کلیک در اشتراک‌گذاری‌های تلگرام و واتس‌اپ را حدود ۴۰٪ افزایش داد. چون آن لینک‌ها به‌جای یک URL خالی، حالا یک کارت جذاب با تصویر و توضیح بودند.

در عصر شبکه‌های اجتماعی، لینکی که در اشتراک‌گذاری‌ها به شکل یک URL خالی نمایش داده شود، عملاً نیمی از مخاطبان بالقوه‌اش را از دست می‌دهد.

نکته‌ی مفید: بعد از اضافه کردن Open Graph، با ابزار Facebook Sharing Debugger یا Telegram Web Preview می‌توانید پیش‌نمایش اشتراک‌گذاری را ببینید. ابزارهای این حوزه در بهترین ابزارهای تست سرعت سایت و سئو چیست هم پوشش داده شده‌اند.

Twitter Cards: کارت‌های اشتراک‌گذاری توییتر

مشابه Open Graph اما برای توییتر (X). متا تگ‌های Twitter Cards:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="عنوان صفحه">
<meta name="twitter:description" content="توضیح صفحه">
<meta name="twitter:image" content="https://example.com/image.jpg">

نکته‌ی جالب: توییتر امروز از Open Graph هم به‌عنوان fallback استفاده می‌کند. یعنی اگر Twitter Cards را تنظیم نکنید اما Open Graph داشته باشید، توییتر از آن‌ها استفاده می‌کند. اما برای کنترل دقیق‌تر، توصیه می‌شود هر دو را تنظیم کنید. مقدار twitter:card با summary_large_image یک کارت بزرگ با تصویر نشان می‌دهد که برای محتوای بصری مؤثرتر است.

canonical: جلوگیری از محتوای تکراری

متا canonical به گوگل می‌گوید نسخه‌ی اصلی یک صفحه کدام است:

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

دقت کنید که این یک متا تگ نیست بلکه از تگ <link> استفاده می‌کند، اما از نظر کاربرد و محل قرارگیری، در همان بخش head و در کنار متا تگ‌ها قرار می‌گیرد.

کاربرد اصلی canonical در سه سناریو:

محتوای تکراری: اگر یک محتوا در دو URL مختلف نمایش داده می‌شود (مثلاً با و بدون www، یا با پارامترهای URL)، canonical به گوگل می‌گوید کدام نسخه اصلی است.
صفحه‌بندی: در صفحه‌بندی دسته‌بندی‌ها، همه‌ی صفحات می‌توانند به صفحه‌ی اول canonical داشته باشند یا هر صفحه به خودش (بستگی به استراتژی).
محتوای syndicated: اگر محتوای شما در سایت دیگری بازنشر می‌شود، آن سایت باید canonical را به صفحه‌ی اصلی شما اشاره کند.

در پروژه‌ای که یک فروشگاه اینترنتی بود، canonical نبود، و محصولات در چهار URL مختلف قابل دسترس بودند (با پارامترهای فیلتر و مرتب‌سازی). این باعث شده بود که گوگل چهار صفحه‌ی تکراری را ایندکس کند و رتبه‌ی هیچ‌کدام بالا نرود. با اضافه کردن canonical، مشکل در چند هفته حل شد. مطالعه‌ی بیشتر در سئو تکنیکال چیست و سئو تکنیکال از خزش تا ایندکس.

hreflang: سایت‌های چندزبانه

اگر سایت شما چند زبان یا چند نسخه‌ی منطقه‌ای دارد (مثل نسخه‌ی فارسی و انگلیسی، یا نسخه‌ی ایران و افغانستان)، متا hreflang به گوگل می‌گوید کدام نسخه به کدام زبان یا منطقه تعلق دارد:

<link rel="alternate" hreflang="fa-IR" href="https://example.com/fa/">
<link rel="alternate" hreflang="en-US" href="https://example.com/en/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

مقدار x-default نسخه‌ی پیش‌فرض را تعیین می‌کند که برای کاربرانی استفاده می‌شود که زبانشaهیچ‌کدام از نسخه‌ها نیست. برای سایت‌های چندزبانه، این تنظیم حیاتی است چون گوگل بدون آن ممکن است نسخه‌ی اشتباهی را به کاربر نمایش دهد.

theme-color و سایر متا تگ‌های مدرن

در سال‌های اخیر، متا تگ‌های جدیدی به HTML اضافه شده که هرکدام کاربرد مشخصی دارند:

theme-color: رنگ نوار آدرس مرورگر را در موبایل تعیین می‌کند. برای یکپارچگی برند، ارزش استفاده دارد: <meta name="theme-color" content="#0055ff">
color-scheme: تعیین می‌کند سایت از چه تم‌هایی پشتیبانی می‌کند (روشن، تیره، یا هر دو). <meta name="color-scheme" content="light dark">
referrer: کنترل اطلاعات referrer ارسالی. <meta name="referrer" content="strict-origin-when-cross-origin">
format-detection: جلوگیری از تبدیل خودکار شماره تلفن به لینک در iOS. <meta name="format-detection" content="telephone=no">

مطالعه‌ی بیشتر درباره‌ی theme-color و تعامل آن با تم تیره در متغیرهای CSS و استانداردهای دسترس‌پذیری وب آمده است.

اشتباهاتی که در پروژه‌ها دیدم

نبود meta description: شایع‌ترین اشتباه. گوگل مجبور می‌شود یک متن تصادفی را نمایش دهد که معمولاً جذاب نیست.
description تکراری در همه‌ی صفحات: بعضی CMSها به‌طور پیش‌فرض یک description کلی به همه‌ی صفحات می‌دهند. این کار هم برای سئو مضر است و هم برای کاربر.
description فقط کلمات کلیدی: انبار کلمات کلیدی به‌جای متن معنادار. این یک اشتباه رایج در بازار ایران است.
نبود charset یا charset اشتباه: کاراکترهای فارسی به‌هم می‌ریزند، مخصوصاً در محتوای تولیدشده توسط کاربران.
نبود viewport: سایت در موبایل ریز و غیرقابل‌استفاده. مهم‌ترین اشتباهی که در قالب‌های قدیمی وردپرسی می‌بینم.
nofollow یا noindex روی صفحات مهم: این می‌تواند یک صفحه‌ی مهم را از نتایج گوگل کاملاً حذف کند. چند بار در پروژه‌ها این را دیده‌ام که با یک تگ اشتباه، صفحه‌ی محصول یا حتی صفحه‌ی اصلی از نتایج حذف شده است.
نبود Open Graph: لینک شما در شبکه‌های اجتماعی به‌شکل یک URL خالی نمایش داده می‌شود که جذابیت چندانی ندارد.
og:image با آدرس نسبی: بعضی شبکه‌های اجتماعی فقط آدرس‌های مطلق را می‌پذیرند. همیشه آدرس کامل با https بدهید.
canonical اشتباه: اگر canonical به صفحه‌ی اشتباه اشاره کند، گوگل صفحه‌ی شما را نادیده می‌گیرد و یک صفحه‌ی دیگر را در نتایج نمایش می‌دهد.
تناقض بین meta robots و robots.txt: اگر robots.txt به موتور جستجو بگوید این صفحه را نپیماید اما متا robots بگوید index کنید، ممکن است گوگل صفحه را ایندکس نکند چون هیچ‌وقت آن را ندیده است. مطالعه‌ی بیشتر در سئو تکنیکال چیست.

بخشی از این اشتباهات در اشتباهات رایج سئو و سئوی درون‌صفحه چیست هم آمده است.

لایه‌ای پایین‌تر از سینتکس meta

اینجا وارد لایه‌ای می‌شوم که در پروژه‌های معمولی به آن نگاه نمی‌شود اما برای مهندسان پلتفرم و توسعه‌دهنده‌های ارشد اهمیت دارد. آنچه مرورگر و اکوسیستم با متا تگ‌های HTML شما می‌کند، در پنج مفهوم خلاصه می‌شود:

Head Parser و Order of Operations: مرورگر HTML را به‌صورت متوالی از بالا به پایین پارس می‌کند. متا تگ‌ها در همان پارس اولیه پردازش می‌شوند، نه بعد از ساخت DOM. به همین دلیل، charset باید در ۱۰۲۴ کاراکتر اول باشد چون قبل از آن، مرورگر نمی‌داند سند با چه encoding decode شود. اگر charset دیر بیاید، ممکن است یک بایت‌سکوئنس خاص باعث شود کل سند با encoding اشتباه decode شود و کاربر یک صفحه‌ی به‌هم‌ریخته ببیند. برای مطالعه‌ی موازی این لایه با کارایی، بهینه‌سازی سرعت سایت و بهینه سازی CSS را ببینید.
Viewport Meta و Browser Viewport Computation: وقتی مرورگر موبایل متا viewport را می‌بیند، یک محاسبه‌ی چندمرحله‌ای انجام می‌دهد: تعیین عرض ویوپورت مجازی، تعیین مقیاس اولیه، و تعیین اینکه آیا زوم کاربر مجاز است یا نه. این محاسبات، پایه‌ی تمام رفتار ریسپانسیو در مرورگرهای موبایل هستند. اگر viewport نباشد، مرورگر عرض پیش‌فرض ۹۸۰ پیکسل را فرض می‌کند که برای سایت‌های مدرن مناسب نیست. مطالعه‌ی موازی این لایه با Media Queries در مدیا کوئری در CSS و ریسپانسیو با CSS آمده است.
Meta Tags و Crawler Priority: موتورهای جستجو متا تگ‌ها را با اولویت مشخص می‌خوانند. به‌طور معمول، عنوان اول خوانده می‌شود، سپس meta robots، سپس meta description. اگر متا robots روی noindex باشد، موتور جستجو ادامه نمی‌دهد و آن صفحه را کنار می‌گذارد. ترتیب متا تگ‌ها در head مستقیماً روی این تصمیم‌گیری اثر دارد. توصیه: همیشه title اول، سپس robots، سپس description، سپس canonical و Open Graph.
Social Preview و Caching: وقتی لینک سایت شما در شبکه‌های اجتماعی به اشتراک گذاشته می‌شود، این پلتفرم‌ها با یک crawler مخصوص، صفحه‌ی شما را می‌خوانند و از Open Graph برای ساخت preview استفاده می‌کنند. اما این اطلاعات در سرور آن‌ها کش می‌شود و اگر بعداً تغییری در OG بدهید، ممکن است روزها طول بکشد تا preview به‌روز شود. راه‌حل: از Debugger مربوط به هر پلتفرم برای پاک کردن کش استفاده کنید. مطالعه‌ی موازی این لایه با تجربه‌ی کاربری در اصول طراحی رابط کاربری موفق و نقش عنوان و توضیحات در CTR آمده است.
Interaction با LLM و Semantic Extraction: در عصر AEO و GEO، متا تگ‌ها به‌عنوان سیگنال‌های ساختاری برای مدل‌های زبانی استفاده می‌شوند. صفحه‌ای که description معنادار، OG درست و schema‌ی مرتبط داشته باشد، شانس بیشتری برای انتخاب شدن به‌عنوان منبع در پاسخ‌های هوش مصنوعی دارد. این یک لایه‌ی در حال رشد در سئو است که در سال‌های آینده اهمیت بیشتری خواهد یافت. مطالعه‌ی این لایه در نقش Schema در AEO و AEO چیست آمده است.

یک تجربه‌ی واقعی از پروژه‌ای که با مسئله‌ی Head Parser Order روبرو شدیم: در یک سایت وردپرسی با پلاگین‌های متعدد، مشکل عجیبی داشتیم — کاراکترهای فارسی به‌طور نامنظم در بعضی صفحات به‌هم می‌ریختند. علت: یک افزونۀ ناشناس، کدی را قبل از تگ charset در head تزریق می‌کرد و همین باعث می‌شد که مرورگر قبل از خواندن charset، شروع به decode کند. راه‌حل: حذف افزونه و انتقال charset به اولین خط head. مشکل در کمتر از یک ساعت حل شد اما چند هفته وقت گرفته بود تا پیدا شود.

اگر روی پروژه‌های وردپرسی هستید و می‌خواهید این لایه‌ها را در قالب خود اعمال کنید، پیشنهاد می‌کنم ابتدا به قالب سبک مهاجرت کنید و بعد متا تگ‌های خروجی را بازبینی کنید. برای مطالعه‌ی موازی با استانداردها و معماری، استانداردهای HTML و CSS و CSS مدرن از Flexbox تا Grid دید وسیع‌تری می‌دهند. برای درک این لایه در چارچوب سئو، سئوی درون‌صفحه چیست، سئو تکنیکال چیست و سئو تکنیکال از خزش تا ایندکس منابع کلیدی هستند. اگر روی دسترس‌پذیری متمرکز هستید، استانداردهای دسترس‌پذیری وب و WCAG چیست را هم ببینید.

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

سخن پایانی این نگاه

متا تگ‌ها در HTML را می‌توان در یک جمله خلاصه کرد: «ابزاری برای معرفی سایت به چهار مخاطب نامرئی: مرورگر، موتور جستجو، شبکه‌های اجتماعی و مدل‌های هوش مصنوعی.» سه درس که از این مسیر با خودم بردم:

charset و viewport را هرگز فراموش نکنید. این دو متا تگ، پایه‌ای‌ترین عناصر هر صفحه‌ی HTML هستند. بدون آن‌ها، یا کاراکترها به‌هم می‌ریزند یا سایت در موبایل غیرقابل‌استفاده می‌شود. این‌ها را در تمام صفحات، در ابتدای head بگذارید.
description را جدی بگیرید. این متا تگ، بیشترین اثر مستقیم را روی نرخ کلیک در نتایج گوگل دارد. در پروژه‌های خودم، بازنویسی description صفحات اصلی، یکی از کم‌هزینه‌ترین و پربازده‌ترین کارهای سئویی بوده است.
Open Graph را جدی بگیرید. در عصری که بیش از نیمی از ترافیک سایت‌های خبری و محتوایی از شبکه‌های اجتماعی می‌آید، نحوه‌ی نمایش لینک شما در اشتراک‌گذاری‌ها یک اثر تجاری مستقیم دارد. این تگ‌ها، چهره‌ی سایت شما در شبکه‌های اجتماعی هستند.

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

اگر در پروژه‌ای با یک مورد عجیب متا تگ روبرو شده‌اید — مثلاً صفحه‌ای که در گوگل ایندکس نمی‌شود بدون دلیل مشخص، یا لینکی که در تلگرام به‌شکل نامناسب نمایش داده می‌شود، یا کاراکترهای فارسی که فقط در بعضی مرورگرها به‌هم می‌ریزند — جزئیات سناریو را در دیدگاه بنویسید. مخصوصاً اگر با بازنویسی description یا اضافه‌کردن Open Graph به یک بهبود قابل اندازه‌گیری در نرخ کلیک رسیده‌اید، همان تجربه برای خواننده‌ی بعدی از هر توضیح کلی ارزشمندتر است.