تگ <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 ابزاری قدرتمند برای بهینهسازی وبسایت برای دستگاههای موبایل است. با استفاده صحیح از این ویژگیها، میتوانید تجربه کاربری را بهبود بخشید، سرعت بارگذاری صفحه را افزایش دهید و در نتیجه، رتبه وبسایت خود را در نتایج جستجوی موبایل بهبود بخشید.