parsgreen.com
article

آشنایی با متاتگ ها (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 کد شما معتبر نباشد.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» لایه بندی در html با تگ div و span
» نحوه ایجاد لینک در HTML
» آشنایی با HTML، زبان پایه برنامه نویسی وب
» بررسی تگ های اصلی و کلیدی HTML در صفحات وب
» کار با تگ فرم (form) در HTML
commentنظرات (۵۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: roya
زمان: ۱۷:۱۳:۳۳ - تاریخ: ۱۳۹۱/۱۰/۱۰
خوندمش. بازم ممنونم
نویسنده: kamal ahmadi
زمان: ۲۳:۰۰:۳۱ - تاریخ: ۱۳۹۱/۱۰/۳۰
سلام
ممنون بابت مطلب جالبتون
نویسنده: meysam
زمان: ۲۰:۱۵:۵۰ - تاریخ: ۱۳۹۱/۱۲/۰۶
سلام
خیلی به کارم امد
ممنون
نویسنده: amirchermahini
زمان: ۰۹:۴۴:۳۷ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب حضور شما استاد بزرگوار
و تقدیر و تشکر از مطالب پربار و زیبای شما
و باز هم تشکر بخاطر گرداوری چنین مطالب به روز و زیبایی من یه سوالی داشتم و جاش واقعا توی مطالب شما خالی هستش و اون هم اینه که :
من یه سایتی رو مثلا طراحی کرده ام که تشکیل شده از یه پوشه بنام tem و درون این پوشه سه پوشه بنام css و images و pages رو دارم و index که صفحه اصلی سایت منه درون پوشه اصلی و در کنار اون سه پوشه و فایل css اصلی هم درون پوشه css هستش و صفحه های بعدی مثلا یکی از صفحه های منو بنام home.html درون پوشه pages هست و home.css هم درون پوشه css .
حالا سوال من اینه که من چطور از فایل home.html که درون پوشه pages هستش باید در index اصلی لینک ایجاد کنم که موقعی روی منوی صفحه اصلی کلیک میکنم
بره به اون صفحه من در قسمت لینک به این شکل نوشتم
<li><a href="pages/home.html">صفحه اصلی</a></li>
ولی در قسمت <head> چطور باید به این صفحه لینک بدم که بفهمه درون پوشه page باید این صفحه رو پیدا کنه ؟
یا اصلا در index اصلی من چطور باید به صفحات html دیگه که ایجاد کردم لینک در قسمت head بدم
با تقدیر وتشکر از لطف شما
و ارزوی توفیق روز افزون در تمام مراحل زندگی و پیشا پیش برای شما ارزوی سالی خوب و خوش و توام با موفقیت و سلامتی در کنار خانواده ارزو دارم
پاسخ: 
سلام
خیلی ممنون از نظر لطف شما.
در مورد سوال، منظورتان دقیقا از لینک دادن در تگ <head> مشخص نیست! تگ head جزء بدنه اصلی صفحه است و درون آن تنها از دستورات خاصی استفاده می شود که حالت کلی دارند، مانند متاتگ ها، استایل css، عنوان صفحات و...، به عبارتی استفاده از لینک (تگ a href) در تگ head مجاز نیست، تصور ما این است که منظور شما ایجاد منویی در بالای صفحات است که اگر این طور است باید در قسمت body و با بلاک های div این منو را در بالاترین سطح از سایر عناصر طراحی کنید و لینک ها را مطابق نمونه ای که نوشته اید داخل آن تعریف کنید، مثال:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>آموزش html</title>
<link rel="stylesheet" href="../css/home.css" media="screen">
</head>
<body>
<div class="menu">
<ul>
<li><a href="home.html">صفحه اصلی</a></li> |
<li><a href="page1.html">صفحه یک</a></li> |
<li><a href="page2.html">صفحه دو</a></li> |
<li><a href="../index.html">صفحه index</a></li>
</ul>
</div>
</body>
</html>
نویسنده: amirchermahini
زمان: ۱۵:۲۸:۰۰ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب و احترام و تشکر از بابت جواب
درسته من دقیقا نتونستم منظورم رو بیان کنم منظوره من اینه وقتی شروع می کنیم به طراحی دو صفحه اصلی میسازیم
1- html
2- css
و در بالای صفحه html بین تگ <head> به صفحه css لینک میدهیم تا برای فراخوانی کردن بتونیم روش کار کنیم که شکل کلی اینه :
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
اما حالا فرض کنیم صفحه سوم که با نام home.html ساخته شده و در قسمت منو بهش لینک دادیم به این شکل
<ul>
<li><a href="home.html">صفحه اصلی</a></li>
</ul>
ایا باید در صفحه اصلی هم به اون لینک از قسمت <head>بدهیم یا اینکه نه به اون شکل نیست و شکل کلی لینک دادن به صفحات html در صفحه اصلی به شکل دیگری هستش ؟
امیدوارم این بار تونسته باشم منظور و سوالم رو مطرح کرده باشم چون واقعا حدود یک ماهی میشه روش دارم درجا میزنم و به هر شکلی که لینک میدم باز هم قبول نمیکنه و صفحه دوم رو یا نمیشناسه یا با css اصلی قاطیش درهم میکنه .
با تقدیر و تشکر از الطاف شما در خصوص زحمتی که برای جواب اولی دادن
واقعا ممنونم
و امیدوارم کمکم کنین
پاسخ: 
سلام
ظاهرا مشکل شما این است که به فایل css نمی توانید ارجاع دهید، رفع این مشکل نیاز به درک نحوه ارجاع به دایرکتوری ها در وب است، به مثال زیر توجه کنید تا مسئله روشن شود:
فرض کنید اگر فایل index.html، فایل اصلی سایت باشد و کنار آن دو فولدر (دایرکتوری) با نام های css و home داشته باشیم، داخل فولدر css یک فایل با نام style.css و داخل فولدر home فایلی با نام home.html باشد.
index.html
|
|
|
css----->style.css
|
|
|
home----->home.html
حال برای اینکه هر یک از صفحات html ما (index و home) به اطلاعات فایل css دسترسی داشته باشند، باید در قسمت href همان صفحه (در قسمت link)، به آدرس دقیق آن فایل ارجاع دهیم (یعنی در هر دو صفحه باید این کار را کنیم)، اما بر طبق الگو و محل قرارگیری نمونه فایل های ما، در صفحه index.html نمونه کد زیر استفاده می شود:
<link rel="stylesheet" href="css/style.css">
در حالی که برای صفحه home.html آدرس ارجاع به صورت زیر است:
<link rel="stylesheet" href="../css/style.css">
در واقع در ارجاع دادن محل قرارگیری فایل css از فایل html حساب می شود، علامت .. به معنی یک دایرکتوری بالاتر است، لذا مفهوم آدرس بالا می شود:
یک دایکتوری بالاتر از فایل home.html، فولدر css، فایل style.css و بدین ترتیب صفحه home ما به فایل css دسترسی پیدا می کند و می تواند از کلاس ها و استایل آن استفاده کند، در حالی که برای صفحه index مفهوم آدرس می شود:
دایرکتوری css، فایل style.css که این اختلاف به جهت محل قرارگیری دو فایل html از هم است.
نویسنده: amirchermahini
زمان: ۱۹:۲۱:۵۸ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب و احترام
واقعا ممنونم استاد عزیز
از اینکه وقت و فرصت گذاشتین و جواب رو بصورت تصویری ارسال کردین واقعا از شما ممنونم عزیز من تازه فهمیدم چی شد و کجای کارم اشتباه بوده واقعا لطف کردین بهترین ها را در استانه سال جدید برای شما برادر بزرگوارم و خانواده محترم ارزو دارم
امیدوارم سالی سراسر سلامتی و نشاط و موفقیت در انتظار شما باشه
انشاءالله
نویسنده: amirhossein
زمان: ۲۲:۰۰:۰۳ - تاریخ: ۱۳۹۲/۰۴/۰۳
سلام خسته نباشید سایت مفیدی دارین من خیلی از این سایت مفیدتون بهره بردم واقعا دستتون درد نکنه از اینکه زحمت می کشید واسه ما ایرانی ها نهایت تشکر را دارم بریم سر اصل مطلب من منظور شما را نفهمیدم از اینکه گفتین
(علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.)
میشه بیشتر توضیح بدید که این / علامت رو در چه مواردی باید متاتگ ها رو ببندیم در اچ تی ام ال ضروری است یا خیر در xhtml چطور مثلا من این متاتگ رو می خوام استفاده کنم
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
به این صورت یا به این صورت
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
پاسخ: 
سلام
این مسئله به نوع سند (DOCTYPE) یا به عبارتی همان نسخه HTML برمی گردد، توضیح اینکه HTML در نسخه های مختلف وجود دارد که هر کدام در استانداردها اندکی با هم متفاوت هستند، برای توضیحات بیشتر، مطلبی مجزا در سایت وجود دارد، عبارت "DOCTYPE" را در قسمت جستجو وارد کنید.
نویسنده: ارشک
زمان: ۱۴:۵۶:۰۵ - تاریخ: ۱۳۹۲/۰۴/۲۴
با سلام
من می خواستم یک سایتی در گوگل verify کنم هر کاری می کنم پیغام خطا می دهد امکانش هست در این ضمینه توضیح دهید
با تشکر
پاسخ: 
سلام
لطفا پیغام خطای دریافتی را هم درج کنید!
تا آنجا که اطلاع داریم، ابزار وبمستر گوگل دو راه برای این کار پیشنهاد می دهد، یک راه درج یک متاتگ در صفحه اول سایت و سپس کلیک بر روی لینک (یا دکمه) verify در ابزار وبمستر است، روش دیگر آپلود یک فایل در ریشه سایت و سپس کلیک بر روی لینک verify است، در هر دو روش اگر مراحل را به ترتیب و درست انجام داده باشید، ربات گوگل صفحه یا فایل را چک کرده و سایت شما را تائید می کند.
نویسنده: طراحی سایت
زمان: ۱۱:۴۷:۳۷ - تاریخ: ۱۳۹۲/۰۵/۱۷
خیلی ممنون
نویسنده: محمدتقی
زمان: ۰۰:۰۳:۳۵ - تاریخ: ۱۳۹۲/۰۵/۳۰
سلام سایت خیلی خوبی دارید از html خیلی استفاده کردم ،من خودم یه وبلاگ در مورد اینترنت و کامپیوتر دارم اگه افتخار دادید یه سر بزنید از نظرات شما استفاده کنیم.
www.ganjshop.mihanblog.com
نویسنده: nasim
زمان: ۰۹:۱۶:۳۶ - تاریخ: ۱۳۹۲/۰۷/۲۷
چطوری می تونیم صفحه ای طراحی کنیم که وقتی کاربر از مرورگر firefox استفاده میکنه پیغام hello word و اگر کاربر از مرورگر IE استفاده میکنه پیغام hello word IE رو نمایش بده؟
پاسخ: 
برای این کار یا باید از جاوا اسکریپت و کدنویسی سمت کاربر استفاده کنید، مثال:
<script type="text/javascript">
var isFirefox = typeof InstallTrigger !== 'undefined';
var isIE = /*@cc_on!@*/false;
if(isFirefox){
alert('Firefox');
}
else if(isIE){
alert('IE');
}
</script>
یا از PHP و کدنویسی سمت سرور که مبحث جداگانه ای دارد.
نویسنده: نازنین
زمان: ۱۶:۴۷:۱۰ - تاریخ: ۱۳۹۲/۱۱/۲۹
سلام،
ممنون از سایت خوبتان و اطلاعات خوبی که در آن گذاشته اید. یک سوال داشتم؛ می خواستم بدانم چه کاری باید انجام داد تا در هنگام جستجو یک سایت در گوگل، اطلاعات آن سایت به صورت طبقه بندی شده نشان داده شود، به طور مثال وقتی "راهکار خلاق" را در گوگل جستجو می کنیم، بعد از لینک توضیحات کوتاه در رابطه با راهکار خلاق لینک هایی با عنوان تماس با ما، شرکای تجاری، محصولات و آموزش نشان داده می شود. آیا برای این کار باید از متاتگ استفاده کنیم، اگر اینطور است لطفا متاتگ مربوطه را اعلام می فرمایید؟ ممنون میشم راهنمایی فرمایید.
پاسخ: 
سلام
خیر، این کار به صورت هوشمندانه و توسط خود گوگل انجام می شود، در واقع گوگل دو معیار را برای این کار در نظر می گیرد:
- خود سایت از نظر اعتبار و بازدید به حد مناسبی (بر اساس الگوریتم های گوگل) رسیده باشد.
- لینک های خاصی از سایت به اصطلاح کلیک خور بالاتری داشته باشند و بیشترین تکرار را در صفحات سایت داشته باشند.
نویسنده: الکترو مگ
زمان: ۱۴:۰۴:۲۲ - تاریخ: ۱۳۹۳/۰۱/۰۱
ممنون این مطالبم خیلی به دردم خورد
ممنون
نویسنده: پویان
زمان: ۱۷:۴۷:۳۱ - تاریخ: ۱۳۹۳/۰۱/۰۶
با سلام
خیلی عالی بود، در زمانیکه خیلی سریع نیاز به راهنمایی
در مورد متاتگ ها داشتم، این مطلب به من کمک کرد، ممنونم.
نویسنده: amirhosein ahmadi
زمان: ۱۸:۴۰:۱۱ - تاریخ: ۱۳۹۳/۰۳/۰۴
سلام خیلی ممنون از مطالبتون استفاده بسیاری کردم
می خواستم بگم من یه وبلاگ دارم که توش فضائل اهل بیت علیهم السلام رو می نویسم. طبق اون چیزی گفتید من این کار رو کردم میشه بگید درسته یا نه:
<html>
<head>
<meta name="google-site-verification" content="v7AUhYIF3LKVO_Slnr7lK6rzTDqhbDQJArt9n08yKCE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="Description" CONTENT="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>
<title>فضائل اهل بیت</title>
<h5>
<h3>
<h6>
<noscript> </noscript>
<meta name="robots" content="index, follow" />
<title><-BlogTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="فضائل اهل بیت" />
<meta name="author" content="<-BlogAuthor->">
<meta name="language" content="Farsi">
<meta name="geo.region" CONTENT="IR" />
<meta name="googlebot" content="INDEX, follow" />
<meta name="robots" content="index, follow">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription-> - <-BlogTitle->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->">
<link href="http://www.weblogskin.com/themes/019/style.css" type="text/css" rel="stylesheet">
پاسخ: 
سلام
مشکل جدی وجود ندارد، به جزء اینکه:
- چند متاتگ مانند description چنیدن بار تکرار شده اند! سعی کنید تنها یک مورد وجود داشته باشد.
- متاتگ زیر با توجه به اینکه قبلا تنظیم شده، زائد است:
<meta charset="utf-8">
- بهتر است تگ title جزء بالاترین تگ ها باشد، ضمن اینکه این تگ هم دو بار تکرار شده!
- یک سری تگ ها بی مورد هستند، مانند:
<h5>
<h3>
<h6>
paged صفحه 1 از 4




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

1 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...