آشنایی با Head در HTML قسمت دوم
آشنایی با Head در HTML
تگ Meta در HTML
از آشنایی با متا تگ تا توضیحات تکمیلی سئو با تگ Meta
منظور از تگ Meta چیست؟ متا تگ چه خصوصیاتی دارد؟ آیا تگ Meta در سئو تاثیری دارد؟ نحوه پیاده سازی متا تگ چگونه است؟
در این مقاله به صورت کامل با تگ Meta آشنا می‌شویم و متوجه می‌شویم که یک تگ چگونه می‌تواند
میزان اعتماد موتور های جستجو به وب سایت شما را تغییر دهد. با فرازنتورک همراه باشید.
- 1 تگ Meta و آشنایی با Meta Data
- 1.1 نکات
- 2 تفاوت در نسخه HTML5 و نسخه HTML4
- 2.1 مثال :
- 3 تفاوت نسخه در XHTML و HTML
- 4 مثال ها
- 4.1 متای کلمات کلیدی – Meta Keywords
- 4.2 متای توضیحات – Meta Description
- 4.3 متای توضیحات در وردپرس
- 4.4 تنظیم ویو پورت – viewport
- 5 خاصیت ها (کلید)
- 6 آشنایی سئو محور با تگ Meta و انواع متا تگ ها
- 6.1 متا تگ های خوب
- 6.2 متا تگ های بی تفاوت (خنثی)
- 6.3 متا تگ های بد
تگ Meta و آشنایی با Meta Data
تگ meta یا متاداده ها که از کلمه ( MetaData ) می آید، تگی است که با استفاده از آن میتوان یکسری اطلاعات را از داده ها ،عناصر موجود در یک صفحه وب برای مرورگرها و موتورهای جستجوگر ایجاد ،تعریف کرد.
این اطلاعاتی که میگیم در یک صفحه نمایش برای کاربران قابل مشاهده نیست،
یعنی نمای ظاهری یا بصری نداره ولی توسط مرورگرها و موتورهای جستجوگر قابل تجزیه و تحلیل می باشد،
که این اطلاعات میتونه به یک وبسایت برای نمایش هرچه بهتر در مرورگرها و موتورهای جستجوگر کمک کند.
تگ Meta در HTML
تعداد متاداده ها تقریبا بیش از ۱۰ تا میشن ولی خب همه ی این متاداده ها برای یک صفحه ی وب ضروری نمی باشند
ولی تعدادیشون مهم و ضروری هستند و باید حتما استفاده بشن که در ادامه این متاداده ها را میتوانید مشاهده نمایید.
Metadata اصطلاحی برای اطلاعاتی درباره یک داده است. تگ <meta> برای سند HTML متا دیتا ارائه می‌دهد.
محتویات تگ متا در صفحه نمایش داده نمی‌شود بلکه بر روی نحوه عملکرد و تفسیر صفحه تاثیر دارد.
به عبارت ساده تر متاتگ ها را ربات هایی مثل ربات گوگل میبینند تا بهتر و دقیق‌تر صفحات سایت را درک کنند
درحالی که کاربر آنها را مستقیم مشاهده نمیکند.
تگ Meta در HTML
عناصر داخل تگ <meta> معمولا شامل description, keywords, author, last modified و سایر متا دیتا است
که در ادامه بیشتر درباره آنها صحبت خواهیم کرد.
اجزای متا دیتا می‌تواند توسط مرورگر (برای نمایش محتوا و بارگیری صفحه)،
موتور های جستجو (کلمات کلیدی) و یا سایر وب سرویس ها مورد استفاده قرار گیرد.
لطفا به مثال زیر توجه کنید:
<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content=" HTML,CSS ,XML ,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
مثلا خط سوم یک نمونه متاتگ توضیحات یا متاتگ description هست که در جاهای مختلف مثل نتایج صفحات گوگل مورد استفاده قرار می‌گیرد.
نوع متاتگ را در قسمت name می‌توانیم مشاهده کنیم.
نکات
تگ متا همیشه در داخل بخش head صفحه قرار می گیرد. مقدار متا دیتا همیشه دارای ساختار کلید=مقدار است،
مثلا در مثال بالا کلید name است و مقدار آن می‌تواند description باشد.
در صورتی که خاصیت http-equiv تعریف شده است، خاصیت content باید تعریف شود. در غیر این صورت مقدار خاصیت content نمی تواند
برای http-equiv تعریف شود.
تفاوت در نسخه HTML5 و نسخه HTML4
خاصیت scheme در نسخه HTML5 پشتیبانی نمی شود.
نسخه HTML5، خاصیت جدیدی به نام charset دارد که تعریف یونیکد در اسناد را راحت تر می کند که میتوانید
توضیحاتی در رابطه با این خاصیت در مقاله مربوط به آشنایی با Charset بخوانید.
مثال :
در نسخه HTML4
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
در نسخه HTML5
<meta charset="UTF-8">
تفاوت نسخه در XHTML و HTML
در نسخهHTML تگ <meta> نیازی به بستن ندارد.
در نسخهXHTML تگ <meta> باید با تگ پایانی بسته شود .
مثال ها
در زیر نمونه هایی تعریف متا تگ های مختلف را برایتان آورده ایم.
متای کلمات کلیدی – Meta Keywords
برای تعریف کلمات کلیدی برای موتور جستجو از متا تگ Keywords استفاده میکردیم.
چرا فعل گذشته شد؟ این یک متاتگ مهم در سئو بود ولی دیگر نیست
و در گذشته بسیار از متای کی ورد جهت بهبود سئوی سایت و افزایش رتبه سایت در گوگل و سایر موتورهای جستجو استفاده می‌شد.
<meta name="keywords" content="HTML ,CSS,XML,XHTML , JavaScript">
برای پیاده سازی متا تگ keywords آن را در خاصیت name قرار می‌دهیم و تمام کلمات کلیدی را با استفاده از خاصیت content قرار می‌دهیم
و آنها را با استفاده از یک کاما انگلیسی «,» از هم جدا میکنیم.
متای توضیحات – Meta Description
توضیحات صفحه را با استفاده از description قرار می‌دهیم. توضیحات صفحه بخش مهمی از سئو هست
که شما در جستجو های خود پس از عناوین با آنها رو به رو هستید.
<meta name="description" content="Free Web tutorials on HTML and CSS">
برای پیاده سازی این متا دیتا هم باید خاصیت name را برابر description و توضیحات صفحه را درون خاصیت content بنویسیم.
متای توضیحات در وردپرس
تقریبا از هر ۴ ساعت ۳ سایت در دنیا با وردپرس هست، آموزش وردپرس فرازنتورک رو امیدوارم دنبال کرده باشید.
هر کسی وردپرس داره حتما افزونه یوآست رو هم نصب کرده، شما به کمک افزونه یوآست میتونید توضیمات متا رو در وردپرس درج کنید.
کافی هست پایین نوشته هاتون برید و Edit snippet یا ویرایش اسنیپت رو بزنید و یک متن جذاب و مرتبط با اون نوشته درج کنید.
تنظیم ویو پورت – viewport
تنظیم ویو پورت برای بهینه سازی وبسایت برای نمایش در همه دستگاه ها از طریق نام Viewport امکان پذیر است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
همانطور که مشاهده کردید Viewport نیز مانند دو نمونه گذشته برای پیاده سازی باید نام viewport در خاصیت name قرار گیرد
و توضیحات مربوط به عرض و میزان بزرگنمایی در خاصیت content قرار گیرد.
در رابطه با Viewport در فصل آشنایی با طراحی صفحات واکنش گرا به صورت کامل صحبت خواهیم کرد.
شما اگر متای viewport رو در سایت درج نکنید عملا سایت دیگه رسپانسیو نیست و در نسخه موبایل وبسایت به خوبی نمایش داده نمیشه.
خواص متا تگ ها و کاربرد آنها در HTML
این تگ اطلاعات کلی درباره مطالب درون صفحه وب ، توضیحات ضروری و واژه های کلیدی مرتبط با موضوع صفحه جهت استفاده موتورهای جستجو را شامل می شود.
چیدمان مناسب و استفاده از کلید واژه های مرتبط به موضوع صفحه ،
باعث بهتر نمایش داده شدن صفحه و سایت در قسمت جستجوی موتورهای جستجو می شود.
نکته : Metadata همیشه به صورت جفت name و value می آید.
نکته : اگر ویژگی name یا http-equiv تعریف شده باشد خصوصیت content نیز باید تعریف شود،
اگر هیچ یک از این خصوصیت ها تعریف نشده باشند خصوصیت content هم نمی تواند تعریف شود.
خاصیت ها (کلید)
در زیر خاصیت هایی که تگ meta درHTML پشتیبانی می‌کند را قرار داده ایم.
| خاصیت – کلید | مقدار | توضیحات |
| Charset | character_set | تعیین کننده نوع یونیکد برای سند HTML |
| Content | text | تعیین کننده مقدار خاصیت http-equiv یا خاصیت name |
| http-equiv | content-type default-style refresh |
تعیین کننده یک هدر HTML برای اطلاعات خاصیت content |
| Name | application-name author description generator keywords viewport |
تعیین کننده یک نام برای متادیتا |
| scheme | format/URI | تعیین کننده یک scheme برای تفسیر مقدار های استفاده شده در خاصیت content ، این خاصیت در نسخه HTML5 پشتیبانی نمی شود. |
آشنایی سئو محور با تگ Meta و انواع متا تگ ها
خب این همه توضیحات را نوشتیم تا به مبحث مهم سئو با متا تگ ها برسیم. متا تگ ها نماینده آغازین بیشتر آموزش‌های سئو هستند.
(حتی در آموزش های سئو هم اولین توضیح در رابطه با سئو داخلی و سئو تکنیکال مربوط به تگ Meta هست)
وقتی شروع به نوشتن مقاله در مورد تگ Meta کردم همش به این فکر میکردم چطور توضیح بدم
که معنی اشتباهی که بیشتر افراد از تگ Meta در ذهنشون دارند ، یعنی استفاده برای کلمات کلیدی را از وارد ذهنتان نکنم.
بنابر این تصمیم گرفتم که در بخش نمونه ها ۳ نمونه مختلف از متا تگ را براتون مثال بزنم.
یکی از اولین مواردی که در بررسی وب سایت ها توسط موتورهای جستجو مورد ارزیابی قرار می‌گیرد، سوء استفاده کردن از متا تگ هاست؛
زیرا در بخش ابتدایی کد های ما در صفحه درون تگ Head قرار می‌گیرند؛ بنابراین خیلی مهم هست
که در همین اول توضیح سئو متا تگ ها در نظر داشته باشید که گوگل و سایر موتور های جستجو هوش بالایی در تشخیص تقلب دارند؛
پس در زمان استفاده از این تگ و داده های آن دقت کنید.
البته این نکته رو نگفتم که بترسونمتون xD در هر صورت تگ متا یکی از بهترین ابزار برای شناساندن صفحه شما به موتور های جستجوگر هست.
بیشتر از اونی که فکرشو میکنی…
همانطور که در پایان نمونه ها گفتم متا تگ ها به کلمات کلیدی ( Keywords ) ، توضیحات ( Description ) و Viewport خلاصه نمی‌شود
(البته بیشترین استفاده را این ۳ دارند) و تعداد خیلی خیلی زیادی از متا تگ ها وجود دارد که من آن دسته از متا تگ هایی که بیشتر در صفحات مشاهده می‌شود
را به سه دسته خوب ، بد و بی تفاوت تقسیم کردم که در ادامه به آن می‌پردازیم
و چون نمیتونیم تمام متا تگ ها رو با همدیگه بررسی کنیم، اگر علاقمند به بررسی متا تگ ها بودید،
یک وب سایت به صورت کامل لیست متا تگ ها را قرار داده است که میتونید برای اطلاعات بیشتر خودتون آن را بررسی کنید.
امروز که این مقاله را می‌نویسم باید بدانید که متا تگ ها در سئو هنوز هم اهمیت دارد ولی همه آنها به شما کمک نمیکند.
این تجربه رو احتمالا همه کارشناسان سئو تایید می‌کنند که دیگر برای تاثیر گذاری متا تگ ها علاوه بر حضور آنها در کدهایتان شما به محتوای مطلوبی نیازمندید
که مربوط به بازاریابی محتوایی و تولید محتوا می‌شود.
تگ Meta در HTML
توصیه من این هست که تا جای ممکن به تگ های متا اضافه نکنید، این ها فقط حجم کد های شما را افزایش می‌دهند
و سود زیادی برایتان نخواهند داشت. هرچقدر کد کمتر و بهینه تری داشته باشید بهتر هستش. در نظر بگیرید
که کد های شما به صورت یک مسیریاب در مرورگر ها عمل می‌کنند؛
تگ های Meta در مسیریاب آن بخش آزار دهنده از مسیریاب هایی مثل ویز ( ایرانیش رو بگیم دال مثلا xD ) هستند
که وقتی میخواهید از یک مسیری بروید اعلام می‌کند که “۲۰۰ متر دیگر به راه خود ادامه دهید” درحالی که شما هم میدانید
که باید این مسیر را تا دویست متر دیگر ادامه دهید xD و سپس از خروجی خارج شوید…
نحوه پیاده سازی متا تگ های گفته شده در ادامه را در لیست کامل متا تگ ها میتوانید در سایت www.metatags.org مشاهده کنید.
متا تگ های خوب
در زیر متا تگ هایی را معرفی میکنیم که در هر صفحه‌ای لازم است که شما قرار دهید.
توجه کنید که این لیست یک لیست کوچک است تگ هاست. این متا تگ ها تنها متا تگ هایی است
که حتما باید از آنها استفاده کنید، بنابراین اگر فکر می‌کنید همین تگ ها کارتان را انجام می‌دهند،
به همین ها بسنده کنید و از همین ها فقط در صفحه خود استفاده کنید.
آشنایی با تگ META در HTML
یکی ازپر اهمیت ترین بخش های هر صفحه HTML عناصر متا آن هستند که از طریق تگ META مشخص می شوند .
در این مقاله با تگ META آشنا می شویم .
متا نوع محتوا (Content-type):
اینکه مشخص کنید از چه Charset در صفحه خودتون استفاده می‌کنید،
خیلی مهم است و هر صفحه بلا استثنا باید این کد را داشته باشد. اینکه از چه نوع Charset میخواهید
در صفحه استفاده کنید بستگی به نیاز خودتون داره و در مقاله آشنایی با Charset ما به طور کامل با آن آشنا خواهیم شد.
همچنین در نظر داشته باشید که حضور این کد در صفحه شما خیلی مهم است
و صفحه ای که charset نداشته باشد ممکن است به مشکل بخورد.
عنوان (Title):
عنوان ها با تگ Meta شروع نمی‌شوند و خود یک تگ جداگانه دارند
ولی از سری داده‌های متا به حساب می‌آیند و باید حتما در صفحات وجود داشته باشند.
در رابطه با عنوان ها (title) در مقاله آشنایی با تگ Title به صورت کامل توضیح داده ایم و میتوانید در رابطه با آنها بخوانید.
توضیحات متا (Meta Description):
متا تگ توضیحات برای یک هدف بزرگ استفاده می‌شود:
تا صفحه شما را به صورت خلاصه به بازدید کنندگان نتایج موتور های جستجو (SERP ) توضیح دهد.
این تگ باعث افزایش رتبه شما نمی‌شود ولی در هر صورت برای گرفتن رتبه خیلی مهم است.
این بخش درواقع تبلیغی برای صفحه شما هست که باعث می‌شود که کاربر تصمیم بگیرد که وارد صفحه شما شود یا خیر.
تعداد حروف آن را ۱۶۰ حرف نگاه دارید و طوری متن را بنویسید که انگار میخواهید صفحه خود را بفروشید و کاربر مشتری شماست
که میخواهید آن را به کلیک کردن راغب کنید.
و در آخر منطقه نمایش (Viewport):
در جهان موبایلی امروزی، باید برای منطقه صفحه نمایش یا Viewport اهمیت ویژه ای قائل باشید.
اگر هم قائل نباشید یک ریسک بزرگ در جامعه بزرگ کاربران موبایل و تجربه آنها خواهید داشت.
در مقاله آشنایی با Viewport به صورت کامل تر با آن آشنا خواهیم شد.
متا تگ های بی تفاوت (خنثی) در HTML
وب سایت های مختلف در شرایط خاص باید از متا تگ های دیگری نیز استفاده کنند
که در ادامه با این متا تگ ها آشنا می‌شوید ولی اگر واقعا میتوانید بدون این متا تگ ها هم ادامه دهید، لطفا این کار را انجام دهید.
متا تگ‌های شبکه اجتماعی:
به طور کلی من از این تگ ها در صفحاتم به صورت دستی استفاده نمی‌کنم.
قراردادن OpenGraph و داده‌های توییتر در صفحات مهم هستش ولی از سری متا تگ های لازم در هر صفحه ای نیست.
متا تگ Robots :
یک تصور اشتباه در رابطه با متا تگ Robots وجود دارد که می‌خواهم آن را روشن سازی کنم.
اجباری نیست که حتما در تمامی صفحات از متا تگ Robots استفاده کنید.
در حالت کلی صفحات ما به صورت Index و Follow می‌باشد و تنها درصورتی که می‌خواهیم حالات موجود را تغییر دهیم بهتر است که از این متا تگ استفاده کنیم.
متاتگ کنونیکال(Canonical):
گوگل نسبت به محتوای تکراری حساس است و اگر صفحات ما محتوای تکراری درون آنها موجود باشد
باید حتما از این متا تگ استفاده کنیم در غیر اینصورت گوگل صفحه ما را پنالتی خواهد کرد.
اهمیت این متا تگ خیلی زیاد هستش ولی اگر از محتوای تکراری استفاده نمی‌کنید، میتوانید از آن استفاده نکنید.
با اینحال من با تمام اینکه گفتم متا تگ هایی که در این بخش میگم لازم نیست استفاده کنید. پیشنهاد میکنم که از آن استفاده کنید
متا تگ ربات های خاص (Googlebot) :
این متا تگ برای این است که ربات های موتور های جستجوگر خاص مثل گوگل از دستورات خاصی مثل noodp یا noydir استفاده کنند. در مقاله همه چی درباره متاتگ Robotsمیتوانید در رابطه با آنها بخوانید.
به طور کلی موتور های جستجوگر از فهم بالایی برخوردار هستند و خودشان متوجه مشخصات صفحه شما خواهند شد.
اما در جاهایی مشاهده شده است که این مورد نیاز هست که در این موارد پیشنهاد میکنم
به جای استفاده از ربات های خاص از همان متا تگ Robots استفاده کنید.
زبان (Language) :
تنها در مواردی که قرار است وب سایتی چند زبانه و بین المللی داشته باشید بهتر است
که زبان اصلی را در صفحه با استفاده از این متا تگ مشخص کنید.
منطقه جغرافیایی (GEO) :
آخرین اطلاعاتی که در رابطه با این متا تگ منتشر شده است، این هست
که متا تگ GEO در موتور جستجو Bing پشتیبانی می‌شود ولی در موتور جستجوگر Google پشتیبانی نمی‌شود.
(شما میتوانید منطقه جغرافیایی را در سرچ کنسول گوگل مشخص کنید). این متا تگ دارای ۳ نوع هست:
نام محل (placename) ، موقعیت (Position) و منطقه (Region).
کلمات کلیدی (Keywords) :
اره! بله! Yes! شاید باور نکردنی باشه که این همه از کلمات کلیدی در حوزه سئو حرف میزنیم
ولی بخش کلمات کلیدی در متا تگ را گذاشتیم در بخش خنثی! خیلی وقته که دیگه متا تگ کلمه کلیدی در نتایج موتورهای جستجو تاثیری ندارد،
البته شاید در موارد خیلی کمی به شما کمک کند ولی پیشنهاد میکنم که از این متا تگ گذر کنید.
البته اگر این تگ به صورت خودکار ایجاد می‌شود، دلیلی ندارد که آن را حذف کنید.
متا تگ Refresh:
یکی از راه های ضعیف انتقال که نباید استفاده شود. بهتر است که از انتقال سمت سرور ۳۰۱ به جای این متاتگ استفاده شود.
این متاتگ شاید بعضی وقتا لازم باشد اما گوگل طرفدارش نیست.
تاییده وب سایت (Site verification ) :
به طور کلی یکی از نحوه های فعالسازی و تایید وب سایت ها در موتور های جستجو این است
که متا تگ SiteVerification را در صفحه خود قرار دهید. اما واقعا لازم نیست که حجم صفحه خود را به خاطر تاییده وب سایت اضافه کنید.
راه جدید تاییدیه گوگل از طریق ست کردن DNSهست و همچنین امکان آپلود فایل XML در هاست نیز وجود دارد.
همچنین در موتور جستجو Bing نیز فایل XMLبرای تاییدیه وجود دارد که میتوانید از آن به جای تاییدیه متا تگ استفاده کنید.
متا تگ های بد در HTML
قبل از هر چیزی بزارید این روشن سازی را انجام بدم که با استفاده از این متا تگ ها هیچ اتفاق بدی برای سئو وب سایتتون اتفاق نخواهد افتاد.
(خداوکیلی اگه به کارت میاد استفاده کن، ناراحت میشم چون من میگم بده استفاده نکنی xD)
طبق گفته گوگل در سال ۲۰۰۵ (که الان حدودا ۱۵ سال از آن گذشته) متا تگ هایی که در زیر معرفی میکنم
چیزی جز هدر دادن فضای صفحه شما در پی نخواهد داشت. اگر آماده و مایل باشید، بریم که یک مقدار بخش Head صفحاتمون رو تمیز کاری کنیم…
متا تگ نویسنده (Author) :
این تگ نام نویسنده صفحه وب را مشخص می‌کند،
این تگ اهمیتی ندارد. دیگر این اطلاعات از طریق Schema انجام می‌شود.
مشاهده مجدد (Revisit After) :
این متا تگ برای ربات ها است که بعد از یک مدت زمان مشخصی دوباره برگردند
و صفحه وب را بررسی کنند. بیشتر موتور های جستجو از این متا تگ پشتیبانی نمی‌کنند.
کپی و رایت (Copyright):
طبق گفته گوگل، وقتی ما در فوتر وب سایتمان عنوان کپی و رایت و سال را قرار می‌دهیم
و گوگل آن را چک می‌کند، دیگر چه دلیلی دارد که یکبار دیگر در هدر وب سایت هم به آن اشاره کنیم؟
تولید کننده (Generator):
این متا تگ برنامه ای که صفحه را ایجاد کرده را مشخص می‌کند. مثلا اگر یک انسان سازنده صفحه است،
استفاده از آن بیهوده است.
در این مقاله با تگ meta ، اهمیت آن در SEO و انواع مختلف متا دیتا ها آشنا شدیم.
امیدوارم تونسته باشم که به صورت کامل شما را با این تگ آشنا کنم.
مطالب مرتبط:
1-آشنایی با Head در HTML قسمت اول
2-آشنایی با Head در HTML قسمت سوم
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.