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

معرفی متا تگ ها در HTML - بررسی کامل با مثال


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

عناصر META را می توان به صورت جفت های " نام / مقدار " برای توصیف خواص سند HTML مانند نویسنده، تاریخ انقضا، یک لیست از کلمات کلیدی، داکیومنت نویسنده و غیره استفاده نمود.

تگ <meta> برای ارائه چنین اطلاعات اضافی استفاده می شود. این تگ یک عنصر خالی است و بنابراین "تگِ بستن" ندارد اما اطلاعات را درون ویژگی های آن (attribute) حمل می کند.

شما می توانید بر اساس آنچه که می خواهید در سند خود نگه دارید یک یا چند متا تگ، در سند خود ، قرار دهید، اما به طور کلی، متا تگ ها، بر روی ظاهر فیزیکی سند تاثیری نمی گذارند بنابراین از نظر ظاهر، مهم نیست که آیا سند شما شامل آنها هست خیر.

اضافه کردن تگ های متا به اسناد

شما می توانید، با قرار دادن برچسب های <meta> داخل هدر سند که توسط برچسب <head> و </ head> نشان داده می شود، ابرداده (metadata) را به صفحات وب خود اضافه کنید. یک برچسب متا، می تواند علاوه بر ویژگی های (attribute) اصلی دارای ویژگی های (attribute) زیر نیز باشد –

ردیف

Attribute

توضیحات

1

Name

نام property می تواند هر چیزی باشد

مانند: کلمات کلیدی، شرح، نویسنده، تجدید نظر، تولیدکننده و غیره

2

content

مقدار (value) یک property را مشخص می کند.

3

scheme

یک نمودار (scheme) برای تفسیر مقدار property (همانطور که در ویژگی محتوا (content attribute) اعلام شده است) را مشخص می کند.

4

http-equiv

برای هدرِ پیامِ پاسخ HTTP استفاده می شود. به عنوان مثال، http-equiv می تواند برای refresh صفحه یا تنظیم کوکی مورد استفاده قرار گیرد. مقادیر می تواند شامل نوع محتوا، منقضی، تازه کردن و تنظیم کوکی باشد.

تعیین کلمات کلیدی(Specifying Keywords)

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

 

مثال

همانطور که در قطعه کد زیر مشاهده می کنید، ما در آن  HTML، Meta Tags، Metadata را به عنوان کلمات کلیدی مهم در مورد سند وارد نموده ایم.

<!DOCTYPE html>

<html>

  

   <head>

      <title>Meta Tags Example</title>

      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />

   </head>

  

   <body>

      <p>Hello HTML5!</p>

   </body>

  

</html>

کد فوق، نتیجه زیر را تولید می کند –

توضیحات سند (Document Description)

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

مثال :

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

تاریخ نسخه اسناد (Document Revision Date)

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

مثال :

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

تازه سازی سند(Document Refreshing)

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

مثال

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

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

تغییر مسیر صفحه (Page Redirection)

شما می توانید از برچسب <meta> برای هدایت (redirect) صفحه خود به هر صفحه وب دیگری استفاده کنید. شما همچنین می توانید یک مدت زمان (duration) را مشخص کنید، که بعد از آن صفحه وب تان به طور خودکار به صفحه دیگری هدایت (redirect) شود.

مثال

در زیر نمونه ای بیان کردیم که در آن صفحه فعلی به صفحه دیگر بعد از 5 ثانیه هدایت (redirect) می شود. اگر می خواهید بلافاصله صفحه را هدایت (redirect)  کنید، مقداری برای attribute با نام content  مشخص نکنید.

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

 

تنظیم کوکی ها (Setting Cookies)

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

شما می توانید از برچسب <meta> برای ذخیره کوکی ها در سمت سرویس گیرنده (client side) استفاده کنید و پس از آن، این اطلاعات می توانند توسط وب سرور، برای ردیابی بازدید کننده گان سایت استفاده شوند.

مثال

در زیر نمونه ای از redirect صفحه جاری به صفحه دیگر بعد از 5 ثانیه را مشاهده می کنید. اگر می خواهید بلافاصله صفحه را redirect کنید، attribute با نام content را مقداردهی نکنید.

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "cookie" content = "userid = xyz;
         expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

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

 

تنظیم نام نویسنده (Setting Author Name)

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

مثال:

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

 

تعیین مجموعه کاراکترها (Specify Character Set)

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

مثال

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

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

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

<!DOCTYPE html>
<html>

 
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
            
   <body>
      <p>Hello HTML5!</p>
   </body>
            
</html>

 

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید