متا تگ Viewport چیست و چه کاربردی دارد؟

Viewport به قسمتی از صفحات وب که توسط کاربران مشاهده می‌شود اشاره دارد. HTML5 راهکاری برای مدیریت این بخش وب‌سایت‌ها ارائه کرده است که از طریق متا تگ Viewport انجام می‌شود.

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

بیشتر بخوانید» به منظور آشنایی با تمامی متا تگ‌های مهم برای سئو و لیست کاربردهای آن‌ها روی لینک داده شده کلیک کنید.

اندازه Viewport با اندازه صفحه تغییر می‌کند، بنابراین روی صفحات موبایل این اندازه کمتر از صفحات کامپیوتر است. قبل از اینکه تبلت‌ها و تلفن‌های همراه وب‌گردی را ممکن کنند، صفحات وب عموماً برای نمایشگرهای کامپیوتر طراحی می‌شدند و دارای طراحی ثابتی بودند.

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

برای حل این مشکل، مرورگرها تکنولوژی‌هایی را توسعه دادند که به وب‌سایت‌ها اجازه می‌دادند تا اندازه صفحه خود را با ابعاد مختلف صفحه نمایشگرها هماهنگ کنند.به طور کلی، Meta تگ Viewport به مرورگر دستورالعمل‌هایی در مورد کنترل ابعاد صفحه و مقیاس‌بندی آن ارائه می‌دهد.

چگونگی تعریف و تنظیم تگ Viewport

HTML5 ابزاری را فراهم کرده است که به طراحان وب امکان می‌دهد تا با استفاده از برچسب <meta>، بر Viewport کنترل داشته باشند.

برای این منظور، شما باید این تگ را در تمام صفحات وب خود به شکل زیر وارد کنید:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

این متا تگ به مرورگرها دستور می‌دهد که چگونه مقیاس و ابعاد یک صفحه را کنترل کنند.

پارامترهای متا تگ viewport

در این تگ چندین پارامتر وجود دارد که به شما کمک می‌کند به طور دقیق‌تری اندازه قسمت‌های مختلف سایت را بر حسب اندازه نمایشگر کاربر مدیریت کنید. در ادامه به بررسی این پارامترهای Viewport می‌پردازیم.

بیشتر بخوانید» متا تگ رفرش (refresh meta tag) چیست؟

• پارامتر Width

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

• پارامتر Initial-scale

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

• پارامتر Maximum-scale

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

• پارامتر User-scalable

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

بیشتر بخوانید» متا تگ opengraph چیست؟ 

تگ Viewport چه کاربردی دارد؟

تگ `viewport` در HTML برای بهینه‌سازی نمایش صفحات وب بر روی دستگاه‌های مختلف مورد استفاده قرار می‌گیرد. این تگ قابلیت‌هایی مانند تعیین عرض صفحه، مقیاس اولیه، کنترل زوایا و پشتیبانی از رتینا دستگاه‌ها را فراهم می‌کند.

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

کاربرد تگ viewport در سئو چیست؟

سایت‌های ریسپانسیو و سازگار با موبایل رتبه بهتری در صفحه نتایج موتورهای جستجو دارند. برای دستیابی به حداکثر سازگاری با موبایل با کمترین هزینه، می‌توان از متا تگ ویوپورت استفاده کرد.

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

بیشتر بخوانید» با Meta Descrition توضیحاتی مختصر از کسب و کارشما بیشتر آشنا شوید.

از همین رو، ریسپانسیو بودن سایت اهمیت بالایی دارد. یک سایت ریسپانسیو از هر دستگاهی قابل‌ دسترس است. شما این وظیفه را دارید که بهترین نسخه ممکن سایت خود را با استفاده از این تگ برای هر دستگاه (اعم از کامپیوتر، تبلت و موبایل) ارائه دهید.

جمع‌ بندی

این روزها، بیشتر کاربران از طریق موبایل و تبلت به اینترنت دسترسی پیدا می‌کنند. گوگل نیز برای جستجوهایی که از این دستگاه‌ها انجام می‌شود، یک فهرست (ایندکس) جداگانه دارد. به عبارت دیگر، ممکن است ترتیب نمایش سایت‌ها در صفحه نتایج گوگل وقتی که عبارتی را از طریق موبایل جستجو می‌کنیم، با زمانی که همان عبارت را از طریق لپ‌تاپ جستجو کرده‌ایم، متفاوت باشد. در فهرست نتایج موبایلی، سایت‌های سازگار با موبایل که مهم‌ترین ویژگی آنها ریسپانسیو بودنشان است، در جایگاه‌های بهتری قرار می‌گیرند.

بنابراین، اگر نمی‌خواهید کاربران خود را به دلیل به‌هم‌ ریختگی سایت از دست بدهید، حتماً از تگ Html viewport یا قالب‌های دارای این ویژگی استفاده کنید.