آموزش تگ meta در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ meta در HTML با من همراه باشید.

آموزش تگ meta در HTML

Free-Learn

تگ Meta در HTML

تگ meta یا تگ متاداده ها تگی است که با استفاده از آن میتوان یکسری اطلاعات را برای داده های موجود در یک صفحه وب ایجاد کرد.

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

برای مثال ما با استفاده از متاداده ( keywords ) میتونیم کلمات کلیدی مربوط به صفحه وبمون رو به مرورگرها و موتورهای جستجوگر بشناسونیم.(برای نمایش بهتر اون صفحه در جستجوها)

HTML5 یک متای جدید به متاداده های HTML اضافه کرده بنام viewport که این متاداده وظیفش مشخص کردن نحوه نمایش یک صفحه وب در دستگاهای مختلف مثله (گوشی های موبایل و..) می باشد. (کمی پایین تر میتونید یک مثال از این متاداده مشاهده نمایید)

Free-Learn

مثال از تگ meta در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

  • متای charset برای مشخص کردن نوع کاراکترهای مورد استفاده در صفحه وب (برای نمایش محتوا با زبان فارسی حتما باید از این متا استفاده نمایید)
  • متای description برای ایجاد یک توضیح کوتاه یا شرحی در مورد صفحه وبمان
  • متای keywords برای مشخص کردن کلمات کلیدی صفحه وبمان
  • متای author برای مشخص کردن نام نویسنده محتوای موجود در صفحه وبمان
  • متای viewport برای مشخص کردن نحوه نمایش صفحه وب در دستگاهای مختلف (مثله گوشی های موبایل و..)

Free-Learn

مثال شماره ۲ : استفاده از متای viewport برای واکنش گرا کردن صفحه وب (برای نمایش در گوشی های موبایل،تبلت و..)

۱ صفحه وب با ۲ حالت در پایین براتون ایجاد کردم، یکیش از متای viewport استفاده کرده و دیگری از این متاداده استفاده نکرده، حال شما لطف بفرمایید بروی هردو آنها کلیک نمایید تا فرقشون رو بطور کامل متوجه شوید.

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

با متای viewport
بدون متای viewport

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ meta در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

جدول صفات تگ meta در HTML

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

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

(علامت یعنی در HTML5 اضافه شده است)

نام صفت مقدار توضیح
charset character_set برای مشخص کردن نوع کاراکترهای مورد استفاده در صفحه وب.

(برای نمایش محتوای فارسی حتما از این صفت استفاده نمایید) ()

content text برای ایجاد توضیح یا محتوای صفت name .
http-equiv content-type
default-style
refresh
برای ایجاد هدر HTTP برای مقدار موجود در صفت content .
name application-name
author
description
generator
keywords
viewport
برای مشخص کردن نام متای مورد استفاده.
scheme format/URI تعریف یک فرمت یا URI از مقدار موجود در صفت content . ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ meta تنها از صفات عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

از تگ meta همیشه باید در بین تگ head استفاده نمود.

تگ متاداده همیشه دارای ۲ قسمت می باشد:

  1. نام متاداده
  2. مقدار آن

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

Free-Learn