متا تگ viewport در سئو

متا تگ viewport در سئو

در این پست قضد داریم راجب تگ viewport و متا تگ viewport در سئو توضیح دهیم امید وارم تا انتها با ما همراه باشید

متا تگ viewport در سئو

زمانی که نخستین مرورگرهای موبایل به شکل امروزی متداول شدند،
مشکلی در نمایش سایت‌های اینترنتی وجود داشت. بیشتر سایت‌های اینترنتی با فرض اینکه صفحه‌ی نمایشگر کاربران دارای عرضی حداقل ۱۰۰۰ پیکسل یا بیشتر است، طراحی شده بودند
و اگر در نمایشگرهایی کم‌عرض‌تر قرار می‌گرفتند، بخشی از محتوای سایت قابل استفاده نبود.

 

برای حل این مشکل، مرورگرهای موبایل به جای استفاده از فضای محدود گوشی، سایت را در فضایی مجازی به نام Viewport که عرضی ۱۰۰۰ پیکسلی دارد
، رندر می‌کنند و سپس این فضای مجازی ۱۰۰۰ پیکسلی را با بزرگنمایی و کوچک‌نمایی یا قابلیت جابجا کردن به چپ و راست، برای کاربران قابل استفاده کردند.

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

متا تگ viewport در سئو

بیشتر بدانید:

تعیین عرض Viewport در طراحی سایت واکنش‌گرا

سایت‌های جدید، با تعریف متاتگ Viewport به شکل زیر می‌توانند به مرورگر اعلام کنند که سایت به صورت خودکار بر اساس عرض صفحه تغییر شکل می‌دهد
و مرورگر لازم نیست تا سایت را در فضای ۱۰۰۰ پیکسلی رندر کند.

کد بالا می‌بایست در بخش head قرار گیرد. علاوه بر تنظیم فوق، تنظیمات زیر نیز می‌توانند در Viewport مورد استفاده قرار گیرند:

  • user-scalable : تعیین امکان بزرگنمایی یا کوچک‌نمایی توسط کاربر با مقدارهای yes یا no
  • initial-scale : مقدار بزرگنمایی پیش‌فرض با مقدار عدد ۱ به عنوان اندازه‌ی معمولی
  • maximum-scale : حداکثر بزرگنمایی قابل تنظیم توسط کاربر با مقدار عددی
  • minimum-scale : حداقل میزان کوچک‌نمایی قابل تنظیم توسط کاربر با مقدار عددی
مختص شما:  آموزش کار با افزونه سئو وردپرس

برای مثال کد زیر تمامی تنظیمات فوق را در خود جای داده است:

متا تگ viewport در سئو

تعیین اندازه‌ی Viewport به صورت عددی

علاوه بر اینکه می‌توانید مقدار اندازه‌ی Viewport را متغیر در نظر بگیرید، با وارد کردن مقدار عددی به جای device-width می‌توانید مقدار پیش‌فرض ۱۰۰۰ پیکسل را نیز تغییر دهید

قطعه کد بالا اندازه‌ی Viewport را ۱۵۰۰ پیکسل تعیین می‌کند و اندازه‌ی پیش‌فرض بزرگنمایی را مساوی ۱ قرار می‌دهد.
در نتیجه سایت در موبایل به صورت ریز قابل مشاهده خواهد بود و کاربران می‌بایست با بزرگنمایی محتوای موجود را مشاهده نمایند.

آشنایی با پارامترهای متا تگ viewport:

width

این پارامتر در واقع مهمترین قسمت متا تگ viewport می باشد. به مرورگر می گوید که عرض وب سایت چقدر است.
width=device-width عرض وب سایت را برابر با عرض گوشی موبایل در نظر می گیرد. همچنین می توانید یک عدد بر حسب پیکسل width=320 برای مشخص کردن عرض صفحه بکار ببرید.

Initial-scale

این پارامتر میزان زوم اولیه را مشخص می کند و استفاده از initial-scale=1 باعث جلوگیری از زوم پیش فرض مرورگرها می شود.

Maximum-scale

این پارامتر بیشترین مقدار زوم را مشخص می کند
و اگر از maximum-scale=1 استفاده شود باعث می شود کاربران نتوانند بر روی عناصر وب سایت زوم کنند زیرا حداکثر مقدار زوم تنظیم شده است. اما به دلیل اینکه در موارد زیادی از قبیل بررسی تصاویر موجود در صفحه نیاز است
که کاربران زوم کنند بهتر است این پارامتر تنظیم نشود.

User-scalable

مختص شما:  سئو در گرگان

دو مقدار yes و no دریافت می کند.

User-scalable=no بطور کل قابلیت زوم را غیر فعال می کند که بسیار بدتر از maximum-scale=1 می باشد.
بهتر است استفاده از قابلیت زوم را به عهده کاربر گذاشت. اگر از این پارامتر استفاده نکنید یا به آن مقدار yes تخصیص دهید به معنی فعال بودن قابلیت زوم خواهد بود.

متا تگ viewport در سئو

معرفی توسط اپل و اختلاف شرکتها

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

برای رعایت استانداردهای طراحی وب، در کنار استفاده از متا تگ این دستورات را نیز به فایل CSS خود اضافه کنید تا در میان جنگ غولها گرفتار نشوید:

@viewport{
zoom: 1.0;
width: device-width;
}

ممنون که با مهراکت همراه بودین

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

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

مطالب مشابه

سایتتو رایگان آنالیز کن

مشاوره رایگان سئو در شیراز x بخوانید...