تگ ویوپورت (viewport)

تگ <meta> چیست؟

تگ <meta> در HTML برای ارائه اطلاعات متا (metadata) در مورد یک صفحه وب به مرورگر و موتورهای جستجو استفاده می‌شود. این اطلاعات شامل عنوان صفحه، کلمات کلیدی، توضیحات، و تنظیمات نمایش صفحه است.

ویژگی‌های width و initial-scale

دو ویژگی مهم تگ <meta> که بر نمایش صفحه در دستگاه‌های موبایل تأثیر می‌گذارند، width و initial-scale هستند.

  • width: این ویژگی عرض اولیه صفحه را به صورت پیکسل تعیین می‌کند.
  • initial-scale: این ویژگی میزان بزرگ‌نمایی اولیه صفحه را مشخص می‌کند.

کاربرد این ویژگی‌ها

  • کنترل عرض صفحه در دستگاه‌های مختلف: با تنظیم width، می‌توانید عرض صفحه را برای دستگاه‌های با اندازه صفحه متفاوت بهینه کنید.
  • جلوگیری از بزرگ‌نمایی خودکار: با تنظیم initial-scale، می‌توانید از بزرگ‌نمایی خودکار صفحه در مرورگرهای موبایل جلوگیری کنید. این امر باعث می‌شود که صفحه با اندازه مناسب نمایش داده شود و کاربر مجبور به کوچک یا بزرگ کردن صفحه نباشد.

مثال

<meta name="viewport" content="width=device-width, initial-scale=1.0">
در این مثال:
  • width=device-width: عرض صفحه برابر با عرض دستگاه تنظیم می‌شود.
  • initial-scale=1.0: صفحه با بزرگ‌نمایی اولیه ۱ نمایش داده می‌شود، یعنی بدون هیچ بزرگ‌نمایی اضافی.

بهبود SEO با استفاده از این ویژگی‌ها

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

نکات مهم

  • قرار دادن تگ <meta> در بخش <head>: این تگ باید در بخش <head> سند HTML قرار گیرد.
  • استفاده از واحد پیکسل برای width: مقدار width باید به صورت پیکسل مشخص شود.
  • تنظیم initial-scale بر اساس نیاز: مقدار initial-scale را بر اساس طراحی وب‌سایت و نیازهای کاربران تنظیم کنید.

جمع‌بندی

تگ <meta> با ویژگی‌های width و initial-scale ابزاری قدرتمند برای بهینه‌سازی وب‌سایت برای دستگاه‌های موبایل است. با استفاده صحیح از این ویژگی‌ها، می‌توانید تجربه کاربری را بهبود بخشید، سرعت بارگذاری صفحه را افزایش دهید و در نتیجه، رتبه وب‌سایت خود را در نتایج جستجوی موبایل بهبود بخشید.