متاتگ : یک راهنما برای طراحان وب



متاتگ : یک راهنما برای طراحان وب

یکی از شعارهای من در زندگی شخصی و کار این است: "اگر گوگل به شما از خواست کاری را انجام دهید ، بهتر است آن را حتما انجام دهید."

برای انجام سئو و بهینه سازی وب سایت ، زمانی که نوبت به استفاده از متاتگ metadata در ساختار کدهای HTML می رسد، هیچ یک از ما نباید دست و پا بزنیم و عجله کنیم و باید با صبر و حوصله این کار را انجام دهیم.

شما به عنوان طراح چقدر اطلاعات در مورد Google Search میدانید؟ فقط این را بدانید که الگوریتم های گوگل همیشه در حال تغییر است اگر وب سایتتان را با این تغییرات بروز نکنید در نتایج جستجو می تواند به شدت سقوط کند.

این مقاله به شما کمک می کند تا بر روی برچسب های متاتگ که کاملاً گوگل از آن پشتیبانی می کند نهایت استفاده و تمرکز را داشته باشید و باعث میشود وب سایتتان بهینه برای موتورهای جستجو شود و اصطلاحا SEO کنید. 

Html Meta Tags چیست؟

در یک فایل HTML در قسمت head وب سایت که حاوی اطلاعات زیادی از جمله در درباره محتوا می باشد در این قسمت است که میتوانید آدرس تمامی فایل های css و  javascript که برای وب سایت شما مورد نیاز می باشد را قرار دهید.

در هر وب سایتی یک metadata شامل سه بخش مهم و اصلی می باشد : 

  • The (meta) title

  • The meta description

  • The meta content type and viewport

در html تمامی متاتگ ها به صورت دو مقدار name و value را با هم نمایش می دهند. به عنوان مثال:

<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />

 

اساسا متاتگ ها چیزی در وب سایت نمایش نمی دهند و در صفحه ظاهر نمی شوند آنها فقط در پس زمینه background اجرا می شوند . این تگ ها منتظر ربات هایی مانند ربات جستجو برای شناسایی کدهای HTML و استفاده از آن برای بهبود نتیجه جستجو در صفحه می باشد.  این تگ ها برای مرورگرها ، خوراک RSS و اکثر ابزارهای social media می باشد که بیشتر برای مدیران و طراحان وب سایت مهم و ضروری می باشد. 

Html Meta Tags چیست؟

کدام متاتگ ها برای وب سایت مورد نیاز است؟ 

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

 

متاتگ TITLE 

نمونه کد : 

<title>5 Ways to Beef Up Your WordPress Security Today</title>
 

این تگ چه کار می کند ؟   این متا نشان دهنده نام صفحه می باشد.

آیا واقعا به این تگ احتیاج است؟  بله ، این مورد قابل بحث نیست و ضروری می باشد زیرا به موتورهای جستجو نام صفحه را معرفی می کند. 

اگر می خواهید عنوان خود را به طور خاص برای نتایج جستجو نیز قرار دهید ، این تگ کاربردی و مفید است. شما هر صفحه وب عنوان title منحصر به فرد خود را می تواند داشته باشد. اگر تعداد کراکترها زیاد باشد مطمئن باشید گوگل آنرا نمایش نمی دهد و خود گوگل پیشنهاد داده که برای title حداکثر 56 کراکتر قرار دهید تا نمایش عنوان سایت شما به بهترین حالت باشد.

 

متاتگ DESCRIPTION

نمونه کد:

<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">

 

این تگ چه کار می کند ؟   این متا خلاصه ای مختصر از صفحه وب سایت شماست. در جستجو نتایج گوگل ، این شرح صفحه است که در زیر عنوان صفحه و URL ظاهر می شود.

آیا واقعا به این تگ احتیاج است؟  بله ، این تگ برای وب سایت شما و برای دیده شدن در موتورهای جستجو ضروری می باشد. 

این تگ توصیف کننده هر یک از صغحات وب سایت شما می باشد و اولین جایی است که گوگل از این طریق می فهمد شما در مورد چه چیزی صحبت می کنید و از طریق توصیف در نتایج جستجو گوگل نمایش دهد به کاربران . پس در توصیف شرح صفحات وب دقت و حوصله کافی را داشته باشید. این نکته را در نظر بگیرید که بیشترین تعداد کراکتر پیشنهادی از طرف گوگل 160 می باشد.

 

متاتگ CHARACTER SET

نمونه کد : 

<meta charset="UTF-8">

 

این تگ چه کار می کند ؟   این متا تگ مشخص می کند که مرورگر از ساختار متن برای محتوا استفاده کند.

آیا واقعا به این تگ احتیاج است؟  UTF-8 تنها مجموعه برای همه کاراکترها نیست بنابراین ، مطمئن شوید که مجموعه متن های محتوا سایت شما بایستی متناسب را Character-Sets محتوا باشد. 

اگر مطمئن نیستید که وب سایت شما به Character-Sets دیگری احتیاج دارد ، به این لیست مراجعه کنید. اگر وب سایت برای بازدیدکنندگان بین المللی ترجمه شود ، قطعاً باید از برچسب متفاوت از UTF-8 استفاده کنید.

 

متاتگ HREFLANG

نمونه کد:
<link rel="alternatehref="http://mywebsite.com/en-au/" hreflang="en-au" />

 

این تگ چه کار می کند ؟   این برچسب به Google اعلام می کند که محتوای صفحه سایتم با کدام زبان یا گویش منطقه ای نوشته شده است ، بنابراین گوگل می تواند از طریق این محتوا را فقط برای همان گویش و زبان ارائه دهد. 

آیا واقعا به این تگ احتیاج است؟ 

چند دلیل برای استفاده از این متا تگ وجود دارد:

1- زمانی یک وب سایت بین المللی با نسخه های مختلف ایجاد کردید ؛

2- زمانی که در وب سایت ،محتوا را به لهجه خاصی نوشتید ، مانند en-us در مقابل en-gb ؛

3- زمانی که صفحه وب سایت شما ترکیبی از زبان یا لهجه است و می خواهید هر یک از آنها جدا شناسایی شود.

 

متاتگ VIEWPORT

نمونه کد:

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

 

این تگ چه کار می کند ؟   این تگ راهنمایی در مورد نحوه ارائه صفحه Google به همه دستگاه ها را ارائه می دهد .

آیا واقعا به این تگ احتیاج است؟  آره. متا تگ viewport یکی از مواردی است که Google برای توضیح آن بسیار تلاش کرده است. اساساً ، اگر تگ را وب سایتتان اضافه نکنید یا به اشتباه استفاده شود ، می توانید تجربه مشاهده را برای کاربران در دستگاه های مختلف از جمله تلفن همراه مختل کنید.

به همین دلیل Google توصیه می کند هر بار محتوا را به صورت width=device-width;initial-scale=1  تنظیم کنید.

 

متاتگ CANONICAL LINK

نمونه کد:

<link rel="canonicalhref="https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security" />

 

این تگ چه کار می کند ؟   وقتی محتوای تکراری در وب سایت خود یا صفحاتی دارید که شباهت زیادی به یکدیگر دارند ، متا تگ متعارف به Google کمک میکند که کدام صفحه اصلی است و باید به آن ترافیک داشته باشد.

آیا واقعا به این تگ احتیاج است؟  به جای اینکه به گوگل اجازه دهید شما را به دلیل داشتن محتوای زیبا در وب سایت خود جریمه کند ، از این متا تگ برای نشان دادن محل اصلی در Google استفاده خواهید کرد. 

 

متاتگ ROBOTS

نمونه کد:

<meta name="robots" content="noindex,nofollow">
یا
<meta name="googlebot" content="noindex,nofollow">
 

این تگ چه کار می کند ؟   متاتگ robots به همه ربات های جستجو (“robots”) یا به ربات های crawler خزنده  (“googlebot”, “bingbot”, “duckduckbot”) اعلام می کند که چطور صفحه سایت شما را بررسی کنند که این معمولا به هدف indexed شدن صفحات شما برای موتورهای جستجو می باشد. 

آیا واقعا به این تگ احتیاج است؟  به طور پیش فرض ، موتورهای جستجو در هر صفحه ای که در وب سایت خود ایجاد می کنید ، indexed می کند و پیوندهای سایت شما را دنبال می کنند.

چند دلیل وجود دارد که شما می توانید موتورهای جستجو را به اهداف دیگری هدایت کنید:

Noindex : وقتی می خواهید یک صفحه را از نتایج موتورهای جستجو پنهان کنید ، از این مورد استفاده کنید.

Nofollow: این برای وبلاگهایی مفید است که محتوا را بازدیدکنندگان سایت پر می کنند اما محتوا را نمی خواهید بررسی کنید. 

nosnippet or max-snippet : این حالت،  نحوه نمایش متن ، تصویر یا قطعه ویدیوی شما را در جستجو کنترل می کند.

Noarchive : اگر نسخه های ذخیره شده قدیمی صفحه ای وجود دارد ، از این کار برای جلوگیری از نمایش موتورهای جستجو استفاده کنید.

Unavailable_after:[date] : این یک مورد خوب برای تبلیغات محدود است ، مانند فروش جمعه سیاه.

متاتگ ROBOTS

 

متاتگ GOOGLE SITE VERIFICATION

نمونه کد:

<meta name="google-site-verification" content="https://mywebsite.com" />
 

این تگ چه کار می کند ؟   این یکی از روش هایی است که می توانید برای تأیید مالکیت سایت خود استفاده کنید و سایت خود را مدیریت کنید. 

Google Search Console.

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

 

متاتگ TWITTER CARDS AND OPEN GRAPH (SOCIAL MEDIA)

نمونه کد:

<meta property="og:type" content="article" /> <meta property="og:title" content="5 Ways to Beef Up Your WordPress Security Today" /> <meta property=”og:description” content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today." /> <meta property="og:image" content="https://mywebsite.com/media/wordpress-security-lock/" /> <meta property="og:url" content="https://mywebsite.com/blog/5-ways-wordpress-security/" /> <meta property=”og:site_name” content="My Website" /> 

 

این تگ چه کار می کند ؟  متاتگ Open Graph به تمامی شبکه های اجتماعی مانند فیسبوک و لیندکین راهنمایی می کند که مطالب و مقالات را در شبکه های خودشان به صورت اعلام شده نمایش دهند. 

آیا واقعا به این تگ احتیاج است؟  این متاتگ ضروری نیست اما اگر بخواهید در شبکه های احتماعی فعالیت داشته باشبدو مقالات شما در شبکهای اجتماغی باعث دیده شدن خواهید پس وجود این متاتگ ضروری می باشد.

 

نتیجه می گیریم

این متاتگ ها به هیچ وجه لیست جامعی از تمام برچسب های متا موجود نمی باشد. برای نمونه شما ممکن است در صفحات وب سایتتان از متاتگ های LEGACY مانند author, copyright و یا rating  استفاده کنید که این تگ ها خیلی ضروری نیستند و در واقع گوگل پیشنهاد نمی کند. 

 
جهت ثبت پیام باید در سایت عضو شوید و یا وارد سایت شده باشید .
ورود به حساب کاربری / ایجاد حساب کاربری
معرفی وب سایت هایی برای دانلود رایگان تصاویر (بخش اول)

معرفی وب سایت هایی برای دانلود رایگان تصاویر (بخش اول)

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

10 ویژگی جدید در ویندوز 11

10 ویژگی جدید در ویندوز 11

در این مقاله تکنولوژی قصد داریم در مورد 10 از ویژگی های جدید در ویندوز 11 آشنا بشیم. ویندوز ۱۱ بالاخره با ظاهری جدید و ویژگی‌های هیجان انگیزش منتشر شد.

7 اشتباه در سئو و راهکارهای رفع آن

7 اشتباه در سئو و راهکارهای رفع آن

در این مقاله سئو و بهینه سازی وب سایت قصد داریم در مورد اشتباهات متداولی که در SEO وب سایت ممکن است اتفاق بیافتد صحبت کنیم.

پیشرفت For Loop در اوراکل 21c

پیشرفت For Loop در اوراکل 21c

در این مقاله بانک اطلاعاتی قصد داریم در مورد دستور حلقه For Loop در اوراکل 21c که چه پیشرفت هایی کرده و چه امکاناتی به آن اضافه شده است که بتوانیم ...