در مقالات قبلی آموزش مقدماتی html با کلیاتی از این زبان پایه برنامه نویسی وب، آشنا شدیم و تا حدودی مسیرمان را به سوی کدنویسی پیشرفته تر هموار کردیم، اکنون و در این مطلب می خواهیم در ادامه مباحث آموزش زبان HTML، نحوه استفاده از متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم. به طور کلی متاتگ ها، جزء عناصر اصلی صفحات وب به شمار می روند و بسته به میزان اهمیتشان ممکن است وجودشان ضروری (Necessary) یا انتخابی و اختیاری (Optional) باشد که در ادامه به طور جزئی تر به آنها اشاره خواهیم کرد.
جایگاه متا تگ ها
تگ های Meta در بین تگهای Head قرار میگیرند. به شکل زیر :
<html>
<head>
<title>عنوان صفحه </title>
<meta tag 1 />
<meta tag 2 />
<meta tag 3 />
…
</head>
<body>
محتوای صفحه
</body>
</html>
همانطور که در کدهای بالا مشاهده می کنید تگ های متا بین <head></head>قرار گرفته اند،اگر چندین تگ متا داشته باشید همه آنها پشت سر هم قرار می گیرند.در ادامه مهمترین و پرکاربردترین تگ های متا را معرفی خواهیم کرد.
متاتگ های http-equiv
این تگ ها از پرکاربرد ترین تگ های Meta هستند .این تگ ها کاربردهای گوناگون و مهمی دارند که در ادامه مهمترین استفاده های این تگ ها را بیان خواهیم کرد.
1- تعیین زبان
با استفاده از این تگ می توانید زبان سایت خود را برای مرورگر و موتورهای جستجوی مشخص کنید.استفاده از این تگ ها برای سایت ها و بلاگ های فارسی که متن فارسی درون صفحه وجود داره بسیار مهم می باشد،زیرا این تگ های متا به مرورگر اعلام می کنند که این یک صفحه به زبان فارسی می باشد و مرورگر محتوای صفحه را به درستی نمایش می دهد. شاید در بعضی سایت ها مشاهده کرده باشید که متن های فارسی به صورت به هم ریخته نمایش داده می شوند، دلیل این مشکل عدم استفاده از این تگ های متا می باشد. دو متا تگ مهم که برای مشخص کردن زبان و یونیکد (تعریف یونیکد را در ادامه بیان خواهیم کرد) صفحه وب استفاده می شوند عبارتند از :
<meta http-equiv="Content-Language" content="fa">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
این متاتگ ها به مرورگر خواهد گفت که صفحه شما از چه ساختاری استفاده می کند و کاراکترهای آن از چه یونیکدی پیروی می کنند
یونیکد چیست
یونیکد به زبان ساده یعنی روشی استاندارد که با اسفتاده از آن کاراکترهای هر زبانی ( به عنوان مثال زبان فارسی )، برای مرورگر قابل فهم می شوند.
2- مدیریت ذخیره (cache) شدن صفحات
این متاتگ برای مدیریت نحوه ذخیره یا به اصطلاح 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: در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند
به طور کلی متاتگ کنترل کش (cache-control) برای آن دسته صفحاتی مفید است که بطور دایم اطلاعات آن به روز می شود و باید اطلاعات بصورت مداوم از سرور فراخوانی گردد.
3- انتقال به صفحه ای دیگر
از این متا تگ از برای بارگذاری مجدد یک صفحه یا انتقال یک کاربر از صفحه ای به صفحه ای دیگر، به طور خودکار می توانید استفاده کنید، به این عمل در اصطلاح ریدایرکت (redirect) می گویند.مثالی از نحوه استفاده از این تگ را در قطعه کد زیر مشاهده می کنید:
<meta http-equiv="refresh" content="10; URL=http://pzof.ir/" />
عددی که در این متاتگ ملاحظه می کنید، مقدار زمان به ثانیه است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد.اگر مقدار مشخصه url را مقداردهی نکنید،صفحه جاری مجددا بارگذاری خواهد شد.
3- انتقال به صفحه ای دیگر
بعد از تگ title و http-equiv در html، متاتگ description از بالاترین اهمیت برای موتورهای جستجو برخوردار است، برای اینکه صفحه خود را به ربات های جستجوگر معرفی کنید، حتما این متاتگ را به صورت زیر در کد خود (بین تگ head و بعد از title و http-equiv) به کار ببرید:
<meta name="description" content="توضیحات شما" />
گوگل این تگ را به این صورت تعریف می کند: راه خوبی جهت تهیه خلاصه ای قابل مطالعه برای افراد از محتوای یک صفحه وب.با توجه این تعریف،گوگل محتوای این تگ را در نتایج جستجوی خود نمایش می دهد.به عنوان مثال فرض کنید ما عبارت "شرکت پیشگامان صفر و یک فرساد" را در گوگل جستجو می کنیم،مشاهده خواهید کرد که بعد از نام و آدرس سایت یک توضیح مختصر نیز در نتایج جستجوی گوگل نمایش داده خواهد شد.،این توضیح در واقع محتوای تگ description می باشد که در تصویر نیز آن را مشخص کرده ایم.
متاتگ keywords
keywords نیز یکی دیگر از متاتگ های کلیدی صفحات html است که مربوط به موتورهای جستجو است؛ این تگ، کلمات کلیدی مهم مورد نظر مدیر سایت را برای موتور جستجو مشخص می کند اما گوگل چند سالی است) از سال 2009( این تگ را در رتبه بندی سایت مورد استفاده قرار نمی دهد و ظاهرا قصد ندارد تغییری در این رویه بدهد و ظاهرا سایر موتورهای جستجو نیز همین روند را در پیش گرفته اند.
متا تگ keywordکه مشخص کننده کلمات کلیدی است نمایانگر کلمات شاخصی است که در یک صفحه استفاده شده و مرتبط با مطالب صفحه است، این تگ هنوز در برخی موتورهای قدیمی مورد استفاده قرار می گیرد و موتور جستجو با برسی آن محتوا را در اولویت قرار می دهد.
در تگ کلمات کلیدی برای جدا کردن حروف از , (ویرگول در صفحه کلید لاتین و نه ویرگول فارسی) استفاده می شود.
کوتاه بودن و کمتر بودن تعداد کلمات مهم است و زیاد بودن آن از دید گوگل خطای بزرگی است.
قطعه کد زیر مثال ساده ای از نحوه استفاده از این تک می باشد:
<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"/>
متاتگ generator
از این تگ برای مشخص کردن اینکه صفحه مورد با استفاده از چه برنامه یا خدماتی ساخته شده است، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد،مثالی از این متا تگ را در قطعه کد زیر مشاهده می کنید:
<meta name="generator" content="DotNetNuke" />
متاتگ author
برای مشخص کردن نویسنده سند، از این متاتگ می توانید استفاده کنید، البته بودن یا نبودن آن چندان فرقی ندارد، اگر خود طراح صفحه وب هستید، می توانید نام خود را در داخل این برچسب قرار دهید تا شما به عنوان نویسنده این سند شناخته شوید.مثالی از نحوه استفاده از این تگ را در قطعه کد زیر مشاهده می کنید.
<meta name="author" content= "سعید شاملوفرد"/>
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود، ولی مهم ترین آنها بعد از title و http-equiv متاتگ های keywords و description هستند که استفاده از آنها برای هدایت موتورهای جستجو و کسب نتایج بهتر ضروری است؛ علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.
نویسنده مقاله کامنت گذاری را غیر فعال کرده است.