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 یک روش ساده را در اختیار طراحان و صاحبان سایت قرار داده تا بتوانند به راحتی از متا تگ ویو پورت در صفحات سایت خود بهره ببرند. شما میتوانید به راحتی با استفاده از دستور کلی که در ادامه در اختیارتان قرار می‌دهیم، در قسمت هد سایت خود قرار دهید. شما میتوانید در صورت نیاز از پارامترهای گفته شده در این مطلب نیز میتوانید برای تغییر این دستور استفاده کنید.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
همچنین اگر سایت شما با ورد پرس طراحی شده است، باید بدانید که اکثر قالب‌ها به صورت پیش فرض متا تگ ویو پورت را در head سایت شما وارد می‌کنند؛ ولی برای اطمینان از این موضوع میتوانید وارد سربرگ نمایش شده و گزینه ویرایشگر پرونده پوسته را انتخاب کنید.
سپس از منویی که در سمت چپ باز می‌شود، گزینه سربرگ پوسته (header.php) را انتخاب کنید. در صفحه باز شده میتوانید دستور مربوط به متا تگ ویو پورت را ببینید. اگر نتوانستید این دستور را پیدا کنید، عبارت گفته شده در این مطلب را در این بخش ارسال کنید تا این متا تگ برای سایت شما تنظیم شود.
چطور از متا تگ Viewport استفاده کنیم؟
چطور viewport سایت خود را بررسی کنیم؟
برای بررسی این موضوع که آیا وب سایت شما برای نمایش در موبایل و دستگاه‌های دیگر بهینه شده است یا خیر، ابزارهای مختلفی وجود دارند که یکی از بهترین آنها، Mobile-Friendly Test است. این ابزار که توسط خود گوگل پشتیبانی می‌شود، پس از اینکه وبسایت شما را بررسی کرد، اعلام می‌کند که آیا سایت شما برای نمایش در موبایل بهینه شده است یا خیر. برای استفاده از این ابزار تنها کافی است عبارت search.google.com/test/mobile-friendly را در موتور جستجوی خود وارد کنید.
پس از استفاده از این ابزار، یک گزارش برای شما نمایش داده می‌شود که اعلام می‌کند که آیا صفحه سایت مورد نظر شما برای نمایش در موبایل بهینه شده است یا خیر. همچنین اگر صفحه سایت شما ریسپانسیو نشده باشد، میتوانید دلایل آن را در این ابزار مشاهده کنید.
سخن پایانی؛ تأثیر متاتگ ویو پورت روی سئو
چندین بار توسط گوگل و متخصصین سئو اعلام شده است که یکی از اصلی‌ترین فاکتورهای رتبه بندی وب سایت در نتایج جستجو، تجربه کاربری می‌باشد. یکی از اصلی‌ترین عواملی که در تجربه کاربری می‌تواند تأثیر مثبتی داشته باشد، نمایش صحیح و بهینه سایت به تمامی کاربران با سیستم‌ها و دستگاه‌های مختلف است.
نمایش صحیح صفحات سایت باعث می‌شود تا زمان کاربران با تنظیم صفحه نمایش، بزرگ نمایی و کوچک نمایی آن از بین نرود. همچنین در زمان نمایش در صفحات کوچک‌تر موبایل، از نمایش المان‌های اضافی جلوگیری شود تا کاربران بتوانند به محتوای مورد نظر خود دست پیدا کنند. این وظیفه متخصص سئو است که بهترین حالت از سایت را در اختیار کاربران قرار دهد تا گوگل نیز با تکیه بر این موضوع، بتواند جایگاه شما را در نتایج جستجو بهتر کند. به صورت کلی در یک عبارت اگر بخواهیم بگوییم، این متا تگ وظیفه بهینه سازی نمایش سایت برای کاربران با دستگاه‌های مختلف را برعهده دارد، از این رو حتما باید از این تگ استفاده کنید.
