معرفی کوتاه متا تگها
متا تگها اجزاء کد HTML هستند که برای بازدیدکننده‌های سایت غیر‌قابل رویت هستند اما نقش حیاتی در عملکرد سئو و تجربه کاربر در بازدید سایت دارند. با استفاده از متاتگ‌ها می‌توان اطمینان حاصل کرد که مرورگرها و موتورهای جستجو آنطور که شما می‌خواهید رفتار می‌کنند و محتوا را در صفحه نتایج جستجو مطابق خواسته شما نشان می‌دهند.
در این مقاله درباره مهم‌ترین متا تگها اطلاعات کسب خواهید کرد: meta title، meta description، meta robots و سایر برچسب هایی که اغلب با متا تگها اشتباه گرفته می‌شوند!
متا تگ‌های HTML
متا تگ توسط مرورگر به‌کار گرفته می‌شود تا محتوا را به درستی نشان دهد و موتورهای جستجو آن را برای این به‌کار می‌برند تا بدانند چگونه باید رفتار کنند. همه متا تگها با استفاده از برچسب تعریف می‌شوند و در بخش صفحه شما قرار می‌گیرند. متا تگها در صفحه سایت قابل رویت نیستند بلکه در سورس کد صفحه هستند.
به مثال زیر توجه کنید:
- به کل تکه کد، المان متا گفته می‌شود (meta element)
- meta قسمت ابتدای تگ است.
- name نوع متاتگ را مشخص می‌کند.
- content شرح متاتگی که مشخص کردیم است.
تگِ متا تایتل Meta title tag
متا تایتل یک جزء HTML است که برای مرورگرها و موتورهای جستجو تعیین می‌کند که عنوان صفحه چیست. عنوان، به صورت اولین جزء قابل کلیک در صفحه نتایج موتور جستجو قابل مشاهده است و با کلیک بر روی آن کاربر به صفحه موردنظر منتقل می‌شود.
قبل از اینکه بیشتر پیش برویم ضروری است کمی شفاف سازی بکنیم: اگرچه متا تایتل به احتمال زیاد حیاتی‌ترین فراداده برای موتورهای جستجو است، اما از دید HTML، تگ تایتل هرگز یک متا تگ نیست.
در واقع اگر تایتل تگ یک متا تگ محسوب می‌شد باید کد آن به شکل زیر می‌بود:
<meta name="title" content="Here goes the title">
در حالی که به این شکل است:
<title>Here goes the title</title>
با این حال، گرچه تایتل تگ یک متا تگ واقعی نیست اما در بین سئو کاران با عنوان متا تایتل شناخته می‌شود و بیشتر سئو کاران انتظار دارند که معرفی تایتل‌تگ را دراین مقاله ببینند.
متا تایتل در صفحه نتایج گوگل، اینگونه به کاربران نشان داده می‌شود:
و به این شکل در سورس کد صفحه قابل مشاهده است:
<title>Title tag: the ultimate reference guide to make it work for you</title>
حداکثر طول متا تایتل چقدر است؟
از آن‌جایی که گوگل، یاهو، بینگ و سایر موتورهای جستجو مقرارت و پیش‌نیازهای متفاوتی برای طول تایتل تگ دارند، این قاعده را به خاطر داشته باشید:
- حداکثر اندازه 575 پیکسل، یعنی حدود 60 کاراکتر
- حداقل اندازه 285 پیکسل، حدود 30 کاراکتر
آنچه شما باید در تگ متا تایتل وارد کنید
تگ متا تایتل فرصتی است برای این که کاربران را متقاعد کنید تا از سایت شما بازدید کنند؛ بنابراین زمانی که دارید یک تایتل‌تگ می‌نویسید باید کاربر را در نظر داشته باشید. تایتل‌تگ باید منحصربه‌فرد، خوانا و شامل مهم‌ترین نکات کلیدی مرتبط با محتوا باشد.
استفاده از نام تجاری و جداکننده ها
اگر یک برند مشهور هستید، درج نام تجاری خود در عنوان باعث افزایش میزان کلیک می‌شود؛ به همین دلیل است که بسیاری از شرکت‌ها از تگ متا تایتل در عنوان استفاده می‌کنند. معمولاً تایتل‌تگ با یک کاراکتر جدا کننده مثل (-) و (|) از نام برند جدا می‌شود. برای نمونه تصویر زیر را ببینید:
اخیراً در توییتر، سئوکاران یک بحث داغ داشتند که بهترین نوع جداکننده کدام است؟ نتیجه‌ای که حاصل شد این بود: تا حدی به طول تایتل‌تگ شما بستگی دارد؛ برای یک عنوان طولانی این جداکننده (|) می‌تواند بهتر باشد، زیرا پیکسل کم‌تری دارد و فضای بیش‌تری در اختیار حروف دیگر می‌گذارد. اما با در نظر گرفتن همه این‌ها، انتخاب جداکننده در نهایت به سلیقه شما مربوط است.
پیشنهاد میکنم برای نوشتن یک تگ عنوان عالی مقاله همه چیز درباره تگ عنوان، چگونه تایتل تگ جذاب بنویسیم؟ حتما مطالعه کنید.
تگ متا دیسکریپشن Meta description tag
مانند متا تایتل، متا دیسکریپشن meta description هم یک جزء ضروری تکه کد صفحه‌ی شماست که کاربران می‌توانند در نتایج جستجو ببینند. اگرچه اهمیت آن از نظر سئو نسبتاً کم است عمدتا به این دلیل که گوگل کلمات کلیدی موجود در توضیحات متا را به عنوان یک فاکتور رتبه‌بندی در نظر نمی‌گیرد. با این حال یک تگ متا دیسکریپشن بد می‌تواند نرخ کلیک سایت شما را کاهش دهد.
متا دیسکریپشن باید خوانا، منحصربه‌فرد و از همه مهم‌تر باید محتوای صفحه شما را خلاصه کند. همچنین باید ۱۵۵-۷۰ کاراکتر (۹۲۰-430 پیکسل) طول داشته باشد و شامل کلمات کلیدی مرتبط با محتوا باشد. Google آن‌ها را به شکل بولد شده در تکه کد شما نشان می‌دهد و این باعث می‌شود که موتور جستجو احتمالاً متا دیسکرپشن صفحه شما را بازنویسی نکند.
برای مثال، تصویر زیر متا دیسکریپشن یک صفحه را نشان می‌دهد:
<!--
<meta name="description" content="در سئولوژی بیاموزید چگونه با راهنمایی صحیح از محتوای خود بیشترین بهره را ببرید" />
-->
چه زمانی گوگل متا دیسکریپشن را دوباره بازنویسی می‌کند؟
گوگل بعضی مواقع متا دیسکریپشن شما را نادیده می‌گیرد و از خودش یک متا دیسکریپشن ایجاد و آن را جایگزین می‌کند. سه دلیل زیر نشان می‌دهد که چرا گوگل می‌تواند متا دیسکریپشن شما را تغییر دهد:
- متا دیسکریپشن محتوای صفحه را به‌درستی خلاصه نکرده اید.
- متا دیسکریپشنی که به‌صورت خودکار توسط گوگل ایجاد می‌شود، گاهی اوقات می‌تواند با دقت بیش‌تری محتوای جستجو شده را با صفحه وب شما منطبق کند؛ به‌خصوص زمانی که محتوای شما به‌طور دقیق متناسب با مطلب جستجو شده نباشد.
- ممکن است گوگل در تلاش باشد پرسش و مطلب جستجو شده را با محتوا مطابقت دهد، اما این مطابقت در متا دیسکریپشن شما وجود نداشته باشد؛ در واقع متا دیسکریپشن شما ناقص یا غلط باشد.
این بدان معنی است که برای مطابقت داشتن متا دیسکریپشن با آنچه تنظیم کرده‌اید، باید محتوای وب سایت را تا آنجا که ممکن است در متا دیسکریپشن خلاصه کنید و به پرسش‌ها، مطالب و عناوین جستجویی فکر کنید که منجر به نمایش وب‌سایت شما در صفحه نتایج می‌شود.
تگ متا ربات‌ها Meta robots tag
تگ متا ربات‌ها، تگ‌هایی هستند که به موتورهای جستجو می‌گویند که به‌طور مثال آیا باید لینک‌ها دنبال (فالو) شوند و آیا صفحات وب باید ایندکس (فهرست‌بندی) شوند. یک مورد استفاده معمول از این تگها شناسایی محتوای تکراری است، چرا که محتواهای تکراری قابل ایندکس شدن نیستند. تگ متا ربات‌ها را می‌توان در HTML source یک صفحه یافت و حاوی دستورالعمل‌های خاصی است که هدف آن‌ها را مشخص می‌کند که می‌تواند به این شکل باشد:
<!--
<meta name="robots" content="noindex,follow" />
-->
در کد بالا دستورالعمل‌های noindex و follow اعلام می‌کنند که موتورهای جستجو نباید این صفحه را ایندکس کنند، اما باید تمام پیوندهای آن را فالو (دنبال) کنند.
مثال‌های متنوعی از دستورالعمل‌های تگِ متا ربات‌ها وجود دارد از قبیل noarchive، nosnippet و notranslate که به شما اجازه می‌دهند به موتور های جستجو پیام‌های خاصی بفرستید که رفتار صفحه شما را تغییر دهند.
از تنظیمات این تگها مطمئن شوید که به‌درستی کار می‌کنند و سهواً مانع رفتن ربات به قسمت‌های مهم سایت شما نمی‌شوند.
تگِ متا رفرش Meta refresh tag
این تگ به شما امکان می‌دهد که به یک مرورگر دستور دهید تا پس از یک بازه زمانی مشخص صفحه را به صورت خودکار رفرش کند. به عنوان مثال، این المان به مرورگر می‌گوید که محتوا را در 5 ثانیه رفرش کند:
<!--
<meta http-equiv="refresh" content="5">
-->
تگ متا رفرش Meta refresh tag همچنین برای این مورد استفاده قرار می‌گیرد تا به مرورگر بگوید بعد از مدت زمان مشخص به URL دیگری هدایت شود. مثال زیر مرورگر را بعد از ۵ ثانیه به https://www.example.com هدایت می‌کند:
<!--
<meta http-equiv="refresh" content="5;url=https://www.example.com">
-->
از دیدگاه سئو همیشه توصیه می‌شود به جای متاتگ رفرش از ریدایرکت 301 استفاده کنید زیرا فرایند موتورهای جستجو با ریدایرکت 301 به مراتب سریع‌تر و با قدرت لینک بیشتر انجام می‌شود؛ همچنین تجربه کاربری بهتری را رقم می‌زند چراکه سریع‌تر هدف کاربر را بارگذاری می‌کند.
متا تگ‌های اُپن گراف و توییتر کارت
متا تگها نه تنها ظاهر سایت‌های شما را در صفحات نتایج جستجو تنظیم می‌کنند؛ بلکه می‌توان آن‌ها در پلتفرم‌های اجتماعی مانند فیس‌بوک یا توییتر به کار برد و با متن و تصویر درست می‌توانید بازدید پست‌هایتان را افزایش دهید. به همین دلیل، داشتن کنترل بر ظاهر آن‌ها بسیار مهم است که این کار از طریق متا تگها انجام‌پذیر است.
راه‌اندازی Open Graph برای Facebook و LinkedIn
برای این دو پلتفرم، شما باید کد نشانه‌گذاری اٌپن گراف را در HTML وارد کنید. به این ترتیب می‌توانید عنوانی که می‌خواهید نمایش داده شود، توضیحات مقاله و همچنین تصویری که در فیس بوک و لینکدین نشان داده می‌شود را تنظیم کنید.
این کدها در صفحه کد source شما نشان داده می‌شوند و برای کاربران قابل رویت نیستند:
<!--
<meta property="og:locale" content="fa_IR" />
<meta property="og:type" content="article" />
<meta property="og:title" content="همه چیز درباره متا تگ ها در سئو - سئولوژی" />
<meta property="og:description" content="راهنمای کامل متاتگ‌ها در سئو ،در این مقاله درباره مهم‌ترین متا تگها برای جستجوگرها اطلاعات کسب خواهید کرد متا تگها اجزاء کد HTML هستند" />
<meta property="og:url" content="https://seology.me/meta-tags-in-seo/" />
<meta property="og:site_name" content="سئولوژی" />
<meta property="article:section" content="سئو تکنیکال" />
<meta property="og:updated_time" content="2021-06-15T19:09:31+04:30" />
<meta property="og:image" content="https://seology.me/wp-content/uploads/2021/04/title-tag-seo.jpg" />
<meta property="og:image:alt" content="همه چیز درباره متا تگ ها در سئو" />
-->
بعد از این که ویژگی‌های Open Graph را تنظیم کردید و مطلبی به اشتراک گذاشتید، می‌توانید از صحت عملکرد آن در Facebook Debugger و LinkedIn Inspector اطمینان حاصل کنید.
تنظیم کارت‌های توییتر Twitter Cards
همان روندی که برای تنظیم Open Graph انجام دادید برای تنظیم Twitter Cards نیز انجام می‌شود با این تفاوت که این پلتفرم نشانه‌گذاری مشخصی با نام twitter برای خود دارد. این کدها در صفحه کد source برای شما به نمایش درمی‌آیند:
<!--
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="همه چیز درباره متا تگ ها در سئو - سئولوژی" />
<meta name="twitter:description" content="راهنمای کامل متاتگ‌ها در سئو ،در این مقاله درباره مهم‌ترین متا تگها برای جستجوگرها اطلاعات کسب خواهید کرد متا تگها اجزاء کد HTML هستند" />
<meta name="twitter:image" content="https://seology.me/wp-content/uploads/2021/04/title-tag-seo.jpg" />
-->
بعد ار اینکه خصوصیات توییتر کارت خود را مشخص کردید و محتوایی را به اشتراک گذاشتید، می‌توانید عملکرد آن را در Twitter Card Validator چک کنید.
متا کلمات کلیدی: متا تگ منسوخ شده
Meta keywords یا متا کلمات کلیدی در سال‌های شروع فراگیر شدن اینترنت یعنی در دهه۱۹۹۰ تا اوایل ۲۰۰۰ برای موتورهای جستجو کاربرد داشتند. مدیران شبکه و کارشناسان وب از آن‌ها برای سیگنال دادن به موتورهای جستجو استفاده می‌کردند. کد HTML آن‌ها چیزی شبیه این بود:
<meta name="keywords" content="keyword1, keyword2, keyword3">
اما آنقدر از آن‌ها به شکل بی‌رویه استفاده شد که دیگر ارزشش را از دست داد؛ گوگل، بینگ و دیگر موتورهای جستجو از آن پس وزنی به آن‌ها ندادند. تنها موتور حستجوی قابل قبولی که هنوز هم برای کلمات کلیدی متا وزنی قائل است Yandex است.
با این حال هنوز یک کاربرد برای meta keywords باقی مانده و آن تامین انرژی برای جستجوی داخلی در وبسایت‌ها است؛ به‌خصوص برای فروشگاه‌های اینترنتی که از طریق کلمات کلیدی متا می‌توانند نتایج جستجوی داخلی را تصفیه کنند.
متا تگ های جذاب دیگر
به غیر از متا تگ‌های اصلی اعم از متا تایتل، متا دسکریپشن و متا رباتس تعدادی متا تگ دیگر وجود دارد که به شما کمک می‌کنند به گوگل و مرورگرها سیگنال بدهید که چگونه باید در سایت شما رفتار کنند. اجازه بدهید نگاهی به آن‌ها بیندازیم:Charset meta tag
متا تگ Charset رمزگذاری کد کاراکتر برای سند HTML را به مرورگر نشان می‌دهد. دو مقدار رایج عبارتند از:- ISO-8859-1 – رمزگذاری کاراکتر برای الفبای لاتین.
- UTF-8 – رمزگذاری کاراکتر برای یونی کد.
<!--
<meta charset="UTF-8">
-->
Viewport meta tag
با گسترش روزافزون استفاده از تلفن همراه، کارشناسان وب به این فکر افتادند که محتوای سایت آن‌ها برای نمایش در صفحه گوشی موبایل هم علاوه بر کامپیوتر قابل تنظیم باشد. این تگ ابزار به مرورگر کمک می‌کند تا ناحیه قابل مشاهده را برای کاربران تعریف کند که در دستگاه های مختلف متفاوت است. در مثال زیر کد Viewport meta tag طوری نوشته شده تا صفحه نمایشگر دستگاه ناحیه‌ای را با عرض کامل و زوم ۱۰۰ درصد نشان دهد:
<!--
<meta name="viewport" content="width=device-width, initial-scale=1">
-->
Language meta tag
همان‌طور که از نامش پیداست، زبان ترجیحی محتوای شما را تنظیم می‌کند. این متا تگ توسط Bing و Baidu استفاده می‌شود، در حالی که برای Google بهتر است از ویژگی hreflang استفاده کنید. مثال:
<!--
<meta http-equiv="content-language" content="en">
-->
Adult meta tag
با اجرای این المان، می‌شود به موتورهای جستجو سیگنال داد که محتوای صفحه فقط برای بزرگسالان است و می‌تواند از نتایج جستجو با SafeSearch فیلتر شود. مثال:
<!--
<meta name="rating" content="adult" />
-->
تگ‌های دیگری که معولا با متا تگها اشتباه گرفته می‌شوند:
به غیر از meta title tags، چندین المان دیگر نیز وجود دارند که اغلب با متا تگها اشتباه گرفته می‌شوند. ما احساس می‌کنیم زمان آن رسیده است که این مسئله را یک بار برای همیشه حل و فصل کنیم؛ تگ‌های زیر اغلب متا تگ نامیده می‌شوند، اما در واقع همه آن‌ها از مشخصه‌های ارتباط از طریق لینک هستند و به جای داشتن تگ <meta> در المان HTML، جزئی از تگ <link rel> هستند:
- Canonical URL
- Hreflang attribute
- Pagination attributes
- Mobile attribute
سخن پایانی
متا تگها Meta tags المان‌های قدرتمند HTML هستند که به طرز چشمگیری می‌توانند موفقیت سئوی شما را بهبود ببخشند. برخی از آن‌ها نحوه نمایش محتوای شما را در صفحه نتایج جستجو یا پلتفرم رسانه‌های اجتماعی تنظیم می‌کنند، اما برخی دیگر به شما قدرت کنترل رفتار مرورگرها و ربات‌ها را در وبسایت‌ها می‌دهند. با تنظیم صحیح متا تگها می‌توانید بازید و رتبه سایت یا شبکه اجتماعی خود را بهبود ببخشید. با این حال، در مورد اینکه چه چیزی متا تگ است و چه چیزی نیست سردرگمی وجود داشته است. برای مثال، المان‌هایی مانند title tag، canonical و hreflang اغلب توسط سئو کاران به اشتباه متا تگ نامیده می‌شوند. در کل باید گفت اسم و طبقه‌بندی آن‌ها هرگز به اندازه کاربرد آن‌ها اهمیت ندارد.
