تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو
تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو در هر فایل html، باید اطلاعاتی درمورد سند و فایلمون به مرورگرها و موتورهای جستجو انتقال بدیم. اطلاعاتی درمورد نام نویسنده، کلمات کلیدی و … به این اطلاعات اصطلاحا metadata متادیتا یا ابَر اطلاعات میگیم. می دونیم که ما در فایل های اچ تی ام ال، تنها چیزی که داریم تگ ها هستن. پس واضحه که این اطلاعات رو باید از طریق تگ ها انتقال بدیم. به تگ هایی هایی که مسئول حمل و ارائه متادیتا ها هستن، تگ متا (تگ meta) میگن.
meta tag یک تگ خالیست پس تگ پایانی نداره، اما اطلاعات اون از طریق ویژگی هاش منتقل میشه. می توان از چندین متا برای منظور های مختلف استفاده کرد. مثل تگ title نیست که شما فقط مجاز به استفاده از یک title باشین.
مکان تگ متا تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو
در مقاله head خدمتتون عرض کردم که متا دیتا ها باید داخل تگ head نوشته بشن. درواقع تگ head مسئول حمل و نقل متادیتا هاست. پس همه تگ های meta باید داخل تگ head نوشته بشن. head عین یه کامیون میمونه و متادیتا ها بار این کامیونن. meta ها معمولا بعد از تگ title نوشته میشن.
نحوه نوشتن
این تگ ها چون تگ های خالی هستن و اطلاعاتشون داخل ویژگی هاشونه پس تگ پایانی یا بسته ندارن. اغلب متا ها یک ویژگی به اسم name دارن و یک مقدار برای اون که به content مشهوره.
اگه خوب دقت کنین می بینین که هیچکدوم از تگ های meta رو با تگ پایانی یعنی نبستیم. اما در بعضی از منابع و مراجع آموزشی نظیر .tutorialspoint متا رو در آخر با یک اسلش تموم کردن که کاملا هم صحیحه.
در بخش های زیر میخام درمورد تک تک تگ های بالا توضیح بدم:
آیا کاربر میتونه ببینه؟
تمامی متاتگ ها و متادیتا ها برای کاربر قابل نمایش نیستن. این اطلاعات در مرورگر به کاربر نمایش داده نمیشه. بهتر بگم اینا مال کاربر نیستن و فقط و فقط اطلاعاتی هستن که به درد مرورگر و موتور جستجو میخورن.
متا تگ charset در اچ تی ام ال تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو
تمامی مرورگرها و موتور های جستجو، به صورت پیش فرض از انکودینگ (ISO-8859-1 (Latin1 برای نمایش کاراکتر های صفحات اچ تی ام ال استفاده می کنن. اما این نوع از encoding در صفحات html فارسی مشکل ساز میشن و باعث میشن کلمات، عبارات و کلا صفحه وب به خوبی نمایش داده نشه. بهترین encoding برای صفحات وب فارسی UTF-8 هستش. ما میتونیم با استفاده از متا تگ charset، به مرورگرها و جستجوگر ها دستور بدیم که از utf-8 برای تجزیه تحلیل و نمایش صفحاتمون استفاده کنه.
هرچند در بعضی از سایت ها، روش های دیگه ای از نحوه نوشتن این متا وجود داره اما، استاندارد ترین روش، روشیه که سایت w3schools در اختیارمون قرار میده :
<head>
<meta charset = "UTF-8" >
</head>
البته در بعضی منابع هم، متا charset رو اینجوری هم نوشتن ولی بهتره از روش اول استفاده کنیم:
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" >متا تگ Keywords یا کلمات کلیدی در HTML
قبلا ها که گوگل اینقدر زرنگ نبود، محتوا نویس ها و صاحبان سایت برای جلب توجه گوگل و بالا بردن سئوی خودشون، این تگ واسشون خیلی مهم بود و از اون برای شناساندن کلمات کلیدی استفاده میکردن. اما خوب میدونین که کلمات کلیدی جزو اون دسته از اطلاعاتیه که واسه موتور جستجو میتونه مهم باشه نه کاربر. پس فکر کنم حدس بزنین که کلمات کلیدی هم نوع دیگه ای از متادیتا ها هستن. پس حتما که یه تگ متایی هم داره دیگه. نه؟
آره و دقیقا بهش میگن متای کلمات کلیدی. یادتونه گفتم اکثر متا ها یه name دارن و یه content ؟ واسه نوشتن یه متای keywords کافیه یه تگ متا باز کنین، در ویژگی name بنویسین keywords و در قسمت content، به ترتیب کلمات کلیدی مهمتون را تایپ بفرمایین.
نکات مهم در نوشتن تگ متای Keywords
- کلمات کلیدی با علامت کاما , باید از هم جدا بشن. معمولا بعد از نوشتن هر کلمه یک کاما می گذارن و بعد یه فاصله میدن بعد از اون کلمه دوم رو می نویسن.
- اگه از کلمه یا کلمات کلیدی انگلیسی استفاده کردین، با حروف کوچک بنویسین.
- کاما با “و” خودمون خیلی فرق داره. دقت کنین.
متا تگ Description یا توضیحات در HTML تگ متا meta یا متا تگ ها در html و نقش آنها در سئو و ریسپانسیو
یکی از مهمترین متاهای اچ تی ام ال تگ description هستش. این تگ توضیحات مختصری از صفحه وب شما ارائه میده. اکثر موتورهای جستجو مثل گوگل، این توضیح رو در صفحه جستجو زیر عنوان مطلب نشون میده که میتونه در جذب کاربر و نرخ کلیک روی اون تاثیر مثبت یا منفی بزاره. کافیه در قسمت name عبارت description و در قسمت content توضیحات ارزنده خودتونو تایپ بفرمایین.
نکاتی درمورد نوشتن صحیح description
- هرچند می تونین هرچقدر خواستین توضیح بنویسین اما بهترین طول برای توضیحات 50 تا 160 کاراکتر است.
- سعی کنین توضیحاتتون رو چنان جالب بنویسین که کاربر به محض دیدنش کلیک کنه.
- از کلمات کلیدی مهم که برای صفحه تون در نظر گرفتین داخل تگ متای description استفاده کنین.
- از توضیحات منحصر به فرد استفاده کنید. به این معنی که نباید از یک توضیح برای دو صفحه از سایتتون استفاده کنین. به عبارتی نباید صفحات شما دارای توضیحات یکسانی باشه. درست مثل تگ title. یادتونه؟
- در توضیحاتتون از هیچ علامتی استفاده نکنین. سعی کنین از کلمات و حروف استفاده کنین.
تگ متای Author یا نویسنده در اچ تی ام ال
با این تگ نام نویسنده صفحه و سند رو ارائه میدن. نحوه نوشتن این متا اینجوریه که در قسمت name می نویسین author و در قسمت content نام نویسنده رو تایپ می کنین و تمام.
تگ متای viewport در HTML و نقش آن در ریسپانسیو
viewport قسمت قابل مشاهده یک صفحه وب برای کاربره. شما وقتی یه سایت و یک صفحه رو باز می کنین، اولین چیزی که مشاهده می کنین رو بهش میگن viewport. قبل از عمومی شدن موبایل و تبلت و … رسم براین بود که صفحات وب غیر قابل انعطاف و صرفا واسه نمایش توی کامپیوتر ها طراحی می شدن. واسه همین مرور یک سایت در موبایل کار مشکلی بود. واسه تماشای یه صفحه معمولی، هی باید اونو به چپ و راست اسکرول می کردین. چون اندازه صفحات وب بزرگ تر از موبایل و تبلت بودن.
اما امروزه صفحات وب منعطف تر و مناسب برای هر دستگاهی ساخته میشن که بهش میگن ریسپانسیو کردن سایت. یکی از کارهایی که سایت نویسا واسه ریسپانسیو سایت انجام میدن، استفاده از متای viewport هستش.
این دستور، زوم اولیه و عرض صفحه وب رو با عرض دستگاه(موبایل، تبلت، لب تاب یا هرچیز دیگه ای) برابر میکنه. همیشه بخاطر داشته باشین که استفاده از این تگ از نون شب هم واجب تره.
متا تگ Revision یا تاریخ آپدیت سند در HTML
از این متا می توان برای مشخص کردن تاریخ آخرین بازبینی و تغییرات در صفحه، استفاده کرد. طرز نوشتنش هم اینجوریه که در قسمت name باید بنویسین revised و در قسمت content تاریخ آپدیت و تغییرات رو درج کنین:
<!-- متا تگ تغییرات -->
<meta name="revised" content="05/12/2013" />
<!-- متا تگ تغییرات -->این تگ برای خزندگان یا ربات های گوگل تگ مهمیه. درواقع خزنده های گوگل بوسیله این تگ از آخرین تغییرات باخبر میشن. اگر یک سئوی خوب میخواین حتما از این متا هم استفاده کنین.
متا تگ رفرش صفحه در HTML
از این متا برای رفرش یک صفحه واسه چند ثانیه یکبار استفاده میشه. اگه در یک صفحه ای نیاز داشتین هر چند ثانیه یکبار، صفحه تون refresh بشه می تونین از این متا استفاده کنین:
<!-- متای رفرش صفحه -->
<meta http-equiv = "refresh" content = "5" />
<!-- صفحه هر 5 ثانیه رفرش خواهد شد -->متا تگ Redirect در اچ تی ام ال
حتی می تونیم بگیم بعد از 5 ثانیه برو به فلان آدرس:
<!-- متای ریدایرکت صفحه -->
<meta http-equiv = "refresh" content = "5; url = https://programstore.ir/" />
<!-- صفحه بعد از 5 ثانیه، آدرس https://programstore.ir/ را باز خواهد کرد -->پشتیبانی مرورگر ها از تگ متا
همه مرورگرها از متاتگ ها حمایت می کنند:
| نام مرورگر | Chrome | Firefox | Safari | Opera | Internet Explorer |
| پشتیبانی میکند؟ | بله | بله | بله | بله | بله |
آموزش از سایت آموزش amp
