کاربرد متاتگ Viewport به ناحیه قابل مشاهده برای کاربران از یک صفحه وب اشاره میکند. این ناحیه میتواند بسته به سیستمها و دستگاهها، متفاوت باشد و این موضوع طبیعی است که در تلفنهای همراه، صفحات وب کوچکتر از کامپیوتر هستند. قبل از ورود تبلت و تلفنهای همراه، صفحات وب فقط برای صفحه نمایش کامپیوتر طراحی میشدند و به همین خاطر دارای طراحی و اندازه ثابتی بودند. بنابراین وقتی با تبلت یا موبایل وارد این وبسایت میشدید، با صفحات وب بسیار بزرگی رو به رو میشدید که برای نمایش در تلفن همراه شما مناسب نبودند.
متاتگ Viewport چیست و چه کاربردی دارد؟
در ابتدا مرورگرهای مختلف برای حل این مشکل، کل صفحه را کوچک میکردند. این راه حل کافی نبود و مشکل را به صورت کامل برطرف نمیکرد و همچنان سایتها برای نمایش در موبایل و تبلت بهینه نبودند. کاربرد متاتگ Viewport به صاحبان سایتها، این امکان را میدهد تا بخشهایی از سایت که برای کاربرد قابل مشاهده هستند، کنترل کنند. این متا تگ در واقع اجازه میدهد تا ظاهر سایت به تناسب صفحه نمایش هر دستگاه تغییر کند و برای نمایش بهینهتر شود. برای اینکه اطلاعات بیشتری در این خصوص به دست بیاورید به شما پیشنهاد میکنیم که در ادامه این مطلب با ما همراه باشید.
متاتگ Viewport چیست؟
حتما این موضوع برای شما هم پیش آمده است که با استفاده از تلفن همراه خود وارد سایتی شوید و چیدمان آن سایت برای شما به هم ریخته نمایش داده شود. این در حالی است که اگر با لپ تاپ یا کامپیوتر خود وارد آن سایت میشود، ظاهر و چیدمان سایت کاملا منظم است! اصلیترین دلیل بروز چنین مشکلی، رسپانسیو و بهینه نبودن سایت برای تمامی صفحات نمایش است! برای جلوگیری از بروز چنین مشکلی باید از متا تگ ویوپورت (Viewport) استفاده شود. متا تگ این امکان را فراهم میکند تا اندازه صفحه سایت با اندازه صفحه نمایش دستگاه کاربر متناسب سازی شود و دیگر خبری از به هم ریختگی و بی نظمی نباشد!
به صورت کلی، متا تگ ویو پورت در بخش هد (Head) سایت قرار میگیرد و اگر اشتباه وارد شود، ممکن است کاربران برای مشاهده کامل صفحه سایت شما مجبور به اسکرول عرضی باشند که این موضوع میتواند تجربه کاربری را کاهش دهد و روی سئو سایت تأثیر منفی داشته باشد.
متا تگ Viewport در طراحی ریسپانسیو سایت چه کاربردی دارد؟
به طور خلاصه، منظور از ریسپانسیو بودن سایت این است که طرح صفحات سایت و عناصر موجود در آن متناسب با طول، عرض و رزولوشن صفحه نمایش دستگاه کاربران متغیر باشد تا برای نمایش در دستگاه مورد نظر، بهینه شود. این موضوع میتواند تجربه کاربری تأثیر بسیار خوب و مثبتی داشته باشد.
طراحی ریسپانسیو در واقع باعث میشود تا کاربران بتوانند به راحتی محتوا مورد نظر خود را در سایت شما پیدا کنند و به هدف خود از ورود به سایت برسند و در نهایت نیز وقت بیشتری را در سایت شما بگذرانند که این موضوع روی سئو سایت شما تأثیر مثبت دارد.
در حال حاضر اکثر جستجوها از طریق تلفنهای همراه انجام میشود. دقیقا به همین خاطر است که گوگل به تجربه کاربری کاربران موبایل خود نسبت به قبل اهمیت بیشتری میدهد و برای سایتها و فروشگاههای اینترنتی که در صفحه نمایش موبایل به درستی نمایش داده نمیشوند، ارزش کمتری قائل میشود.
یکی از نکاتی که در طراحی ریسپانسیو سایت باید مد نظر قرار داد، استفاده بهینه از کاربرد متاتگ Viewport است. همان طور که گفته شد، این متا تگ میتواند صفحات سایت را بسته به اندازه صفحه نمایش سیستم و دستگاه مورد نظر، تغییر دهد تا افراد بتوانند با کمترین مشکل به بخشهای مختلف سایت دسترسی داشته باشند.
در حقیقت در نمایش سایت در صفحات کامپیوتر و لپ تاپ، المانهایی موجود هستند که در زمان نمایش در صفحات نمایش کوچکتر، وجود آنها اضافی است که با حذف آنها، سرعت لود سایت برای موبایل بهتر میشود و کاربران با صفحه خلوت تری مواجه میشوند. همچنین این کار میتواند باعث کاهش نرخ پرش شود و تعامل بهتر و بیشتری بین سایت و کاربران ایجاد کرده و در نتیجه روی سئو سایت تأثیر مثبتی داشته باشد.
آشنایی با پارامترهای متا تگ Viewport
متاتگ Viewport از چند پارامتر تشکیل شده است که هر کدام از آنها یکی از ویژگیهای صفحه نمایش را تعریف کردهاند. در ادامه این مطلب به معرفی هر یک از این پارامترهای میپردازیم:
پارامتر width: این پارامتر که یکی از اصلیترین پارامترهای ویوپورت به حساب میآید، مشخص میکند که عرض سایت باید چقدر باشد. با مقدار width=device-width عرض وب سایت شما مساوی به عرض صفحه نمایش دستگاه مورد نظر میشود. البته شما میتوانید یک عدد مشخص نیز برای عرض صفحه سایت خود در نظر بگیرید.
پارامتر height: این پارامتر نیز طول وبسایت شما را مشخص میکند، مثل پارامتر قبلی، شما میتوانید آن را برای صفحه نمایش هر دستگاهی تنظیم کنید تا طول سایت شما برای صفحه نمایش کاربران مختلف، مناسب باشد. البته شما میتوانید برای آن، یک عدد مشخص نیز وارد کنید.
پارامتر Initial-scale: این پارامتر، اندازه بزرگنمایی یا زوم اولیه صفحه را موقع اولین بارگذاری مشخص میکند. با استفاده از این پارامتر میتوانید از زوم پیشفرض مرورگرها جلوگیری کنید.
پارامتر Maximum-scale
این پارامتر بیشتری مقدار زوم که کاربران میتوانند در سایت شما انجام دهند را مشخص میکند. برای مثال اگر maximum-scale=1 را قرار دهید، به این معنی است که کاربران نمیتوانند هیچ زومی انجام دهند. از آنجایی که در اکثر مواقع کاربران در صفحات کوچک مثل موبایل نیاز به زوم کردن دارند، بهتر است این پارامتر را تنظیم نکنید.
پارامتر Minimum-scale: این پارامتر نیز برعکس پارامتر قبلی، مشخص میکند که کاربران تا چه میزان امکان کوچک نمایی دارند.
پارامتر User-scalable: این پارامتر امکان زوم توسط کاربران را ایجاد میکند و دو مقدار Yes و No را میپذیرد. اگر از حالت NO استفاده کنید، به این معنی است که کاربران هیچ زومی نمیتوانند در سایت شما انجام دهند. بهتر است از حالت YES استفاده شود یا به صورت کلی از این پارامتر استفاده نکنید تا کاربران امکان زوم در سایت شما را داشته باشند.
پارامتر interactive-widget: این پارامتر نیز به تأثیر ویجت های تعاملی مثل کیبوردهای مجازی روی صفحه میپردازد.
چطور از متا تگ Viewport استفاده کنیم؟
HTML یک روش ساده را در اختیار طراحان و صاحبان سایت قرار داده تا بتوانند به راحتی از متا تگ ویو پورت در صفحات سایت خود بهره ببرند. شما میتوانید به راحتی با استفاده از دستور کلی که در ادامه در اختیارتان قرار میدهیم، در قسمت هد سایت خود قرار دهید.
همچنین اگر سایت شما با ورد پرس طراحی شده است، باید بدانید که اکثر قالبها به صورت پیش فرض متا تگ ویو پورت را در head سایت شما وارد میکنند؛ ولی برای اطمینان از این موضوع میتوانید وارد سربرگ نمایش شده و گزینه ویرایشگر پرونده پوسته را انتخاب کنید.
سپس از منویی که در سمت چپ باز میشود، گزینه سربرگ پوسته (header.php) را انتخاب کنید. در صفحه باز شده میتوانید دستور مربوط به متا تگ ویو پورت را ببینید. اگر نتوانستید این دستور را پیدا کنید، عبارت گفته شده در این مطلب را در این بخش ارسال کنید تا این متا تگ برای سایت شما تنظیم شود.
چطور viewport سایت خود را بررسی کنیم؟
برای بررسی این موضوع که آیا وب سایت شما برای نمایش در موبایل و دستگاههای دیگر بهینه شده است یا خیر، ابزارهای مختلفی وجود دارند که یکی از بهترین آنها، Mobile-Friendly Test است. این ابزار که توسط خود گوگل پشتیبانی میشود، پس از اینکه وبسایت شما را بررسی کرد، اعلام میکند که آیا سایت شما برای نمایش در موبایل بهینه شده است یا خیر. برای استفاده از این ابزار تنها کافی است عبارت search.google.com/test/mobile-friendly را در موتور جستجوی خود وارد کنید.
پس از استفاده از این ابزار، یک گزارش برای شما نمایش داده میشود که اعلام میکند که آیا صفحه سایت مورد نظر شما برای نمایش در موبایل بهینه شده است یا خیر. همچنین اگر صفحه سایت شما ریسپانسیو نشده باشد، میتوانید دلایل آن را در این ابزار مشاهده کنید.
پارامترهای مهم متاتگ Viewport
متاتگ Viewport شامل چندین پارامتر کلیدی است که در ادامه به معرفی آنها میپردازیم:
width: عرض صفحه را مشخص میکند. مقدار width=device-width باعث میشود که صفحه با عرض دستگاه کاربر هماهنگ شود.
height: مشابه پارامتر width، طول صفحه را تعیین میکند.
initial-scale: میزان بزرگنمایی اولیه صفحه را مشخص میکند.
maximum-scale: حداکثر مقدار زوم قابل انجام در صفحه را تعیین میکند.
minimum-scale: حداقل مقدار زوم را مشخص میکند.
user-scalable: اگر مقدار no برای این پارامتر تنظیم شود، کاربر نمیتواند زوم کند.
چگونه متاتگ Viewport بر سئو سایت تأثیر میگذارد؟
گوگل اهمیت زیادی به تجربه کاربری در موبایل میدهد. اگر وبسایت شما در دستگاههای مختلف بهدرستی نمایش داده نشود، نرخ پرش (Bounce Rate) افزایش یافته و سئو سایت تحت تأثیر قرار میگیرد. استفاده صحیح از متاتگ Viewport باعث بهبود تجربه کاربری، افزایش تعامل کاربران و بهینهسازی رتبه سایت در نتایج جستجو میشود.
بررسی متاتگ Viewport در سایت شما
برای بررسی اینکه آیا سایت شما از متاتگ Viewport استفاده میکند، میتوانید مراحل زیر را انجام دهید:
وارد سایت خود شوید و کلید F12 را فشار دهید تا ابزار Developer Tools باز شود.
به بخش Elements بروید و به دنبال تگ <meta name=”viewport”> بگردید.
اگر این متاتگ وجود ندارد، باید آن را به بخش <head> سایت اضافه کنید.
نتیجهگیری
کاربرد متاتگ Viewport یک ابزار ضروری در طراحی ریسپانسیو وب است که نمایش مناسب سایت را در دستگاههای مختلف تضمین میکند. استفاده صحیح از این متاتگ باعث بهبود تجربه کاربری، کاهش نرخ پرش و بهینهسازی سئو میشود. بنابراین، اگر هنوز این متاتگ را در سایت خود استفاده نکردهاید، بهتر است هرچه سریعتر آن را اضافه کنید.
اصطلاحات مرتبط
ریسپانسیو (Responsive): طراحی سایت بهگونهای که در همه دستگاهها بهدرستی نمایش داده شود.
نرخ پرش (Bounce Rate): درصد کاربرانی که بدون تعامل با سایت، آن را ترک میکنند.
مقیاس اولیه (Initial Scale): میزان بزرگنمایی صفحه هنگام بارگذاری اولیه.
مطالب مرتبط: