تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو

meta تگ متا در HTML و تاثیر آن در سئو و ریسپانسیو

در هر فایل html، باید اطلاعاتی درمورد سند و فایلمون به مرورگرها و موتورهای جستجو انتقال بدیم. اطلاعاتی درمورد نام نویسنده، کلمات کلیدی و … به این اطلاعات اصطلاحا metadata متادیتا یا ابَر اطلاعات میگیم. می دونیم که ما در فایل های اچ تی ام ال، تنها چیزی که داریم تگ ها هستن. پس واضحه که این اطلاعات رو باید از طریق تگ ها انتقال بدیم. به تگ هایی هایی که مسئول حمل و ارائه متادیتا ها هستن، تگ متا (تگ meta) میگن. اصطلاح های متادیتا و ابَر اطلاعات در مقاله تگ head در html کامل توضیح داده شدن.

meta tag یک تگ خالیست پس تگ پایانی نداره، اما اطلاعات اون از طریق ویژگی هاش منتقل میشه. می توان از چندین متا برای منظور های مختلف استفاده کرد. مثل تگ title نیست که شما فقط مجاز به استفاده از یک title باشین.

مکان تگ متا

در مقاله head خدمتتون عرض کردم که متا دیتا ها باید داخل تگ head نوشته بشن. درواقع تگ head مسئول حمل و نقل متادیتا هاست. پس همه تگ های meta باید داخل تگ head نوشته بشن. head عین یه کامیون میمونه و متادیتا ها بار این کامیونن. meta ها معمولا بعد از تگ title نوشته میشن.

نحوه نوشتن

این تگ ها چون تگ های خالی هستن و اطلاعاتشون داخل ویژگی هاشونه پس تگ پایانی یا بسته ندارن. اغلب متا ها یک ویژگی به اسم name دارن و یک مقدار برای اون که به content مشهوره. در عکس زیر می تونین مکان متا ها و طرز نوشتن اونا رو ببینین:

جای تگ متا تگ در کدهای html

 

اگه خوب دقت کنین می بینین که هیچکدوم از تگ های meta رو با تگ پایانی یعنی <meta/> نبستیم. اما در بعضی از منابع و مراجع آموزشی نظیر .tutorialspoint متا رو در آخر با یک اسلش تموم کردن که کاملا هم صحیحه:

 پایان تگ متا تگ

 

در بخش های زیر میخام درمورد تک تک تگ های بالا توضیح بدم:

آیا کاربر میتونه ببینه؟

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

متا تگ charset در اچ تی ام ال

تمامی مرورگرها و موتور های جستجو، به صورت پیش فرض از انکودینگ (ISO-8859-1 (Latin1 برای نمایش کاراکتر های صفحات اچ تی ام ال استفاده می کنن. اما این نوع از encoding در صفحات html فارسی مشکل ساز میشن و باعث میشن کلمات، عبارات و کلا صفحه وب به خوبی نمایش داده نشه. بهترین encoding برای صفحات وب فارسی UTF-8 هستش. ما میتونیم با استفاده از متا تگ charset، به مرورگرها و جستجوگر ها دستور بدیم که از utf-8 برای تجزیه تحلیل و نمایش صفحاتمون استفاده کنه.

هرچند در بعضی از سایت ها، روش های دیگه ای از نحوه نوشتن این متا وجود داره اما، استاندارد ترین روش، روشیه که سایت w3schools در اختیارمون قرار میده :

تگ متا تگ charset

 

البته در بعضی منابع هم، متا charset رو اینجوری هم نوشتن ولی بهتره از روش اول استفاده کنیم:

متا تگ Keywords یا کلمات کلیدی در HTML

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

آره و دقیقا بهش میگن متای کلمات کلیدی. یادتونه گفتم اکثر متا ها یه name دارن و یه content ؟ واسه نوشتن یه متای keywords کافیه یه تگ متا باز کنین، در ویژگی name بنویسین keywords و در قسمت content، به ترتیب کلمات کلیدی مهمتون را تایپ بفرمایین :

تگ متا تگ keywords در اچ تی ام ال

نکات مهم در نوشتن تگ متای Keywords

  • کلمات کلیدی با علامت کاما , باید از هم جدا بشن. معمولا بعد از نوشتن هر کلمه یک کاما می گذارن و بعد یه فاصله میدن بعد از اون کلمه دوم رو می نویسن.
  • اگه از کلمه یا کلمات کلیدی انگلیسی استفاده کردین، با حروف کوچک بنویسین.
  • کاما با “و” خودمون خیلی فرق داره. دقت کنین.

متا تگ Description یا توضیحات در HTML

یکی از مهمترین متاهای اچ تی ام ال تگ description هستش. این تگ توضیحات مختصری از صفحه وب شما ارائه میده. اکثر موتورهای جستجو مثل گوگل، این توضیح رو در صفحه جستجو زیر عنوان مطلب نشون میده که میتونه در جذب کاربر و نرخ کلیک روی اون تاثیر مثبت یا منفی بزاره. کافیه در قسمت name عبارت description و در قسمت content توضیحات ارزنده خودتونو تایپ بفرمایین.در زیر یه نمونه از این متا رو مشاهده می فرمایین:

تگ متا تگ توضیحات description

نکاتی درمورد نوشتن صحیح description

  • هرچند می تونین هرچقدر خواستین توضیح بنویسین اما بهترین طول برای توضیحات 50 تا 160 کاراکتر است.
  • سعی کنین توضیحاتتون رو چنان جالب بنویسین که کاربر به محض دیدنش کلیک کنه.
  • از کلمات کلیدی مهم که برای صفحه تون در نظر گرفتین داخل تگ متای description استفاده کنین.
  • از توضیحات منحصر به فرد استفاده کنید. به این معنی که نباید از یک توضیح برای دو صفحه از سایتتون استفاده کنین. به عبارتی نباید صفحات شما دارای توضیحات یکسانی باشه. درست مثل تگ title. یادتونه؟
  • در توضیحاتتون از هیچ علامتی استفاده نکنین. سعی کنین از کلمات و حروف استفاده کنین.

تگ متای Author یا نویسنده در اچ تی ام ال

با این تگ نام نویسنده صفحه و سند رو ارائه میدن. نحوه نوشتن این متا اینجوریه که در قسمت name می نویسین author و در قسمت content نام نویسنده رو تایپ می کنین و تمام. مثلا:

تگ متا تگ author یا نویسنده

تگ متای viewport در HTML و نقش آن در ریسپانسیو

viewport قسمت قابل مشاهده یک صفحه وب برای کاربره. شما وقتی یه سایت و یک صفحه رو باز می کنین، اولین چیزی که مشاهده می کنین رو بهش میگن viewport. قبل از عمومی شدن موبایل و تبلت و … رسم براین بود که صفحات وب غیر قابل انعطاف و صرفا واسه نمایش توی کامپیوتر ها طراحی می شدن. واسه همین مرور یک سایت در موبایل کار مشکلی بود. واسه تماشای یه صفحه معمولی، هی باید اونو به چپ و راست اسکرول می کردین. چون اندازه صفحات وب بزرگ تر از موبایل و تبلت بودن.

اما امروزه صفحات وب منعطف تر و مناسب برای هر دستگاهی ساخته میشن که بهش میگن ریسپانسیو کردن سایت. یکی از کارهایی که سایت نویسا واسه ریسپانسیو سایت انجام میدن، استفاده از متای viewport هستش:

تگ متا یا تگ viewport یا متا تگ ریسپانسیو

 

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

متا تگ Revision یا تاریخ آپدیت سند در HTML

از این متا می توان برای مشخص کردن تاریخ آخرین بازبینی و تغییرات در صفحه، استفاده کرد. طرز نوشتنش هم اینجوریه که در قسمت name باید بنویسین revised و در قسمت content تاریخ آپدیت و تغییرات رو درج کنین:

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

متا تگ رفرش صفحه در HTML

از این متا برای رفرش یک صفحه واسه چند ثانیه یکبار استفاده میشه. اگه در یک صفحه ای نیاز داشتین هر چند ثانیه یکبار، صفحه تون refresh بشه می تونین از این متا استفاده کنین:

متا تگ Redirect در اچ تی ام ال

حتی می تونیم بگیم بعد از 5 ثانیه برو به فلان آدرس:

پشتیبانی مرورگر ها از تگ متا

همه مرورگرها از متاتگ ها حمایت می کنند:

نام مرورگرChromeFirefoxSafariOperaInternet Explorer
پشتیبانی میکند؟بلهبلهبلهبلهبله

 

در پایان، اگه قصد آموزش HTML به صورت ویدیویی رو دارین، پکیج بی نظیر و جامع زیر رو معرفی می کنم:

فیلم آموزش HTML به صورت ساده، کامل، از صفر تا صد در قالب سه ویدیو جمعا به اندازه 3 ساعت و 30 دقیقه مناسب برای تمام سنین

مطالب زیر را حتما بخوانید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.