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

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

 

این مطلب نیز ممکن است برای شما مفید باشد: Redirectها برای SEO

 

بهینه سازی موبایل چیست؟

بهینه‌سازی موبایل فرآیندی است که در آن تضمین می‌کند، بازدیدکنندگانی که از دستگاه‌های تلفن همراه به سایت شما دسترسی دارند، تجربه‌ای بهینه‌شده از سایت خواهند داشت.

 

بهترین روش‌های سئو موبایل

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

 

سرعت صفحه

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

 

CSS، جاوا اسکریپت یا تصاویر را مسدود نکنید

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

 

طراحی سایت برای موبایل

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

 

عدم استفاده از Flash

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

 

عدم استفاده از pop-upها

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

 

طراحی برای انگشت‌های بزرگ

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

 

بهینه سازی عناوین و توضیحات متا

به یاد داشته باشید که وقتی کاربر با استفاده از دستگاه تلفن همراه جستجوی خود را انجام می‌دهد، با فضای صفحه نمایش کمتری کار می‌کند. بنابراین در چنین مواردی به منظور نشان دادن بهترین کار خود در SERPS، دقت کنید که هنگام ایجاد عناوین، URLها و توضیحات متا تا حد امکان مختصر (بدون کاهش کیفیت اطلاعات) باشند.

 

این مطلب نیز ممکن است برای شما مفید باشد: نحوه انتخاب نام دامنه

 

استفاده از داده‌های ساختاری Schema.org

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

 

بهینه سازی برای جستجوی محلی

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

 

پیکربندی سایت موبایل

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

 

طراحی وب سایت واکنش گرا

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

 

طرح‌های واکنش‌گرا از کوئری‌های رسانه‌ای به منظور هدف قرار دادن طرح‌بندی بر اساس عرض، جهت و وضوح صفحه استفاده می‌نمایند. به عنوان مثال، می‌توانید از CSS زیر به منظور نمایش محتوا برای صفحه‌ای با عرض ۴۲۰ پیکسل یا کمتر استفاده کنید:

نمونه کد:

@media screen and (max-width: 420px) {  .class {    [styles for this class here]  }}

و برای پیوند دادن به یک stylesheet جداگانه، HTML زیر را بین تگ‌های <head> خود قرار دهید:

نمونه کد:

<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>

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

از ابزار تست موبایل گوگل می‌توانید برای تأیید اینکه وب سایت شما برای موبایل بهینه شده است یا خیر استفاده نمایید.

 

سرویس دهی پویا

اگر منابعی برای طراحی مجدد کامل سایت ندارید، یا می‌خواهید محتوای متفاوتی را برای بازدیدکنندگان موبایل نسبت به بازدیدکنندگان دسک‌تاپ نمایش دهید، یک راه حل این است که از یک URL برای نمایش مجموعه‌های مختلف HTML و CSS بسته به نوع دستگاه بازدید کننده (که به آن user agent نیز گفته می‌شود) استفاده کنید. این می‌تواند در موارد مختلفی کاربرد داشته باشد، به عنوان مثال، برای زمانی که سایتی مربوط به رستوران دارید و می‌خواهید یک بازدیدکننده متحرک (که ممکن است در محله شما به دنبال رستوران باشد) بتواند به جای وب سایت کامل شما، نمونه‌ای از نظرات و نقشه موقعیت مکانی شما را ببیند.

نمایش محتوای مختلف بر اساس user agent، سرویس دهی پویا نامیده می‌شود و با استفاده از هدر Vary HTTP انجام می‌شود که به شکل زیر است:

 

هدر Vary HTTP

GET /page-1 HTTP/1.1Host: www.example.com(...rest of HTTP request headers...)HTTP/1.1 200 OKContent-Type: text/htmlVary: User-AgentContent-Length: 5710(... rest of HTTP response headers...)

به عبارت ساده، این بدان معناست که محتوای نمایش داده شده بر اساس user agent درخواست کننده صفحه متفاوت خواهد بود.

سرویس دهی پویا اگرچه روش مناسبی است ولیکن در همه موارد کاربرد ندارد؛ چراکه متکی به داشتن یک لیست به روز از user agentها است. به این معنی که هر بار که یک دستگاه تلفن همراه جدید وارد بازار می‌شود، آن لیست باید به روز شود. بنابراین برای دسکتاپ‌ها و دستگاه‌های تلفن همراه بعید نیست که به اشتباه بصورت HTML برای دستگاه دیگر ارائه شوند.

 

جداسازی URL تلفن همراه

گزینه دیگر، ایجاد یک سایت دوم و موازی برای کاربران تلفن همراه است. این روش به شما امکان می‌دهد که محتوای کاملاً سفارشی برای بازدیدکنندگان تلفن همراه ایجاد نمایید. به منظور جلوگیری از سردرگمی URL، اکثر سایت‌های موازی تلفن همراه از یک زیر دامنه "m" استفاده می‌کنند.

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

همچنین باید مطمئن شوید که ریدایرکت‌های سایت شما همگی در جای خود و تا حد امکان کم حجم هستند تا سرعت صفحه کاهش یابد. همچنین به منظور جلوگیری از مشکلات محتوای تکراری، باید rel="canonical" را نیز راه‌اندازی کنید.

 

 

 

منبع:

moz