shift

متا تگ های کاربردی

متا تگ های کاربردی

عاطفه
دسته: طراحی وبسایت  تگ ها: متا , متا تگ , متاتگ Open Graph , geo متا تگ , ریچ اسنیپت

 

زمانی که یک سایت ایندکس می شود توسط ربات جستجوگر مورد بازدید و تحلیل قرار خواهد گرفت و ما نیز می خواهیم وقتی مطلبی را در سایت خود قرار دادیم توسط موتورهای جستجو گزارش گیری شود و در نتایج جستجو نشان داده شود یکی از کارهایی که می توانیم انجام دهیم تا مطمین شویم که گوگل در حال رصد کردن صفحات سایت ما می باشد والبته یکی از تلاش هایی که می توانیم برای بهینه سازی وب سایت خود انجام دهیم استفاده از متا تگ ها می باشد.
متا تگ چیست؟ اطلاعاتی است در مورد سایت ما و در بخش head که در ابتدای صفحه می آید واین داده ها در نمایش صفحه نمایش داده نمی‌شوند از متاها برای مشخص کردن نویسنده , کلمات کلیدی , توضیحاتی در مورد صفحه و غیره استفاده می شود.
در ادامه طریقه استفاده از متاهای مختلف را شرح می دهیم:

<meta charset="utf-8>

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="application-name" content="Application Name">

<meta name="description" content="A description of the page">

<meta name="robots" content="index,follow ">

<meta name="googlebot" content="index,follow">

<meta name="google" content="notranslate">

<meta name="generator" content="program">

<meta name="subject" content="your website's subject">

<meta name="url" content="https://example.com/">

<meta name="distribution" content="Global">

<meta name="rating" content="General">

<meta name="format-detection" content="telephone=no">

<meta name="google-site-verification" content="” >

<meta name="category" content="">

 

  • تگ utf-8 نشان می‌دهد که این سند زبان فارسی را پشتیبانی می‌کند.
  • تگ http-equiv="x-ua-compatible" content="ie=edge براي نمايش اطلاعات در اينترنت اكسپلورر که با بالاترین سبک در دسترس در آن ورژن مرورگر، صفحه‌نمایش داده می‌شود.
  • تگ viewport برای شناندن واکنش گرا بودن سایت به موتورهای جستجو می‌باشد و منظور از واکنش گرا بودن این است که مرورگر متناسب با عرض صفحه‌نمایش، اطلاعات شمارا نمایش می‌دهد.
  • تگ application-name نام برنامه تحت وب را بیان می‌کند.
  • تگ description توضیحات مختصری در مورد سند شما بیان می‌کند.
  • تگ robots به همه موتورهای جستجو می‌گوید که صفحه شمارا ایندکس کند و در نتایج جستجو ذخیره کرده و از لینک‌های آن پیروی کند.
  • تگ googlebot مخصوص ربات جستجوگر گوگل می‌باشد و اجازه می‌دهد کل سایت را جستجو کند.
  • تگ notranslate پيشنهاد ترجمه سايت از سوي گوگل ارائه نمی‌شود.
  • تگ generator نام نرم‌افزاری که با آن سایت طراحی‌شده است مثل ورد پرس.
  • تگ subject موضوع کلی صفحه را مشخص می‌کند.
  • تگ distribution دامنه استفاده وب‌سایت شمارا مشخص می‌کند. به این معنا که محتوای شما مخاطبان جهانی دارد و یا مختص به محدوده خاصی است.
  • تگ rating رتبه و سطح سایت را به موتورهای جستجو معرفی می‌کند.
  • تگ format-detection به‌صورت خودکار شماره تلفن‌ها را به لینک تبدیل می‌کند.
  •  تگ url آدرس سایت را معرفی می‌کند.
  • تگcategory  موقعيت بخش جغرافيايي تحت پوشش سايت را نشان می‌دهد
  • تگ google-site-verification زمانی که در گوگل وب مستر سایت خود را ثبت کنید یک کد به شما می‌دهد که این کد را باید در قسمت content قرار بدهید.

 

Geo Metatags

 با استفاده از این متا تگ یک موقعیت برای کسب‌وکار خود ایجاد می‌کنید تا این اطلاعات را موتورهای جستجو ذخیره کنند.

<meta name="ICBM" content="latitude, longitude">

<meta name="geo.position" content="latitude;longitude">

<meta name="geo.region" content="country[-state]">

<meta name="geo.placename" content="city/town">

 

متاهایی که توصیه نمی‌شود:

<meta name="language" content="en">

<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">

<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">

<meta name="reply-to" content="email@example.com">

<meta name="author" content="name, email@example.com">

<meta name="designer" content="">

<meta name="owner" content="">

<meta name="revisit-after" content="7 days">

<meta http-equiv="refresh" content="300; url=https://example.com/">

<meta http-equiv="Expires" content="0">

 

متاتگ Open Graph

مهم‌ترین کاربرد این تگ‌ها این هست که وقتی مطلبی از سایت به اشتراک گذاشته می‌شود (فیس‌بوک ، توییتر و …) اطلاعاتی که به این متا تگ‌ها اختصاص داده‌شده نمایش داده می‌شوند.

Facebook / Open Graph

<meta property="fb:app_id" content="123456789">

<meta property="og:url" content="https://example.com/page.html">

<meta property="og:type" content="website">

<meta property="og:title" content="Content Title">

<meta property="og:image" content="https://example.com/image.jpg">

<meta property="og:description" content="Description Here">

<meta property="og:site_name" content="Site Name">

<meta property="og:locale" content="en_US">

<meta property="article:author" content="">

 

Twitter

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@site_account">

<meta name="twitter:creator" content="@individual_account">

<meta name="twitter:url" content="https://example.com/page.html">

<meta name="twitter:title" content="Content Title">

<meta name="twitter:description" content="Content description less than 200 characters">

<meta name="twitter:image" content="https://example.com/image.jpg">

برای نمایش جزئیات وب‌سایت شما هنگام اشتراک‌گذاری لینک  باید از این متاتگ ها استفاده کنید.
برای کسب اطلاعات بیشتر مقاله ریچ اسنیپت را مطالعه بفرمایید.

<link href="https://plus.google.com/+YourPage" rel="publisher">

<meta itemprop="name" content="Content Title">

<meta itemprop="description" content="Content description less than 200 characters">

<meta itemprop="image" content="https://example.com/image.jpg">

به امید اینکه این مطلب برای شما مفید بوده باشد.

نظر خود را بنویسید...
ارسال نظر
لغو