متا تگ ها در html

متا تگ ها در html

شروع آموزش متا تگ ها

متا تگ ها در html همیشه در قسمت head قرار می گیرند و طبق توضیحاتی که ارائه دادم ( جلسه ی اول) بیشتر مواردی که در این قسمت نوشته می شوند نمایش داده نمی شوند. پس شما متوجه شدید که متا تگ ها نمایش داده نمی شوند. (منظور از نمایش داده نمی شوند را در ادامه ی مقاله متوجه خواهید شد.)

پس متا تگ ها به چه دردی می خورند؟ در جلسه ی چهارم توضیحاتی در این واره به شما کاربران عزیز دادیم و اگر یادتان باشد در مورد با سئو توضیح داده شد و ذکر کردیم که سئو چیست؟ ولی باز هم توضیحات کوتاهی در این باره ارائه می کنم.

سئو (seo) به بهینه سازی صفحات برای موتور های جست و جو گفته می شود. در واقع سئو باعث بالا رفتن رتبه ی سایت شما در موتور های جست و جو می شود، زمانی که صحفات شما سئو شده باشند ربات های خزنده ی گوگل راحت تر می توانند صفحات شما را مورد پردازش قرار دهند. متا تگ ها بیشتر برای سئو به کار می روند ولی کار های دیگری نیز مانند نمایش یک مورد خاص پس از گذشت چند ثانیه و.. نیز می شوند.

یک مثال برای درک بهتر

شما هنگامی که در گوگل یا هر موتور جست و جوی دیگر سرچ می کنید نتایجی به شما نمایش داده می شوند، که دارای یک عنوان و توضیحات هستند(توضیحات متا) به عکس زیر توجه کنید. چرا نوشته شده آموزش html و چیز دیگری نوشته نشده است؟ چون که از متا تگ ها استفاده کرده ایم و برای موتور های جست و جو توضیح داده ایم که چگونه این نوشته را در نتایج نمایش دهد.

مثالی از متا تگ ها در html

قسمت که به صورت بزرگ نوشته شده است عنوان و قسمت پایینی هم که توضیح داده شد، توضیحات متا نامیده می شوند که در ادامه در مورد آنها توضیح می دهیم.

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

  • کلمات کلید
  • توضیحات متا
  • متا تگ جلوگیری از ایندکس شدن صفحات
  • متا تگ زبان
  • متا تگ نویسنده
  • متا تگ کپی رایت
  • و…

تعداد متا تگ های موجود بسیار زیاد هستند و شما اصلا با بیشتر آنها کاری ندارید برای همین من در این جلسه ی آموزشی به شما تنها پر کاربرد ترین آنها را می آموزم.

متا تگ ها به این گونه اند: <meta> این شکل کلی از این یک متا تگ است. تگ title هم نوعی متا تگ می باشد.

متا تگ ها در html به دو قسمت بد و خوب تقسیم می شوند.

متا تگ های بد:

  • کپی رایت
  • نام نویسنده
  • تاریخ انقضا
  • خلاصه
  • و..

به متا تگ های بالا متا تگ بد می گویند چون یا تاثیری بر روی سئو سایت نمی گذارند و یا اینکه تاثیر منفی می گذارند.

متا تگ های خوب

  • متا تگ های عنوان title
  • توضیحات متا
  • no index
  •  کلمات کلیدی

ساختار کلی متا تگ ها

در واقع ساختار متا تگ ها به این گونه است که اول تگ متا را باز می کنید و بعد صفت های  …name , charset , content , http-equiv را در آن قرار می دهید که پر استفاده ترین صفت ها name و content هستند.

  • name : شما در این قسمت نام متا تگ را می نویسید.
  • content : در این قسمت شما بایستی مقدار یا اندازه ی آن متا تگی که در قسمت name نوشته اید را قرار دهید.

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

متا تگ title یا عنوان

شاید فکر کنید که این تگ، متا تگ نیست!

ولی اشتباه نکنید این تگ هم نوعی متا است.

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

مانند کد زیر

ما کد بالا را در صفحه ی اصلی سرزمین کد قرار داده ایم.

اگر شما قصد ندارید که در نتایج گوگل بالا بیایید و هدف دیگری از آموختن زبان برنامه نویسی html دارید می توانید این جلسه را بگذرانید و ازقسمت پایین به جلسه ی بعدی بروید. جلسه ی بعدی هم در مورد متا تگ ها ها است ولی نه متا تگ های سئو.

فقط مطالب بالا را با دقت مطالعه کنید چون در جلسه ی بعد دوباره توضیح داده نمی شوند.

متا تگ keywords

این متا تگ برای نمایش دادن کلمات کلیدی به کار می رود. هر چند که توضیحات مربوط به این متا تگ، وارد مبحث سئو می شود، ولی توضیح کوتاهی هم در همین واره به شما خواهم داد.

کلمه ی کلیدی در واقع به کلماتی گفته می شود که شما قصد دارید با جست و جو کردن این کلمات کلیدی بالا بیاید و سایت شما نمایش داده شود.مثلا زمانی که کاربری در گوگل عبارت “آموزش برنامه نویسی” را سرچ کند شما در نتایج گوگل باشید و همچنین تاثیر مستقیمی بر روی سئو سایت می گذارد.

مثالی از این متا تگ

همانطور که می بینید در قسمت name اسم متا تگ نوشته شده است و در قسمت content هم مقادیر را مشاهده می کنید که با ( , ) از هم جدا شده اند.

متا تگ توضیحات

این متا تگ برای نوشتن توضیحات به کار می رود در واقع توضیحاتی که در پایین عنوان نتایج جست نمایش داده می شوند.

برای درک بهتر روی این لینک کلیک کنید و نوشته ی پایینِ عنوان را با دقت مشاهده کنید این متا تگ همان توضیحات پایین عنوان است.

برای استفاده از این متا تگ باید مقدار name این متا تگ را برابر با description قرار دهیم و در قسمت content هم توضیحات مربوطه

به مثال زیر توجه کنید در این مثال توضیحاتی که در قسمت content نوشته شده اند نمایش داده می شوند.

مثال با متا تگ هایی که تا به حال آموخته ا ید.

خروجی کد بالا چگونه است؟

خروجی کد بالا مطابق با تصویری است که در اول این مقاله به آن اشاره کردم…

سخن پایانی

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

نوشتهٔ قبلی
آموزش فرم ها در html
نوشتهٔ بعدی
متا تگ رفرش و ریدایرکت صفحات با html

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست