آشنایی با متا تگ Viewport و نقش آن در سئو سایت

قبل از هرچیز لازم است بدانید که به بخشی از صفحات وب که توسط کاربران قابل رؤیت است Viewport می‌گویند؛ برای اینکه مدیران سایت‌ها بتوانند کنترل بهتری روی این بخش از سایت داشته باشند HTML5 روشی معرفی کرده که از طریق یکی از انواع متا تگ به نام متا تگ viewport  انجام شدنی است در واقع یکی از تکنیک‌های سئو استفاده از این متا تگ است که ظاهر صفحه وب با تغییر سایز دستگاه کاربر (موبایل، تبلت و کامپیوتر) تغییر می‌کند به همین دلیل است که منوها و چیدمان صفحه وب در موبایل تغییر کرده و بخش‌هایی که اهمیت کمتری دارند حذف می‌شوند؛ این مراحل توسط این متا تگ و با انتخاب و تحت کنترل مدیر سایت انجام می‌شود. در ادامه به طور مفصل درباره متا تگ Viewport و نقش آن در سئو سایت توضیح می‌دهیم.

متا تگ Viewport چیست؟

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

پارامترهای مهم متا تگ Viewport و کاربرد هر کدام

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

Width

این پارامتر تعیین کننده‌ی عرض صفحه   (Page Width)است؛ مقدار device-width به این معنی است که عرض صفحه با عرض دستگاه کاربر ( موبایل یا تبلت) برابر شود.

Height

این پارامتر تعیین کننده‌ی طول صفحه نمایش بوده و معمولاً به صورت device-height تنظیم می‌شود تا با طول صفحه نمایش کاربر برابر باشد.

Initial-Scale

پارامتر initial-scale تعیین کننده‌ی زوم اولیه صفحه هنگام بارگذاری است و مقدار 1.0 هم به این معنی است که صفحه بدون زوم نمایش داده شود.

minimum-scale

این پارامتر مشخص کننده‌ی کمترین میزان زومی است که کاربر می‌تواند روی صفحه اعمال کند.

maximum-scale

پارامتر ماکسیموم بیشترین میزان زومی را که کاربر می تواند روی صفحه اعمال کند تعیین می‌نماید.

user-scalable

این پارامتر اجازه زوم کردن یا نکردن صفحه را به کاربر می‌دهد و مقادیر yes یا no را می پذیرد؛ استفاده صحیح از این پارامترها برای طراحی سایت ریسپانسیو (واکنش‎گرا) ضروری بوده تا صفحات در دستگاه‌های مختلف به درستی  نمایش داده شوند؛ همانطور که توضیح دادیم متا تگ  viewportچند پارامتر دارد که از طریق هر پارامتر یکی از ویژگی‌های صفحه نمایش تعریف می‌شود.

نحوه تعریف و تنظیم صحیح متا تگ Viewport

گفتنی است که HTML5  روشی را ارائه داد تا طراحان وب بتوانند viewport را از طریق برچسب <meta> تحت کنترل خود داشته باشند؛ برای این کار لازم است که متا تگ ویوپورت را طبق دستور پایین در تمام صفحات وب خود وارد نمایید:

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

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

روش‌های تست و چک کردن Viewport وب سایت

به کمک روش‌هایی که در ادامه می‌گوییم می‌توانید ویوپورت وب‌سایت خود را به طور کامل تست کرده و از نمایش صحیح آن در دستگاه‌های مختلف مطمئن شوید.

 بهره‌گیری از ابزارهای توسعه مرورگر  (developer tools)

اکثر مرورگرهای مدرن از جمله: گوگل کروم، فایرفاکس و سافاری دارای ابزارهای توسعه داخلی بوده و به شما امکان بررسی و تست وب‌سایت در اندازه‌ها و دستگاه‌های مختلف را می‌دهند. برای استفاده این ابزار می‎‌توانید روی صفحه کلیک راست کرده و  “Inspect”یا  “Inspect Element”را انتخاب کنید؛ همچنین می‌توانید از کلیدهای ترکیبی Ctrl+Shift+I (در ویندوز) و Cmd+Option+I (در مک) استفاده نمایید.

قسمت دیگری از این ابزارها برای شبیه‌سازی دستگاه‌ها و تغییر سایز صفحه بوده و اصولاً با نام “Toggle device toolbar”  یا چیزی شبیه آن دیده می‌شود با فعال سازی این گزینه بهینه‌سازی نمایش سایت در مرورگرهای موبایل ممکن شده و می‌توانید سایت خود را در اندازه‌های مختلف و برای دستگاه‌های متفاوت (مثل موبایل، تبلت، و دسکتاپ) تست کنید؛ همچنین وارد کردن ابعاد دلخواه در قسمت  Dimensions بررسی سایت را در اندازه‌های سفارشی برای شما ممکن می‌کند.

 ابزارهای تست آنلاین ریسپانسیو بودن سایت

سایت‌هایی مانند:  Screenfly، Am I Responsive،  Viewport Resize  به شما امکان می‌دهند آدرس سایت خود را وارد کرده و آن را در اندازه‌ها و دستگاه‌های مختلف مشاهده کنید؛ با استفاده از این ابزارها می‌توانید با سرعت و بدون نیاز به نصب نرم‌افزار اضافی بررسی کنید که سایت شما طراحی واکنش‌گرا دارد یا خیر.

ابزارهای تست سرعت سایت

ابزار تست موبایل فرندلی گوگل و  PageSpeed Insights سرعت سایت را بررسی کرده و اطلاعاتی درباره نحوه نمایش سایت در دستگاه‌های مختلف را در اختیار کاربران می‌گذارند؛ در واقع این ابزارها به شما تجربه کاربری در موبایل (Mobile UX) را نشان می‌دهند که آیا سایت شما برای نمایش در موبایل بهینه شده است یا خیر و توصیه‌هایی برای بهبود نیز ارائه می‌دهند.

استفاده از  Google Analytics

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

بررسی متای  viewport

گفتنی است که صفحات وب و نحوه نمایش سایت در دستگاه‌های مختلف توسط متا تگ viewport در head کنترل می‌شوند مطمئن شوید که این متا تگ به درستی تنظیم شده و مقادیر مناسبی برای عرض (width) و مقیاس اولیه  initial-scaleلحاظ شده است معمولاً بهترین تنظیمات برای نمایش صحیح در دستگاه‌های مختلف مقدار  width=device-width  برای عرض و 1.0initial-scale=  می‌باشند.

همچنین برای بررسی اینکه وب‌سایت شما با موبایل سازگار است یا خیر از ابزار Mobile-friendly Test استفاده کنید به این صورت که URL خود را در قسمت خالی چسبانده و در پایین کلید “Test RL” را بزنید این ابزار وب‌سایت شما را از لحاظ سازگار بودن با موبایل بررسی کرده و اگر ویوپورت شما پیکربندی نشده باشد شما را مطلع می‌کند.

اهمیت متا تگ Viewport در طراحی سایت واکنش‌گرا

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

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

پس از انتشار الگوریتم موبایل گدون، سایت‌های رسپانسیو و سازگار با موبایل رتبه بهتری در نتایج موتورهای جستجو کسب کردند؛ از این رو می‌توانید برای رسیدن به بیشترین سازگاری با موبایل با حداقل هزینه از متا تگ ویوپورت استفاده کنید؛ در واقع برای سئو بهتر، لازم است سایت طبق استانداردهایMobile First Indexing باشد که کاربر وقت خود را برای تغییر اندازه صفحه نمایش هدر ندهد سایتی که با اندازه‌های بزرگ صفحه‌نمایش‌های قدیمی فیکس شده باشد و قابلیت تطابق با نمایشگرهای مختلف نداشته باشد در نمایشگرهای کوچک نامنظم دیده می‌شود و در نتیجه کارایی نخواهد داشت دلیل اهمیت این موضوع این است که  سایت رسپانسیو از هر دستگاهی قابل ‌دسترسی است و این وظیفه شما است که بهترین نسخه ممکن سایت خود را با استفاده از متا تگ viewport برای هر دستگاه از جمله: لپ‌تاپ، گوشی موبایل، تبلت و .. ارائه دهید؛ در ادامه تأثیراتی که این متا تگ بر سئو دارد را شرح می‌دهیم:

بهبود تجربه کاربری

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

افزایش تعامل با کاربران

تجربه کاربری خوب باعث می‌شود کاربران تایم بیشتری در سایت بمانند و با محتوا تعامل بیشتری داشته باشند.

تأثیر مثبت بر رتبه‌بندی گوگل

گوگل به سایت‌هایی که تجربه کاربری خوبی را در دستگاه‌های موبایل ارائه می‌دهند، رتبه بالاتری می‌دهد با توجه به اینکه اکثر جستجوها از طریق موبایل انجام می‌شوند، مقیاس گذاری صفحات (Page Scaling) و سازگاری با موبایل اهمیت زیادی دارد.

کاهش نرخ پرش

اگر سایت شما برای موبایل بهینه نباشد ممکن است کاربران به دلیل دشواری در خواندن یا پیمایش از سایت خارج شوند (نرخ پرش بالا)، متا تگ viewport با بهبود تجربه کاربری در موبایل (Mobileux) به کاهش نرخ پرش کمک می‌کند.

تأثیر غیرمستقیم بر سئو

به طور کلی باید بگوییم که متاviewport  به طور مستقیم بر رتبه بندی تأثیر نمی‌گذارد اما با بهبود تجربه کاربری و سازگاری با موبایل می‌تواند سیگنال‌های مثبتی به گوگل ارسال کند که در نهایت باعث بهبود رتبه‌بندی سایت می‌شود.

سخن آخر

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