متا تگ Viewport چیست؟ + تاثیرات آن بر سئو

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

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

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

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

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

متا تگ Viewport چیست؟

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

به عبارت دیگر، ویوپورت یک Meta Tag محسوب می شود که در قسمت تگ هدر سایت قرار می گیرد. اگر این متا تگ به درستی برای صفحات وبسایت تعریف نشود، کاربران موبایل برای مشاهده تمام اجزای آن باید به صورت افقی اسکرول کنند که این موضوع یک امتیاز منفی در تجربه کاربری (User Experience) محسوب شده و نمره سئوی وب سایت را به شدت کاهش خواهد داد. طراحی ریسپانسیو (Responsive) باعث می‌شود که کاربران به راحتی به محتوای مورد نظر خود در وب‌ سایت دسترسی پیدا کنند. در واقع، اگر کاربر به آسانی به هدف خود برسد، زمان بیشتری را در سایت شما باقی می‌ ماند. که این موضوع از نظر گوگل بسیار اهمیت دارد و یکی از مهم‌ ترین اصول سئو محسوب می شود.

امروزه بیشتر جستجوها از طریق موبایل انجام می شود. بنابراین، گوگل بیش از هر زمان دیگری به تجربه کاربری دارندگان موبایل اهمیت می دهد و رتبه صفحاتی که ریسپانسیو نیستند را به شدت کاهش می دهد. در حقیقت، صفحات Mobile-Friendly در چشم گوگل عزیر هستند، بنابراین اگر کار با متا تگ Viewport را بلد نباشید، صفحات وبسایت شما برای دیده شدن و جذب کاربر اصلاً شانس نخواهد داشت.

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

در واقع عناصری که در صفحات وب سایت برای نمایش در کامپیوتر وجود دارد، در نمایشگرهای کوچکتر مانند تلفن همراه و تبلت نیز نمایش داده می شوند. متا تگ ویوپورت با حذف آنها سرعت بارگذاری سایت در مرورگرهای موبایل را افزایش داده و باعث می شود کاربر با تمرکز بیشتری صفحات را مشاهده کند. این کار در نهایت باعث کاهش نرخ پرش (Bounce Rate)، افزایش تعامل کاربران و در نهایت بهبود سئوی سایت خواهد شد.

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

متا تگ Viewport شامل چند پارامتر است که هر کدام یکی از ویژگی های صفحات نمایش را تعریف می کنند. به طور کلی، متا تگ ویو پورت دارای پارامترهای زیر است:

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

پارامتر ارتفاع (Height Parameter): این پارامتر طول صفحات وب را تعیین می کند. کاربرد آن مانند پارامتر قبلی است و از طریق آن می توان طول صفحه را با فرمول height=device-height مشخص کرد. فراموش نکنید که تعیین یک عدد ثابت برای طول صفحات توصیه نمی شود.

پارامتر مقیاس بندی اولیه (Initial-Scale):  این پارامتر میزان بزرگنمایی (Zoom) اولیه صفحات را هنگام اولین بارگذاری تعیین می کند. برای مثال فرمول initial-scale=1 از زوم کردن پیش فرض مرورگرها جلوگیری بعمل می آورد.

پارامتر زوم حداکثری (Maximum-Scale): این پارامتر حداکثر بزرگنمایی که کاربر می تواند در صفحات وب سایت انجام دهد را مشخص می کند. برای مثال، اگر از فرمول Maximum-Scale=1 استفاده شود، کاربر نمی تواند روی صفحات وبسایت زوم کند. بیشتر کاربران موبایل برای مشاهده تمام محتوای یک وب سایت بزرگنمایی انجام می دهند، بنابراین بهتر است این پارامتر را تنظیم نکنید.

پارامتر بزرگنمایی حداقلی (Minimum-Scale): این پارامتر دقیقاً عملکردی برعکس پارامتر قبلی دارد و تعیین می کند که کاربر چقدر می تواند کوچک نمایی (Zoomout) کند.

پارامتر مقیاس پذیر کردن توسط کاربر (User-Scale): این پارامتر امکان بزرگنمایی توسط کاربر را تعیین می کند و شامل دو مقدار Yes و No است. اگر از User-scalable=No استفاده کنید به این معنی است که کاربران امکان هیچ بزرگنمایی را ندارند. به طور کلی بهتر است حالت پیش فرض این پارامتر را بر روی User-scalable=Yes تنظیم کنید یا آن را دست نخورده باقی بگذارید تا کاربر بتواند در صفحات سایت شما بزرگنمایی را انجام دهد.

پارامتر ویجت تعاملی (Interactive-Widget): این پارامتر امکانات تعاملی مانند بارگذاری یک صفحه کلید مجازی بر روی صفحات وبسایت را مشخص می کند. این پارامتر مقادیری نظیر resize-visual، resize-content و overlays-content را قبول می کند.

چگونه از متا تگ viewport استفاده کنیم؟

توسعه دهندگان با استفاده از زبان HTML5  می توانند به راحتی از متا تگ Viewport در صفحات وبسایت خود استفاده کنند. آنها می توانند با استفاده از دستور زیر متا تگ viewport را در Header صفحات وب سایت خود اعمال کنند. این کد فقط یک مثال است و شما می توانید پارامترهایی که در بالا توضیح دادیم را در آن وارد کنید.

علاوه بر این، اگر وب سایت خود را با وردپرس طراحی می کنید، اکثر قالب های آن متا تگ Viewport را به صورت پیش فرض در هدر صفحات وبسایت قرار می دهند. البته، برای اطمینان هر چه بیش تر می توانید گزینه «ویرایشگر پرونده پوسته» که در تب «نمایش» قرار دارد را انتخاب کرده و با توجه به زبان وردپرس خود دستور Viewport Meta Tag را در بخش Header.php مشاهده کنید.

نحوه بررسی متا تگ Viewport در یک صفحه

برای اطمینان از بهینه بودن صفحات وبسایت خود برای نمایش در موبایل می توانید از ابزارهای تحلیلی موجود در بازار استفاده کنید. برای مثال، ابزار Mobile-Friendly Test این امکان را در اختیار شما قرار می دهد تا به صورت رایگان از عملکرد صفحات خود در دستگاه های موبایل مطمئن شوید. در برخی اوقات که صفحات دچار مشکل باشند معمولاً با 3 خطای زیر مواجه خواهید شد:

• محتوای صفحات وب سایت برای نمایش در موبایل بیش از حد عریض هستند.
• دکمه های قابل کلیک خیلی نزدیک به هم هستند.
• محتوای متنی برای خواندن در صفحه نمایش موبایل بیش از حد کوچک هستند.

 تاثیر متا تگ Viewport بر سئو

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

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

 کلام آخر

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