بیایید یک سفر علمی را با هم آغاز کنیم.
شما یک جستجوی سریع در گوگل انجام می‌دهید و نتایج زیادی را مرور می‌کنید. سپس، چند وب‌سایتی را پیدا می‌کنید که پاسخ مورد نظر شما را دارند. اما اولین و امیدوارکننده‌ترین سایتی که از نتایج جستجو انتخاب می‌کنید، روی گوشی موبایل شما به درستی کار نمی‌کند.
بنابراین، آن را می‌بندید و بررسی می‌کنید که آیا سایت بعدی آنچه را که نیاز دارید داشته باشد – چیز مهمی نیست، درست است؟
خب، چه می‌شد اگر آن سایت با رتبه بالا که به تازگی بسته‌اید متعلق به شما بود؟
آیا تا به حال فکر کرده‌اید که چند بار این اتفاق برای وب سایت شما افتاده است؟
چه تعداد از افراد وب سایت شما را بسته‌اند و باعث افزایش نرخ پرش (bounce rate) شما شده‌اند؟
چه تعداد از کاربران سایت شما را رد کردند؛ زیرا برای آنها مفید نبوده است؟
محتوا پادشاه است، اما همان‌طور که در اینجا می‌بینیم، تنها عامل تعیین کننده نیست. دستگاهی که محتوا را نمایش می‌دهد، تجربه کاربری را نیز شکل می‌دهد. اما از آنجایی که اکثر وب‌سایت‌ها روی رایانه شخصی ساخته می‌شوند، مالکان آنها اغلب فراموش می‌کنند که آنها را برای سایر دستگاه‌ها بهینه کنند.
آیا شما هم همین اشتباه را مرتکب می‌شوید؟
بررسی کنید که آیا وب سایت شما برای موبایل بهینه‌سازی‌شده است یا خیر؟
امروزه تقریباً همه یک گوشی هوشمند دارند و از آن برای جستجوی آنلاین استفاده می‌کنند. شما نمی‌توانید فقط روی کاربران دسکتاپ تمرکز کنید و امیدوار باشید که همه چیز را به درستی مدیریت کنید. اگر می‌خواهید افراد کمتری سایت شما را ترک کنند، آن را برای موبایل بهینه کنید.
1- وب‌سایت خود را سازگار با موبایل طراحی کنید.
این عالی است که وب‌سایت شما در کامپیوتر زیبا و بی‌نقص است.
آیا تا به حال آن را بر روی یک گوشی هوشمند باز کرده‌اید؟
آیا به این شکل نمایش داده می‌شود؟
اگر جواب بله است، پس یک مشکل بزرگ دارید. استفاده از آن وب سایت روی موبایل عملاً غیرممکن است. متأسفانه، سازگار بودن با کامپیوتر به طور خودکار باعث سازگاری وب سایت با موبایل نمی‌شود.
از آنجایی که گوگل اولویت ایندکس گذاری بر اساس موبایل را دارد، اگر سایت شما برای موبایل بهینه نشده باشد، ممکن است هرگز صفحه اول نتایج موتور جستجو (SERP) را نبیند.
پس چه کار باید کرد؟
اولین قدم مهم در ایجاد یک سایت سازگار با موبایل، کار بر روی یک طراحی واکنش‌گرا (responsive design) است.
وقتی سایتی واکنش‌گرا باشد، به درستی روی صفحه نمایش با تمام اندازه‌ها نمایش داده می‌شود، درست شبیه به این:
چگونه طراحی اولیه وب‌سایت برای موبایل انجام دهیم؟
دو راه برای ارتقا وب‌سایت شما به یک تجربه کاربری برای موبایل وجود دارد. هر راه حلی مزایا و معایب خاص خود را دارد.
- سریع‌ترین راه: نصب یک پلاگین اختصاصی برای موبایل مانند WPtouch است که در عرض چند دقیقه به وب‌سایت شما یک طراحی واکنش‌گرا می‌دهد. این ساده‌ترین روش است، اما بدون ریسک نیست؛ پلاگین‌ها مستعد خرابی و (در موارد حاد) حتی هک شدن هستند.
- مطمئن‌ترین و امن‌ترین راه: اصلاح کد وب‌سایت شما برای گنجاندن راهکارهای واکنش‌گرایی است.
چگونه یک وب‌سایت واکنش‌گرا را به صورت دستی کدگذاری کنیم؟
اگر می‌خواهید خودتان دست به کار شوید و وب‌سایت دسکتاپ خود را به یک وب‌سایت واکنش‌گرا و سازگار با موبایل تبدیل کنید، باید موارد زیر را لحاظ کنید:
- Viewport: به مرورگرها کمک می‌کند تا نحوه تطبیق ابعاد صفحه وب شما با صفحه نمایش را بیاموزند.
- تصاویر واکنش‌گرا: تصاویری که به طور خودکار اندازه خود را با توجه به اندازه صفحه نمایش تنظیم می‌کنند.
- چیدمان سیال (Fluid Layout): یک چیدمان انعطاف پذیر که بر اساس اندازه صفحه نمایش، محتوا را سازماندهی می‌کند.
- پرس و جوهای رسانه‌ای (Media Queries): دستورات CSS که به مرورگر دستور می‌دهند سبک‌های خاصی را بر اساس اندازه صفحه نمایش اعمال کند.
ما تمام کدهای مورد نیاز برای ایجاد یک وب‌سایت واکنش‌گرا را به شما آموزش خواهیم داد. اما قبل از هر اقدامی، حتماً از وب‌سایت خود بک‌آپ تهیه کنید.
چگونه Viewport را در یک وب‌سایت تنظیم کنیم؟
Viewport به هر مرورگری کمک می‌کند تا بداند چگونه ابعاد صفحه وب شما را با صفحه نمایش خود تطبیق دهد.
اگر یک Viewport را به HTML وب‌سایت خود اضافه کنید، صفحات وب شما به طور خودکار برای قرار گرفتن در هر دستگاه موبایلی تنظیم می‌شوند. برای تنظیم Viewport روی یک صفحه، این خط کد HTML را داخل تگ <head> آن اضافه کنید:
عکس
چگونگی ساخت تصاویر واکنش‌پذیر
وقتی صحبت از سازگاری با موبایل می‌شود، مهم است که بازدیدکننده شما مجبور نباشد برای دیدن محتوای وب سایت شما به سمت چپ و راست اسکرول کند.
این برای همه تصاویر همچنین اطلاق می‌شود، به ویژه تصاویر اطلاعاتی. تصاویر واکنش‌پذیر باید به طور خودکار کوچک و بزرگ شوند تا به طور کامل با عرض صفحه هر بازدیدکننده سازگار شوند. پس، شما می‌خواهید از خاصیت max-width استفاده کنید.
چگونگی اضافه کردن max-width برای ساخت تصاویر واکنش‌پذیر
- فایل قالب وب‌سایتتان (فایل CSS) را باز کنید.
- “max-width: 100%” را برای تگ <img> اضافه کنید، مانند این:
حال اگر عریض‌تر از تصویری باشد که در مرحله بالا اضافه کرده‌اید، به‌طور خودکار کوچک می‌شوند تا با فضای موجود متناسب شوند.
نحوه نصب یک چیدمان سیال
وقتی یک چیدمان واکنش‌گرا در وب‌سایت خود دارید، عناصر صفحه به‌طور خودکار با هر صفحه‌نمایشی تطبیق پیدا می‌کنند. به عنوان مثال، اگر یک جدول سیال داشته باشید، جدول همراه با صفحه تغییر اندازه می‌دهد. به این ترتیب، می‌توانید همه ستون‌ها را بدون نیاز به پیمایش به چپ یا راست ببینید – حتی در یک صفحه‌نمایش کوچک موبایل.
چند روش مختلف برای چیدمان سیال وجود دارد که بسته به سایت شما می‌توانید از آنها استفاده کنید:
- Flexbox
- Multicol
- Grid
از هر کدام از آنها به‌طور مناسب استفاده کنید.
زمان استفاده از Flexbox
از این روش زمانی استفاده کنید که تعداد آیتم‌هایی با اندازه‌های متفاوت دارید و می‌خواهید آنها را در یک ردیف قرار دهید. خاصیت “display: flex” را به تگ HTML آنها اضافه کنید، مانند این مثال:
.items {
display: flex;
}زمان استفاده از Multicol
این روش محتوای شما را به ستون‌هایی تقسیم می‌کند. از خاصیت column-count استفاده می‌کند، مانند این:
.container {
column-count: 3;
}در این مثال سه ستون دریافت می‌کنید.
زمان استفاده از Grid
همان‌طور که از نام آن پیداست، این روش یک شبکه برای قرار دادن عناصر شما در داخل ایجاد می‌کند. در اینجا یک مثال آورده‌ایم:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}خاصیت grid-template-columns تعداد ردیف‌های گرید (در این مثال سه تا) و اندازه آنها (۱ fr) را تعیین می‌کند.
هنوز مطمئن نیستید کدام را استفاده کنید؟ افزونه‌ها می‌توانند به طور خودکار بهترین طرح فلوئید را شناسایی و پیاده‌سازی کنند.
چگونه کوئری‌های رسانه‌ای را به وب‌سایت خود اضافه کنید:
کوئری‌های رسانه‌ای راه دیگری برای تطبیق دادن محتوای شما با هر اندازة صفحه نمایشی هستند. اما آنها یک مزیت بسیار قابل توجه دیگر نیز دارند: آنها سایت شما را با ویژگی‌های خاصی که به‌صورت پیش‌فرض روی دستگاه‌های مختلف وجود دارد، تطبیق می‌دهند.
به عنوان مثال، نشانگر ماوس کامپیوتر می‌تواند روی عناصر صفحه حرکت کند و تلفن‌های هوشمند دارای صفحه‌نمایش لمسی هستند. این ویژگی‌ها را در نظر بگیرید و می‌توانید تجربه کاربری را برای هر نوع دستگاهی تنظیم کنید.
در برخورد با کوئری‌های رسانه‌ای نکات زیادی وجود دارد که باید رعایت شود، اما MDN Web Docs دستورالعمل‌های بسیار دقیقی در این زمینه دارد [لینک به MDN Web Docs در اینجا قرار نگرفته است].
پس از انجام تمام این مراحل، با مشاهده وب‌سایت خود در دستگاه‌های مختلف، بررسی کنید که چقدر خوب کار می‌کند.
2- کل وب‌سایت خود را برای نمایش روی موبایل بهینه کنید.
قدم اول چارچوب فنی‌ای را پوشش داد که باعث می‌شود وب‌سایت شما به خوبی روی دستگاه‌های موبایل قرار بگیرد. خبر خوب این است که این سخت‌ترین بخش بود. فقط چند قدم دیگر باقی مانده است.
با یک طراحی واکنش‌گرا، سایت شما تقریباً به طور کامل برای موبایل بهینه شده است. برای تکمیل کار به چه چیز دیگری نیاز دارید؟
در مرحله بعد، زمان آن است که:
- از متن‌های بزرگ و به راحتی قابل خواندن استفاده کنید. عناوین و زیرعناوین باید به خصوص جلب‌توجه کننده باشند.
- عناصر تعاملی خود (مانند دکمه‌ها و کادرهای تأیید) را به اندازه‌ای بزرگ کنید که برجسته باشند.
- از پاراگراف‌های بلند خودداری کنید. پاراگراف‌های کوتاه همیشه بهتر هستند.
- با سخاوت از فضای منفی استفاده کنید. این کار از شلوغ به نظر رسیدن سایت شما جلوگیری می‌کند.
- در اطراف لینک‌ها و سایر عناصر تعاملی کمی فضا بگذارید. به این ترتیب، کاربران به طور تصادفی چیزی را که نمی‌خواهند فشار نمی‌دهند.
3-مسدود نکردن محتوای خود را با پاپ‌آپز مسدود نکنید:
پاپ‌آپ‌ها باعث می‌شوند بازدیدکنندة شما به سختی به اطلاعاتی که به دنبال آن آمده است، دست پیدا کند و در نتیجه نرخ پرش (bounce rate) بالایی را به دنبال دارند، به عبارت دیگر، افراد به محض ورود به سایت شما آن را ترک می‌کنند.
با این حال، برخی از انواع پاپ‌آپ‌ها بسیار مهم هستند. اکثر وب‌سایت‌ها نیاز به استفاده از کوکی‌ها دارند و وب‌سایت شما نیز احتمالاً از این قاعده مستثنی نیست. همچنین GDPR اجازه دادن به کاربران برای استفاده از داده‌هایشان را الزامی کرده است، بنابراین نمی‌توانید از استفاده از پاپ‌آپ برای این کار اجتناب کنید.
با این حال، کاربران شما برای دیدن پاپ‌آپ‌ها به سایت شما سر نمی‌زنند. هنگامی که کل صفحه با درخواست پذیرش استفاده از کوکی‌ها مسدود می‌شود، بازدیدکنندگان ممکن است تمایل نداشته باشند خودشان را جای شما بگذارند. برعکس، این کار به طور قطع باعث آزار آنها می‌شود و حتی ممکن است بدون اینکه اصلاً در سایت شما مرور کنند، آن را ترک کنند.
راه‌حل جایگزین چیست؟
کاربران نسبت به پاپ‌آپ‌هایی که فقط بخش کوچکی از صفحه را می‌پوشانند، تحمل بیشتری نشان می‌دهند و اگر بستن و رد کردن آنها آسان باشد، حتی بهتر است.
4-ایرادات فنی وب‌سایت خود را برطرف کنید:
کوچک‌ترین مانند ارورهای آزاردهنده ۴۰۴، روی یک صفحه‌نمایش کوچک به راحتی قابل مشاهده است. در حالی که یک صفحه ۴۰۴ با یک طراحی حرفه‌ای می‌تواند به خوبی کار کند، اما همچنان یک خطا است؛ این موضوع تجربه کاربری را مختل می‌کند. بهتر است این عامل را به طور کامل از بین ببرید.
نحوه بررسی خطاهای فنی وب‌سایت.
چه خطاهای دیگری می‌توانند روز یک کاربر موبایل را خراب کنند؟ چند مورد از آنها عبارت‌اند از:
- لینک‌های شکسته
- تصاویر شکسته
- هدایت‌های ناخواسته به صفحات دیگر
- خطاهای CSS و جاوا اسکریپت
- مشکلات سرور (به عنوان مثال، تایم اوت دروازه)
اگر کاری انجام ندهید، همه این موارد باعث خروج کاربر از سایت شما می‌شوند.
برای شروع، تمام خطاهای فنی سایت خود را پیدا کنید. برای ایجاد گزارش، آن را با ابزار Technical Audit وب سئو اسکن کنید [لینک به وب سئو در اینجا قرار نگرفته است].
عکس
تمام خطاهای وب‌سایت را که پیدا می‌کنید، به سرعت برطرف کنید.
اجازه ندهید کدهایی مانند «وضعیت: ۵۰۳» شما را گیج کنند – در اینجا چند نکته تخصصی برای حل آنها آورده شده است [لینک به نکات تخصصی در اینجا قرار نگرفته است].
پس از آن، اسکن منظم سایت خود را به یک عادت تبدیل کنید (یک بار در هفته کافی است) و به موقع به رفع خطاها بپردازید.
5-سرعت بارگذاری سایت خود را بالا ببرید.
وارد سایت خود می‌شوید و بارگذاری آن زمان زیادی می‌برد. اوه نه! اینترنت قطع است؟ نه؟ متأسفانه، اکنون ممکن است کاربر شما تصمیم بگیرد که وب‌سایت شما هرگز کار نمی‌کند و دیگر باز نگردد؛ بنابراین، مهم است که هر کاری از دستتان برمی‌آید انجام دهید تا مطمئن شوید سایت شما در همه حال به سرعت بارگذاری می‌شود.
چگونه سرعت بارگذاری وب‌سایت خود را افزایش دهیم.
این شش نکته را برای افزایش سرعت بارگذاری وب‌سایت خود دنبال کنید:
- تصاویر خود را بهینه کنید. با تنظیم ارتفاع و عرض آنها، ذخیره آنها با فرمت مناسب و فشرده سازی آنها، اندازه فایل آنها را به حداقل برسانید.
- فشرده‌سازی را فعال کنید (اگر هنوز فعال نشده است). فشرده‌سازی GZIP یکی از محبوب‌ترین روش‌ها است.
- از کش مرورگر استفاده کنید. فایل .htaccess دامنه خود را پیدا کنید و زمان انقضای عناصر صفحه خود را تنظیم کنید.
- از بارگذاری تنبل (lazy loading) استفاده کنید. مانند فشرده‌سازی، این ویژگی اغلب از قبل فعال است. اگر آن را ندارید، می‌توانید ویژگی loading=”lazy” را در تگ‌های HTML عناصری که می‌خواهید با بارگذاری تنبل لود شوند، وارد کنید. یا فقط از افزونه‌ای مانند Smush استفاده کنید.
- کد صفحات خود را بهینه کنید. اگر دانش کافی از HTML، جاوا اسکریپت و سایر زبان‌های تشکیل دهنده سایت خود دارید، می‌توانید کد را اصلاح کنید. مراقب باشید چیزی را خراب نکنید.
- در صورت امکان، عناصر را ادغام کنید. برای مثال، اگر دو تصویر درست کنار هم دارید، ادغام آنها در یک تصویر واحد به بارگذاری سریع‌تر صفحه کمک می‌کند.
سرعت بارگذاری فعلی خود را با ابزار Speed Optimization وب سئو بررسی کنید. این ابزار مشکلات مربوط به سرعت را که در حال حاضر شما را آزار می‌دهند، مشخص می‌کند.
6-وب‌سایت خود را برای جستجوی محلی و صوتی بهینه کنید.
حمل کردن گوشی‌های هوشمند در اطراف آسان است، آنها را به ابزاری عالی برای مرور آنلاین در خیابان‌ها تبدیل می‌کند.
آیا کاربر نیاز دارد چیزی را در نزدیکی خود پیدا کند؟ رسیدن به هدف آنها تنها یک سؤال فاصله دارد.
از آنجایی که سؤال احتمالاً کلمه “کجا” را در بر خواهد داشت، وب‌سایت شما باید برای آن آماده باشد. این کار از طریق بهینه‌سازی برای جستجوی محلی انجام می‌شود – و در کنار سئوی موبایل، به طور شگفت‌انگیزی برای جستجوی صوتی هم به طور هم‌زمان مؤثر می‌شود!
فقط این کارها را انجام دهید:
- از کلمات کلیدی و عبارات مبتنی بر مکان در محتوای خود استفاده کنید. آنها معمولاً حاوی کلماتی مانند “کجا”، “نزدیک‌ترین”، “نزدیک”، “اطراف من”، یا “در [نام مکان شما] ” هستند. برای مثال: کارواش نزدیک من.
- یک صفحه پرسش و پاسخ در سایت خود داشته باشید. پاسخ‌های خود را مختصر و مستقیم ارائه دهید.
- نام، آدرس و شماره تلفن کسب و کار خود را در صفحه اصلی وب‌سایت خود قرار دهید. بهتر است آنها را در فوتر قرار دهید.
- لیستی در Google Business Profile ایجاد کنید و آن را با تا حد امکان اطلاعات پر کنید. این کار برای نمایش در نقشه‌های گوگل ضروری است [لینک به Google Business Profile در اینجا قرار نگرفته است].
- نظرات مثبت مشتریان را جمع‌آوری کنید – هر چه بیشتر، بهتر.
7-اولین اسکرول خود را کارآمد کنید.
در حالت ایده‌آل، شما باید بتوانید بازدیدکننده را به محض مشاهده وب‌سایت خود مجذوب کنید. اما آنها در یک صفحه‌نمایش کوچک فقط می‌توانند چیزهای کمی را ببینند. پس چه کار می‌کنی؟
بخش “بالای صفحه” وب‌سایتتان (آنچه کاربران در اولین اسکرول می‌بینند) باید کاملاً ایده‌آل باشد.
چه مواردی را حتماً باید در آنجا قرار دهید؟
- عنوان توصیفی و چشم نواز
- منوی ناوبری
- نوار جستجو
- فراخوان به عمل (Call to Action)
اما این‌ها فقط اصول اولیه هستند.
در اینجا چند ایده در سطح تخصصی آورده شده است:
- یک عنصر تعاملی (مانند یک عکس پانوراما، یک مدل سه بعدی یا یک بازی ساده). حتی یک ویدئوی معمولی هم کار می‌کند.
- یک CTA شناور که بدون توجه به اینکه چقدر اسکرول می‌کنید، همیشه روی صفحه باقی می‌ماند.
8-نتایج جستجوی خود را جذاب کنید.
همان‌طور که گفته می‌شود، بهترین مکان برای پنهان کردن رازها، صفحه دوم گوگل است. با این حال، این موضوع فقط در مورد نسخه دسکتاپ صادق است. گوگل موبایل با اسکرول بی پایان همراه است، که به جای ۱۰ نتیجه، ۴۰ نتیجه برتر را قبل از اینکه دکمه “مشاهده بیشتر” را پیدا کنید، نمایش می‌دهد.
با این حال، در بین ۱۰ نتیجه برتر باشید یا نه اگر نتایج جستجوی شما برجسته نباشند، هرگز روی آنها کلیک نخواهد شد و درست مانند هر چیز دیگری، شما باید به خوبی برجسته شوید. چگونه این اصل را در نتایج جستجوی خود اعمال می‌کنید؟
چگونه نتایج جستجوی خود را برجسته کنیم
سه روش عالی برای جذاب‌تر کردن نتایج جستجو برای بازدیدکننده آینده شما وجود دارد:
- استفاده از بهترین کلمات کلیدی. نه فقط از نظر حجم جستجو – از کلمات کلیدی استفاده کنید که بهتر از دیگران نیاز کاربران را درک کنند. برای فهمیدن کدام کلمات کلیدی این هستند، باید خود را به جای کاربران بگذارید. یا فقط از کاربرانی که درباره ترجیحات جستجوی خود اطلاعات دارید، بپرسید.
- از عناوین و توضیحات جذاب استفاده کنید. کلمات کلیدی یک ماده اولیه اصلی هستند؛ ماده اولیه دیگر کلمات قدرتمندی است که احساسات کاربران را برمی‌انگیزد. آیا می‌دانید کدام احساسات برای محتوای شما مناسب هستند؟
- داده‌های ساختاریافته اضافه کنید. عناصر صفحه خود را علامت‌گذاری کنید تا اسنیپت‌های غنی بسیار قابل کلیک ایجاد کنید.
سال‌ها پیش، گوگل متوجه پتانسیل دستگاه‌های موبایل شد – و همان‌طور که مشخص شد، کاملاً درست فکر می‌کردند. این غول جستجو به طور گسترده‌ای روی سازگاری با موبایل سرمایه‌گذاری کرد و هیچ شکی وجود ندارد: این موضوع اینترنت را بسیار بهتر کرده است. محتوای آنلاین برای چشم‌ها بسیار آسان‌تر و استفاده از آن ساده‌تر شده است.
اما آیا سایت شما با این استاندارد طلایی مطابقت دارد؟ آیا کاربران شما در تمام دستگاه‌های خود تجربه عالی مشابهی را کسب می‌کنند؟
امروز با یک وب‌سایت واکنش‌گرا، شروع به افزایش رتبه جستجو و تعامل کاربر کنید!
منبع: https://www.searchenginejournal.com/mobile-seo-optimize-for-your-devices-webceo-spcs/476510/
