کاوشگران صنعت پارس آرین آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML) | آموزش سئو و بهینه سازی وب سایت گروه پارس آرین
۰

آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)

html-meta-tag-refreshهمانطور که می دانیم، صفحات وب از استاندارد خاصی تحت عنوان کدهای HTML یا (HyperText Markup Language) پیروی می کنند، بدین معنی که فارغ از اینکه به چه زبان سمت سروری برنامه نویسی کنید، حاصل کار در وب، به صورت کدهای html نمایان خواهد شد، از طرفی گاهی مواقع به دلایل مختلف دسترسی به سرور محدود شده یا امکان پذیر نیست و برای اعمال دستورات و سلایق خود ناچاریم تنها دست به دامن این کدها شویم، نمود بارز این موضوع در سرویس های مدیریت وبلاگ خودنمائی می کند؛ مثلا اگر بخواهید کاربران را از وبلاگ قدیمی خود به وبلاگی جدید به صورت خودکار هدایت کنید، باید از متاتگی به نام رفرش (refresh) استفاده کنید که در این مطلب می خواهیم به تفصیل در رابطه با آن صحبت کنیم.

متاتگ refresh چیست؟

متاتگ رفرش یا refresh که به آن redirect هم می گویند، زیرمجموعه ای از شاخه متاتگ های http-equiv است که برای ارسال سربرگهای HTML یا HTTP header به کار می روند (به طور ساده HTTP header به معنی پاسخ های استاندارد و تعریف شده است که در مقابل درخواست مرورگر ارسال می شود تا مثلا وضعیت صفحه یا سرور، نحوه پردازش، یونیکد، ذخیره سازی و… را مدیریت کند)، متاتگ های http-equiv کاربردهای خاصی دارند، مانند:

– کنترل ذخیره (کَش) شدن صفحه (cache-control)

<meta http-equiv="cache-control" content="no-cache" />

– زبان محتوای صفحه (content-language)

<meta http-equiv="content-language" content="fa-IR" />

– نوع محتوای صفحه (content-type)

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

– تاریخ ایجاد صفحه (date)

<meta http-equiv="date" content="Wed, 21 Feb 2012 20:55:12 GMT" />

– تاریخ انقضای صفحه (expires)

<meta http-equiv="expires" content="never" />

– تاریخ آخرین ویرایش صفحه (last-modified)

<meta http-equiv="last-modified" content="Mon, 01 Jan 2013 18:32:44 GMT" />

– تعیین موقعیت برای انتقال (location)

<meta http-equiv="location" content="URL=http://webgoo.ir" />

– تعیین مدت زمان برای رفرش خودکار صفحه (refresh)

<meta http-equiv="refresh" content="200" />

– تنظیم کوکی ها (set-cookie)

<meta http-equiv="set-cookie" content="webgoocookie=value;expires=Fri, 1 Dec 2013 11:30:00 GMT; path=http://webgoo.ir">

– نحوه نمایش صفحه در فِرِم (window-target)

<meta http-equiv="Window-Target" content="_top" />

در چه مواردی از متاتگ refresh استفاده کنیم؟

واقعیت این است که استفاده از متاتگ رفرش (refresh) برای صفحاتی که اهمیت زیادی دارند توصیه نمی شود و ممکن است این کار باعث بروز مشکلاتی با موتورهای جستجو شود، اما این بدین معنی نیست که به کل نمی توان از این متاتگ استفاده کرد، اگر به فرض وبلاگی داشته باشید که دیگر مطالب آن برایتان اهمیتی نداشته باشد و در مقابل وبلاگ جدیدی ایجاد کرده باشید، می توانید از این متاتگ استفاده کرده و کاربران را به طور خودکار به آن هدایت (redirect) کنید، یا فرض کنید در صفحات موسوم به ۴۰۴ (صفحه مورد نظر پیدا نشد!)، می توانید کاربر را به صفحه اصلی انتقال دهید، نمونه دیگر می تواند استفاده از آن در هنگام ورود و خروج کاربران به سیستم باشد و یا درموقعیت های مشابه که نیاز به انتقال خودکار یا redirect است، پس یادمان باشد که استفاده از این متاتگ در همه جا توصیه نمی شود و فقط در موارد خاصی که مخصوصا پای موتورهای جستجو در میان نیست، می توانیم از آن استفاده کنیم.

چگونه از متاتگ refresh استفاده کنیم؟

استفاده از این متاتگ چندان سخت نیست، کافی است درون تگهای head ترجیحا در ابتدای صفحه، کد زیر را قرار دهید و زمان و صفحه مقصد را تنظیم نمائید.

<meta http-equiv="refresh" content="30; URL=http://webgoo.ir" />

توضیح:
– مقادیر موجود در قسمت content میزان زمان (به ثانیه) است که کاربر به صفحه مقصد منتقل می شود.
– قسمت مربوط به URL با آدرس کامل صفحه مقصد باید تکمیل شود.
از متاتگ refresh برای بارگذاری دوباره همان صفحه نیز می توان استفاده کرد و نیازی نیست حتما کاربر را به صفحه ای دیگر منتقل (redirect) کنیم (بستگی به هدف شما دارد).

<meta http-equiv="refresh" content="200" />

آشنایی با سایر روش های redirect

در انتهای این مطلب بد نیست به سایر روش هایی که برعکس متاتگ refresh، مورد قبول موتورهای جستجو است، اشاره کنیم.
– استفاده از فایل htaccess و ۳۰۱ redirect
بهترین گزینه برای ایجاد یک انتقال از صفحه ای (لینکی) به صفحه (لینک) دیگر، استفاده از دستور “HTTP/1.1 301 Moved Permanently” است، برای این منظور در فایلی به نام htaccess. معمولا در سرورهای Apache می توان تنظیماتی را انجام داد؛ مثلا:

RewriteEngine on
RewriteRule (.*) http://webgoo.ir/ [R=301,L]

– استفاده از HTTP header در php
علاوه بر htaccess، در کدهای php نیز می توان این کار را با ارسال دستورات HTTP header انجام داد، خوشبختانه زبان پرقدرت و انعطاف پذیر php به راحتی قادر است مقادیر ارسالی به عنوان header صفحات را مدیریت کند.

<?php
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://webgoo.ir" );
?>

برای دیدن سایر متاتگ های HTML و آشنایی با کاربرد آنها می توانید به این لینک مراجعه کنید:
آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)

html-meta-tagsپیش از این و در مطالب قبلی از بخش آموزش مقدماتی html با کلیاتی از این زبان پایه برنامه نویسی وب، آشنا شدیم و تا حدودی مسیرمان را به سوی کدنویسی پیشرفته تر هموار کردیم، تگ های اصلی و سازنده فرم و اسکلت بندی صفحات را شناختیم و با مثال هایی از آنها تمرین کردیم و به قدرت این زبان ساده ولی کاربردی بیشتر پی بردیم؛ اکنون و در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.

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

متاتگ http-equiv:

این متاتگ به مرورگر خواهد گفت که صفحه شما از چه ساختاری استفاده می کند و کاراکترهای آن از چه یونیکدی (یونیکد به زبان ساده یعنی روشی استاندارد که با آن کاراکترهای به فرض زبان فارسی، برای سیستم یا مرورگر تبدیل به کد و قابل فهم می شوند) پیروی می کنند، یک مثال برای استفاده از این متاتگ:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

متاتگ description:

بعد از تگ title و http-equiv در html، متاتگ description از بالاترین اهمیت برای موتورهای جستجو برخوردار است، برای اینکه ربات های جستجوگر را نسبت به محتوای صفحه خود راهنمایی کنید، حتما این متاتگ را به صورت زیر در کد خود (بین تگ head و بعد از title و http-equiv) به کار ببرید:

<meta name="description" content="توضیحی برای مطلب شما" />

متاتگ keywords:

keywords نیز یکی دیگر از متاتگ های کلیدی صفحات html است که مربوط به موتورهای جستجو است؛ نحوه کابرد آن به شکل زیر است:

<meta name="keywords" content="کلمات, کلیدی, شما" />

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

متاتگ robots:

این متاتگ برای اعمال دستوراتی روی ربات های جستجوگر است، البته همه ی ربات ها از این متاتگ پیروی نمی کنند، اما بد نیست که در صفحه اول سایت خود آن را به صورت زیر استفاده کنید:

<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، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود.

متاتگ generator:

از generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد:

<meta name="generator" content="Dreamweaver CS" />

متاتگ author:

برای مشخص کردن نویسنده مطلب، از این متاتگ می توانید استفاده کنید، البته بودن یا نبودن آن چندان فرقی ندارد، ولی برای سایت ها و وبلاگهایی که چند مدیر و کاربر مجزا دارند می تواند مفید باشد:

<meta name="author" content="name family" />

متاتگ expires:

تاریخ انقضای یک صفحه را مشخص می کند، کاربرد آن اختیاری است و تاثیر زیادی بر روی عملکرد سایت یا وبلاگ شما در موتورهای جستجو ندارد:

<meta name="expires" content="tue, 21 Jun 1999" />
<meta name="expires" content="never" />

متاتگ copyright:

برای مشخص کردن اینکه محتوای صفحات شما دارای کپی رایت یا حقوق مولف است، از این متاتگ در کدهای خود استفاده کنید، البته استفاده از آن هیچ تضمینی برای سوء استفاده نکردن دیگران از محتوای شما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:

<meta name="copyright" content="your copyright text here" />

متاتگ refresh:

از refresh برای انتقال یک کاربر از صفحه ای به صفحه ای دیگر یا همان صفحه، به طور خودکار می توانید استفاده کنید، به این عمل در اصطلاح ریدایرکت (redirect) می گویند:

<meta http-equiv="refresh" content="10; URL=http://webgoo.ir/" />

عددی که در این متاتگ ملاحظه می کنید، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد.

متاتگ 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" />

مقادیر این متاتگ به قرار زیر است:
– public: محتوای شما در حافظه مشترک تمام کاربران یک سیستم ذخیره می شوند.
– private: محتوای شما تنها در حافظه نام کاربری شما ذخیره می شود.
– no-Cache: هیچ ذخیره ای از محتوای شما در حافظه صورت نمی گیرد.
– no-Store: در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند.
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود، ولی مهم ترین آنها بعد از title و http-equiv متاتگ های keywords و description هستند که استفاده از آنها برای هدایت موتورهای جستجو و کسب نتایج بهتر ضروری است؛ علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.