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

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

متا تگ چیست ؟

متا تگ در حقیقت اطلاعاتی است در مورد سایت ما که در اختیار بوت های گوگل و دیگر موتور های جستجو قرار میگیرد این متا تگ ها باید در بخش  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 قرار بدهید.

 

خب اگر دقت کرده باشید در متاتگ های بالا عبارت “content=”your text وجود دارد که میتوانید از این قسمت بخش های مختلف را مدیریت نمایید .

 

Geo Metatags چیست

با توجه به امکان تعیین جغرافیایی سایت در گوگل کنسول عملا این متا لازم نیست، البته برای موتور جستجوی بینگ و سایت چند شعبه ای بر روی یک دامنه لازم است ، از متا تگ موقعیت جغرافیایی استفاده کنید. نمونه کد Geo meta tag در پایین نوشته شده است

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

 

<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">

 

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

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

موتورهای جستجوی هوشمندی مثل گوگل و بینگ بجای متاتگ های زیر از تکنیک جدید ساختار اطلاعات Structured Data که به صورت میکرودیتا Microdata یا JSON-LD یا RDFa برای دریافت اطلاعات از یک وب سایت استفاده می کنند. حال می توانید در بودن یا نبودن این متاتگ ها تجدید نظر کنید.

استفاده از این تگ‌ها هیچ ضرری به سایت شما نمی‌رساند. اما با تنظیم این‌ها زمان و فضای بیهوده هدر می‌دهید. خود گوگل هم ۱۲ سال پیش این حرف‌ها را تایید کرده بود.  لیست متاتگ های بد به صورت زیر است.

 

<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

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

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

 

متا تگ Open Graph برای توییتر

<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">