متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
با مفهوم تگ در زبان HTML و تگ های اصلی و کلیدی صفحات وب در آموزش پیشین آشنا شدیم، در ادامه مباحثی که بررسی کردیم خواهیم دید که شکل دیگری از تگ ها در صفحات وب به کار می روند که به خودی خود هیچ تاثیر و جلوه ظاهری در خروجی کدها ندارند اما حاوی اطلاعاتی در خصوص نوع صفحات وب و نحوه پردازش آنها هستند که این اطلاعات برای ماشین (اعم از مرورگر، ربات و…) قابل فهم و استفاده است، این نوع تگ ها را در اصطلاح متاتگ (Meta Tag) می گویند که بر خلاف تگ های معمولی (که در قسمت body درج می شوند) در قسمت head صفحه قرار می گیرند، به هر صورت در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.
استفاده از متاتگ، ضروری یا اختیاری؟
به طور کلی درج متاتگ ها در صفحات وب ممکن است ضروری، اختیاری و حتی اشتباه باشد که این موضوع بستگی به نوع کاربرد و نحوه استفاده از آنها دارد، به طور مثال متاتگ مربوط به تعیین یونیکد صفحه (charset) برای اغلب صفحات وب ضروری است چرا که برای پردازش صحیح عبارات متنی در مرورگر مورد نیاز خواهد بود یا متاتگ درج نویسنده مطلب (author) که می تواند اختیاری باشد چون مشخص نیست ربات های موتورهای جستجو تا چه میزان برای این نوع متاتگ ها اهمیت قائل هستند و دسته آخر متاتگ هایی مانند robots که باید با دقت بالا استفاده شوند چون اگر مقدار آنها به درستی تنظیم نشود ممکن است باعث ایجاد مشکل در پیمایش و پردازش صفحه وب بخصوص برای ربات های جستجوگر شوند.
ساختار کلی متاتگ ها در HTML
طبق قوانین قراردادی HTML، متاتگ ها به صورت تکی در قسمت head صفحه وب درج می شوند یعنی نیازی به بستن آنها با تگ دیگری نیست، هر تگ با عبارت meta شروع شده و می تواند یک یا چند صفت (Attribute) با نام name، charset، content، http-equiv و… داشته باشد که این مسئله رویه یکسانی ندارد و بسته به نوع و هدف از بکارگیری متاتگ متفاوت است، هر صفت نیز با یک مقدار تکمیل می شود که منظور از متاتگ را مشخص می کند.
| <meta name=”…” content=”…” > |
| <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>طراحی سایت رایتک | ساختار کلی متاتگ ها در صفحات وب</title> <!– Webgoo.ir –> </head> <body> محتوای صفحه وب </body> </html> |
در بیشتر متاتگ ها دو صفت name و content باید به همراه هم استفاده شوند، در ادامه به طور جزئی تر به انواع مختلف متاتگ ها و نحوه استفاده از آنها در صفحات وب اشاره خواهیم کرد.
متاتگ charset
در HTML نسخه 5 از این متاتگ جهت تعیین یونیکد صفحه وب استفاده می شود، برای اغلب موارد و از جمله زبان فارسی مقدار این متاتگ باید عبارت utf-8 باشد:
| <meta charset=”utf-8″> |
نکته: در نسخه های قدیمی تر HTML در کنار متاتگ charset از متاتگ http-equiv برای تعیین یونیکد صفحه استفاده می شود (اگرچه شیوه قدیمی در HTML5 نیز معتبر است اما روش توصیه شده استفاده صرف از متاتگ charset است).
نکته: یونیکد استانداردی تعریف شده است که با آن کاراکترهای مربوط به زبان (به فرض فارسی) جهت استفاده در سیستم های مبتنی بر متن (مانند مرورگر) ترجمه و نهایتا تبدیل به نمادهای قابل فهم برای انسان می شوند.
متاتگ viewport
منظور از عبارت viewport بخشی از پنجره مرورگر است که صفحه وب در آن قابل مشاهده باشد، این مفهوم زمانی بهتر درک می شود که به طور مثال صفحه وبی با عرض ثابت 960 پیکسل داشته باشیم اما پنجره مرورگر را به اندازه 800 پیکسل کوچک کنیم، در این حالت به احتمال زیاد در انتها اسکرول افقی خواهیم داشت و بخشی از محتوا با وجود پردازش کامل صفحه در دیدمان نخواهد بود، پیش از فراگیر شدن استفاده از انواع مختلف دستگاه های تلفن همراه، فبلت، تبلت و… اغلب صفحات وب صرفا برای مشاهده در کامپیوترهای رومیزی با مقداردهی ثابت پیکسلی طراحی می شدند، این سبک طراحی باعث می شود تا صفحات عریض وب در دستگاه های دارای صفحه نمایش کوچک مانند تلفن همراه با کوچک نمائی (Scale Down) پردازش شوند، به این صورت که مرورگر تلفن همراه صفحه وب را تا آنجا که به طور کامل در محدوده نمایش (Viewport) قرار گیرد کوچک می کند که قاعدتا نتیجه، مطلوبمان نخواهد بود و نیاز است که با انجام بزرگنمایی به صورت دستی به اندازه ایده آل دست پیدا کنیم، برای حل این مشکل شرکت اپل متاتگی تحت عنوان viewport معرفی کرد که اگرچه هنوز رسما جزئی از استاندارد HTML نیست اما به صورت مناسبی در مرورگرهای مختلف پشتیبانی می شود، نحوه استفاده از این متاتگ در اغلب موارد به صورت نمونه زیر است:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
درج این متاتگ در صفحه سبب می شود تا بتوانیم میزان بزرگنمایی اولیه را که بلافاصله پس از بارگذاری صفحه وب توسط مرورگر اعمال می شود تعیین کنیم، صفت content در این متاتگ می تواند پارامترهایی مانند width، height، initial-scale، minimum-scale، maximum-scale و user-scalable با مقادیری به شرح زیر داشته باشد:
width: مقدار پیکسلی مانند 960 یا عبارت device-width به معنی عرض دستگاه.
height: مقدار پیکسلی مانند 960 یا عبارت device-height به معنی ارتفاع دستگاه.
initial-scale: مقدار بزرگنمائی اولیه، معمولا با عدد 1.0 (به معنی عدم بزرگنمایی) تعریف می شود اما می تواند مقادیر عددی دیگری بپذیرد.
minimum-scale: حداقل بزرگنمائی مجاز، عدد 1.0 نقطه شروع و به معنی عدم بزرگنمایی.
maximum-scale: حداکثر بزرگنمائی مجاز، عدد 1.0 نقطه شروع و به معنی عدم بزرگنمایی.
user-scalable: وجود یا عدم وجود قابلیت بزرگنمائی دستی توسط کاربر، با مقدار yes یا no تعریف می شود.
در شیوه های نوین طراحی قالب های وب که صفحات را به صورت واکنش گرا (Responsive) طراحی می کنند، در کنار مقداردهی درصدی (به جای مقداردهی ثابت پیکسلی) و استفاده از امکاناتی چون Media Query در CSS، درج متاتگ viewport نیز نباید فراموش شود، البته برای نوآموزان HTML صرف آشنایی اولیه با این متاتگ کفایت خواهد کرد.
متاتگ های صفت http-equiv
عبارت equiv در این نوع متاتگ مخفف equivalent به معنی معادل است، لذا این متاتگ معادل سربرگ های HTTP را تنظیم می کند، متاتگ با صفت http-equiv می تواند مقادیری چون content-type، refresh، cache-control، cookie و… داشته باشد، در واقع تمام این موارد معادل سربرگ های HTTP هستند که می توان با روش های دیگر مانند استفاده از برنامه نویسی PHP نیز آنها را تنظیم کرد.
متاتگ http-equiv، مقدار content-type
تنظیم مقدار صفت متاتگ http-equiv با عبارت content-type به مرورگر خواهد گفت که صفحه وب ما از چه ساختاری استفاده و کاراکترهای آن از چه یونیکدی پیروی می کند، یک مثال برای استفاده از این متاتگ:
| <meta http-equiv=”content-type” content=”text/html; charset=utf-8″> |
نکته: در HTML نسخه 5 برای تنظیم یونیکد صفحه نیازی به http-equiv نیست و کافی است که از صفت charset استفاده کنیم.
متاتگ http-equiv، مقدار refresh
مقدار دیگری که می توان برای متاتگ http-equiv در نظر گرفت عبارت refresh است که برای تازه سازی صفحه یا انتقال خودکار کاربر به آدرس URL جدید استفاده می شود، در این حالت باید از صفت content نیز استفاده کنیم، صفت content می تواند شامل مقدار زمان به ثانیه جهت تازه سازی صفحه و همچنین آدرس URL مقصد باشد:
| <meta http-equiv=”refresh” content=”5″> |
| <meta http-equiv=”refresh” content=”10; url=https://rightechco.com/”> |
عددی که در این متاتگ درج شده، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد، همان طور که در مثال مشخص است، درج آدرس URL اختیاری است و می توانیم این قسمت را تنظیم نکنیم (در این صورت همان صفحه فعلی تازه سازی خواهد شد).
متاتگ http-equiv، مقدار cache-control
این متاتگ برای مدیریت نحوه ذخیره موقت یا به اصطلاح Cache شدن صفحات وب در مرورگر کاربران به کار می رود، در حالت معمول اغلب مرورگرها محتویات صفحات وب از جمله تصاویر و فایل ها را در حافظه موقت سیستم ذخیره و نگهداری می کنند تا در مراجعات بعدی با سرعت بیشتری به منابع مورد نیاز جهت نمایش صفحه وب دست پیدا کنند، اما گاهی نیاز می شود که محتوای برخی صفحات از این عمل مصون بمانند، بدین منظور از متاتگ cache-control به یکی از شیوه های زیر استفاده می کنیم:
| <meta http-equiv=”cache-control” content=”public”> <meta http-equiv=”cache-control” content=”private”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-store”> |
معنی مقادیر صفت content این متاتگ به قرار زیر است:
– public: محتوا در حافظه مشترک تمام کاربران یک سیستم ذخیره می شود.
– private: محتوا تنها در حافظه نام کاربری فعلی ذخیره می شود.
– no-cache: هیچ ذخیره ای از محتوا در حافظه صورت نمی گیرد.
– no-store: در محدوده زمانی کوتاهتری محتوا ذخیره و نگهداری می شود و به صورت آرشیو در نمی آید.
متاتگ http-equiv، مقدار set-cookie
عبارت دیگری که می توانیم به عنوان مقدار برای متاتگ http-equiv تنظیم کنیم set-cookie است، با این عبارت می توانیم یک کوکی را با نام، مقدار، مسیر و تاریخ انقضای مشخص تعریف کنیم:
| <meta http-equiv=”set-cookie” content=”user_id=123; path=/; expires= Saturday, 13-Jan-18 23:59:59 GMT”> |
در نمونه بالا قسمت user_id=123 نام کوکی و مقدار آن، قسمت path مسیر کوکی (آدرسی که کوکی در آن اعمال می شود) و قسمت expires تاریخ انقضای کوکی (با فرمت Day, DD-MMM-YY HH:MM:SS Timezone) را شامل می شود.
نکته: همان طور که اشاره کردیم متاتگ های گروه http-equiv در واقع روش های جایگزینی برای تنظیم سربرگ های HTTP هستند که معمولا توسط برنامه نویسی سمت سرور مانند PHP تنظیم می شوند.
متاتگ description
یکی از متاتگ هایی که به لحاظ علم بهینه سازی صفحات وب برای موتورهای جستجو (SEO) اهمیت زیادی دارد، متاتگ description است که مانند سایر متاتگ ها در قسمت head صفحه درج می شود، این متاتگ معمولا شامل توضیحی در حد یک یا چند سطر از خلاصه محتوای صفحه است، مثال:
| <meta name=”description” content=”توضیحی در حد چند سطر از محتوای صفحه وب خود را در این قسمت درج می کنیم.”> |
با توجه به اهمیت رعایت سئو در صفحات وب می توان استفاده از این متاتگ را ضروری در نظر گرفت، محتوای متاتگ description می تواند بخشی از مطلب اصلی نیز باشد، به طور مثال پاراگراف اول یا نتیجه پایانی مطلب، معمولا موتورهای جستجو این اطلاعات را در هنگام نمایش لیست نتایج جستجو به کاربران نمایش می دهند.
متاتگ keywords
زمانی نچندان دور متاتگ keywords مانند متاتگ description دارای اهمیت زیادی در علم بهینه سازی صفحات وب برای موتورهای جستجو (SEO) بود، اما اکنون به دلیل تغییر الگوریتم های به کار رفته در موتورهای جستجو و حساسیت بالای این الگوریتم ها در شناسایی صفحات اسپم و جعلی، از میزان اهمیت این متاتگ کاسته شده و به نوعی آن را به حالت اختیاری و حتی غیرضروری درآورده که احتمالا صرفا توسط موتورهای جستجوی متفرقه مورد استفاده قرار می گیرد، به هر صورت نحوه تنظیم این متاتگ به شکل زیر است:
| <meta name=”keywords” content=”کلمات, کلیدی, صفحه, وب”> |
برای جدا سازی کلمات کلیدی در متاتگ keywords، از علامت ویرگول (به صورت زبان انگلیسی) استفاده می کنیم، دقت کنیم که تعداد کلمات کلیدی نباید خیلی کم یا خیلی زیاد باشند، هرچند استاندارد خاصی برای این موضوع وجود ندارد، اما عدد حداقل 3 و حداکثر 10 می تواند منطقی باشد.
متاتگ robots
این متاتگ برای اعمال دستوراتی که ربات های خزنده وب (Web Crawler Bots) از آنها پیروی می کنند مورد استفاده قرار می گیرد، منظور از ربات های خزنده وب برنامه هایی هستند که با هدف پیمایش خودکار صفحات وب نوشته شده اند، این ربات ها می توانند مربوط به موتورهای جستجو، برنامه های تحلیل وب، برنامه های کاوش و استفاده از محتویات صفحات وب و… باشند، در هر حال لازم به ذکر است که دستورات متاتگ robots تنها توسط برخی ربات ها (مانند ربات گوگل) مورد احترام واقع می شود و خیلی از ربات ها توجهی به این متاتگ نمی کنند، از آنجایی که موتورهای جستجو برای این متاتگ به طور جدی احترام قائل هستند لذا استفاده صحیح از آن در صفحات وب اهمیت زیادی دارد، به طور مثال درج مقدار زیر در صفحه اول سایت باعث می شود ربات ها علاوه بر ایندکس (ثبت، index) صفحه فعلی پیوندهای موجود در آن را نیز دنبال و پیمایش (follow) کنند.
| <meta name=”robots” content=”index, follow”> |
با تکه کد بالا، به ربات ها خواهیم گفت که صفحه وب ما را ثبت (index) کرده و لینک های موجود در آن را دنبال (follow) کنند، چند نمونه دیگر از این متاتگ که تنها در موارد خاصی مورد استفاده قرار می گیرد:
| <meta name=”robots” content=”noindex, follow”> <meta name=”robots” content=”noindex, nofollow”> <meta name=”robots” content=”index, nofollow”> |
با توجه به عبارت موجود در قسمت content، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود، noindex به معنی عدم ثبت و nofollow به معنی عدم پیمایش است.
نکته: از مقادیر noindex و nofollow زمانی استفاده می شود که نخواهیم به هر دلیل صفحه وب توسط ربات ها کاوش شود، به طور مثال صفحات مربوط به ورود کاربران، صفحات شخصی و…
متاتگ generator
متاتگ generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند به کار می رود، درج این متاتگ اختیاری است و تاثیر خاصی در رتبه و عملکرد صفحه وب در موتورهای جستجو ندارد:
| <meta name=”generator” content=”phpStorm”> |
متاتگ author
برای مشخص کردن نویسنده مطلب از این متاتگ می توانیم استفاده کنیم، هرچند مشخص نیست بودن یا نبودن آن چه تاثیری در عملکرد موتورهای جستجو دارد اما در هر صورت برای سایت ها و وبلاگ هایی که چند مدیر و کاربر مجزا دارند می تواند مفید باشد:
| <meta name=”author” content=”admin”> |
متاتگ expires
متاتگ expire تاریخ انقضای صفحه وب را مشخص می کند، کاربرد آن اختیاری است و بسته به شرایط معمولا برای صفحاتی که به صورت مدت زمان محدود طراحی می شوند کاربرد دارد، این متاتگ به لحاظ SEO تاثیر زیادی بر روی عملکرد سایت یا وبلاگ در موتورهای جستجو ندارد:
| <meta name=”expires” content=”Tue, 21 Jun 1999″> <meta name=”expires” content=”never”> |
متاتگ copyright
برای مشخص کردن اینکه محتوای صفحات وب دارای کپی رایت یا حقوق مولف است از این متاتگ در کدهای خود استفاده می کنیم، هرچند استفاده از آن هیچ تضمینی برای عدم سوء استفاده دیگران از محتوای ما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:
| <meta name=”copyright” content=”(c) 2019 rightechco.com”> |
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود اما آشنایی با موارد گفته شده تا حدود زیادی کاربردهای عادی در صفحات وب را پوشش می دهد.
