آشنایی با ۵ تگ کاربردی متا در زبان HTML

آشنایی با ۵ تگ کاربردی متا در زبان HTML

تگ‌های متا برای ذخیره‌سازی بخشی از اطلاعات صفحه به کار می‌روند که این اطلاعات از دید کاربران پنهان بوده و اساساً مربوط به داده‌های درون صفحه است که یا به درد موتورهای جستجویی همچون گوگل می‌خورد و یا مورد استفادهٔ مرورگر قرار می‌گیرند. هدف اصلی این تگ‌ها تأمین اطلاعات برای مرورگر و موتورهای جستجو است تا صفحه را بهتر ایندکس کنند تا در نهایت صفحات سایت ما برای موتورهای جستجو بهینه شوند. طراحان سایت از این تگ‌ها برای مشخص کردن اطلاعاتی مانند نویسندهٔ مطلب، توضیحات یا کلمات کلیدی، طراح سایت و ... استفاده می‌کنند. با این حال، این تگ‌ها قابلیت‌هایی دارند که اکثراً از وجود آنها باخبر نیستیم که در ادامه به بررسی 5 قابلیت کلیدی این تگ‌ها می‌پردازیم.

کنترل کش مرورگر 
زمانی که برای اولین بار یک سایت را در مرورگر باز می‌کنید، مرورگر اطلاعات آن صفحه را درون کش خود ذخیره می‌کند تا برای دفعات بعدی که وارد سایت می‌شوید عمل بارگذاری سریع‌تر انجام گیرد. احتمالاً برای شما هم پیش آمده زمانی که در سایت خود تغییراتی می‌دهید، این تغییرات روی ظاهر صفحه اعمال نمی‌شوند و دلیل این مسأله این است که مرورگر از اطلاعاتی که قبلاً ذخیره کرده است برای بارگذاری صفحه استفاده می‌کند. اما شما به سادگی می توانید با یک تگ سادهٔ متا، عمل کش کردن را در مرورگرهای مختلف غیرفعال کنید:


<meta http-equiv="Cache-Control" content="no-store" />  

این کد برای مرورگرهای فایرفاکس، کروم و اینترنت اکسپلورر به رسمیت شناخته می‌شود. شما حتی برای مرورگر اینترنت اکسپلورر نیز می‌توانید دسترسی بیشتری به تنظیمات ذخیره‌سازی داشته باشید:


<meta http-equiv="Cache-Control" content="no-cache" />  
<meta http-equiv="Pragma" content="no-cache" />  

علاوه بر این، می‌توانید یک تاریخ برای زمانی که کدهای سایت را تغییر داده‌اید نیز تعیین کنید تا اطمینان حاصل کنید که مرورگر از اطلاعات کش استفاده نمی‌کند:


<meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" />  

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

کنترل کوکی‌ها 
همچون کَش، کوکی هم حاوی بخشی از اطلاعات است که مرورگر با مشاهدهٔ یک صفحه آنها را ذخیره می‌کند تا در هر بار ورود به سایت از آن داده‌ها استفاده کند. برای کنترل کوکی‌ها با تگ متا، می‌توانید از نمونه کد زیر استفاده کنید:


<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE">  

name=data اسم کوکی هست که مقداری قرار است در آن ذخیره شود، path راه دستیابی به اطلاعات است و expires تاریخ و زمان حذف شدن آن کوکی از مرورگر شما است که اگر مقدار آن را خالی بگذارید کوکی هنگامی که مرورگر را ترک کنید از بین خواهد رفت یا اصطلاحاً Kill خواهد شد. به عنوان مثال داریم:


<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2017 00:00:00 GMT">  

رفرش کردن صفحهٔ سایت
شما می‌توانید با استفاده از این کد، با گذشت یک زمان مشخص صفحه را رفرش کنید. به عنوان مثال، کد زیر صفحه را هر ۵ ثانیه رفرش می‌کند:


<meta http-equiv="refresh" content="5">  

ریدایرکت کردن کاربران
شما می‌توانید با استفاده از این نوع تگ متا مسیر سایت را به یک مسیر مشخص دیگر تغییر دهید. در مثال زیر، 5 ثانیه پس از باز شدن صفحه، شما به مسیر example.com هدایت می‌شوید:


<meta http-equiv="refresh" content="5; url=http://example.com/">  

برای آن که بلافاصله مسیر سایت تغییر کند، نیاز دارید تا زمان را به 0 تغییر دهید:


<meta http-equiv="refresh" content="0; url=http://example.com/">  

جابه‌جایی بین صفحات
شما می‌توانید یک جابه‌جایی مانند آنچه در نرم افزار پاورپوینت وجود دارد با تگ متا در صفحات به‌وجود آورید که نمونه‌هایی از کدهای آن را می توانید مشاهده کنید:


<meta http-equiv="page-enter" content="revealtrans(duration=seconds,transition=num)" />  
<meta http-equiv="page-exit" content="revealtrans(duration=seconds,transition=num)" />  
<meta http-equiv="page-enter" content="blendTrans(duration=sec)" />  

توجه داشته باشید که این کد فقط برای مرورگر اینترنت اکسپلورر قدیمی قابل استفاده است و این تگ از تگ‌های اختصاصی مایکروسافت است. با تغییر duration می‌توانید مدت زمان فعالیت آن را تغییر دهید؛ transition هم می‌تواند یک عدد صحیح از 0 تا 23 باشد که اشاره به نوع انتقال صفحه دارد.