آموزش HTML - متا تگ ها

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

تگ <meta> برای ارائه چنین اطلاعات اضافی استفاده می شود. این تگ یک عنصر منفرد است ، بنابراین تگ بسته شدن ندارد . اطلاعات با استفاده از صفات در آن درج می شوند .

شما می توانید بر اساس اطلاعاتی که می خواهید در سند خود نگه دارید، یک یا چند متا تگ (metatag) را در سند خود بگنجانید، به طور کلی، متا تگ ها بر ظاهر فیزیکی سند تأثیر نمی گذارد و در مرورگر نمایش داده نمی شوند .

افزودن متا تگ به صفحه وب

می‌توانید با قرار دادن تگ‌های <meta> در هِدِر صفحه که با تگ‌های <head> و </head> نشان داده می‌شود، متادیتا را به صفحات وب خود اضافه کنید. یک متا تگ می تواند دارای ویژگی های زیر باشد

Sr.No	ویژگی و توضیحات
1	نام - name نام متادیتا در مقابل صفت name نوشته می شود . برای مثال می توانیم مقدار name را برابر با keywords یا description قرار دهیم . صفت name نوع متاتگ را مشخص می کند .
2	محتوا - content صفت content ، مقدار یا محتوای مربوط به متادیتا را درون خود نگه می دارد
3	طرح - scheme برای تفسیر محتوا یا توضیح بیشتر درباره محتوای متادیتا ، به عنوان مثال لینک حاوی اطلاعات بیشتر و غیره از این صفت استفاده می شود
4	http-equiv از این صفت برای تنظیم پاسخ http می شود . برای مثال برای رفرش صفحه یا تنظیم کوکی مقادیر مربوطه برای این صفت تنظیم می شود . مقادیر شامل content-type, expires, refresh و set-cookie می باشد

تعیین کلمات کلیدی

شما می توانید از تگ <meta> برای تعیین کلمات کلیدی مهم مرتبط با سند استفاده کنید و سپس این کلمات کلیدی توسط موتورهای جستجو در بررسی می شوند . ( البته الان مدت هاست که گفته می شود این تگ متا منسوخ شده و مورد استفاده موتورهای جستجو قرار نمی گیرد ، با این وجود هنوز تعدادی از طراحان و برنامه نویسان ترجیح می دهند از این متا تگ در وب سایت ها و صفحات html خود استفاده کنند )

مثال

برای تعریف متادیتای کلمات کلیدی مانند مثال زیر عمل می کنیم ، کلمات کلیدی به وسیله کاما انگلیسی ( , ) از هم جدا می شوند

<!DOCTYPE html>
<html>
   
   <head>
      <title>مثال متای کلمات کلیدی</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
   </head>
   
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
   
</html>

همانطور که گفتیم متادیتاها در هنگام اجرای صفحه وب ، در مرورگر نمایش داده نمی شوند

شرح سند و متای توضیحات

می توانید از تگ <meta> برای ارائه توضیحات کوتاه در مورد سند استفاده کنید. این توضیحات توسط موتورهای جستجوی مختلف در حین فهرست کردن صفحه وب شما مورد استفاده قرار می گیرد

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>مثال متای توضیحات</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
   
</html>

تاریخ بازبینی سند

می توانید از این تگ <meta> برای دادن اطلاعات در مورد آخرین باری که سند به روز شده است استفاده کنید. این اطلاعات می تواند توسط مرورگرهای وب مختلف در حین تازه کردن صفحات وب شما استفاده شود.

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>مثال تاریخ بازبینی صفحه</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "revised" content = "Tut24, 17/12/2022" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

رفرش خودکار صفحه

یک تگ <meta> می تواند برای تعیین مدت زمانی استفاده شود که پس از آن صفحه وب شما به طور خودکار به روز می شود.

مثال

اگر می خواهید صفحه شما پس از هر 5 ثانیه به روز شود، از کد زیر استفاده کنید.

<!DOCTYPE html>
<html>

   <head>
      <title>مثال رفرش خودکار صفحه</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "revised" content = "Tut24, 17/12/2022" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

تغییر مسیر صفحه

می توانید از تگ <meta> برای تغییر مسیر و ریدایرکت صفحه خود به هر صفحه وب دیگری استفاده کنید. همچنین اگر می‌خواهید صفحه را پس از چند ثانیه تغییر مسیر و انتقال دهید، می‌توانید مدت زمانی را مشخص کنید.

مثال

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

<!DOCTYPE html>
<html>

   <head>
      <title>مثال انتقال خودکار صفحه با استفاده از متا تگ</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "revised" content = "Tut24, 17/12/2022" />
      <meta http-equiv = "refresh" content = "5; url = https://www.example.com" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

تنظیم کوکی ها

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

می توانید از تگ <meta> برای ذخیره کوکی ها در سمت کاربر (در مرورگر کاربر ) استفاده کنید .

مثال

در مثال زیر یک کوکی به همراه تاریخ انقضای آن به صفحه وب اضافه می کنید

<!DOCTYPE html>
<html>
   <head>
      <title>مثال ذخیره کوکی با استفاده از تگ متا</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 17-Dec-22 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
</html>

اگر تاریخ و زمان انقضا را درج نکنید، کوکی یک کوکی از نوع session در نظر گرفته می شود و با خروج کاربر از مرورگر حذف می شود.

تنظیم نام نویسنده

با استفاده از متا تگ می توانید نام نویسنده را در یک صفحه وب مشخص کنید. مثال زیر را ببینید -

مثال

<!DOCTYPE html>
<html>

   <head>
      <title>مثال نام نویسنده با استفاده از کوکی</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "author" content = "Mohammad Fateh" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

تنظیم نوع کاراکتر صفحه توسط متا تک

می توانید از تگ <meta> برای تعیین نوع کاراکترهای مورد استفاده در صفحه وب استفاده کنید.

مثال

به طور پیش فرض، سرورهای وب و مرورگرهای وب از کدگذاری ISO-8859-1 (Latin1) برای پردازش صفحات وب استفاده می کنند. در زیر مثالی برای تنظیم کدگذاری UTF-8 آمده است

<!DOCTYPE html>
<html>

   <head>
      <title>مثال نوع کاراکتر صفجه</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "author" content = "Mohammad Fateh" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

برای ارائه صفحه ایستا با نویسه های چینی سنتی، صفحه وب باید حاوی یک تگ <meta> برای تنظیم رمزگذاری Big5 باشد

<!DOCTYPE html>
<html>

   <head>
      <title>مثال صفحه ایستا با نویسه های چینی سنتی</title>
      <meta name = "keywords" content = "آموزش html , آموزش طراحی سایت , برنامه نویسی تحت وب" />
      <meta name = "description" content = "آموزش زبان نشانه گذاری اچ تی ام ال و متا تگ ها" />
      <meta name = "author" content = "Mohammad Fateh" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>
           در این بخش شما طراحی سایت با استفاده از اچ تی ام ال را یاد میگیرید
      </p>
   </body>
	
</html>

در html 5 روش بهتری برای مشخص کردن نوع انکدینگ (encoding) صفحه وجود دارد ، برای مشخص کردن نوع کدگذاری کاراکترها در html 5 از متای زیر استفاده می شود

<meta charset="UTF-8">

تگ های نوشتاری - درس قبلی

درس بعدی - کامنت گذاری