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

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

 اگر در مرحلۀ طراحی وب سایت جدید و یا راه اندازی کسب و کار آنلاین از پایه هستید، تا پایان این مقاله همراه ما باشید. در مطلب قبلی با عنوان سئو و سرعت وبسایت در موبایل، اشاره ای به محبوب تر شدن موبایل نسبت به دسکتاپ و تبلت داشتیم. به یاد داشته باشید، درصد وبگردی ها از طریق دستگاه های موبایل بیش از 55.5% از کل Web Surfing را تشکیل میدهد. در صورتی که این آمار برای دسکتاپ حدود 42% و برای تبلت ها نزدیک به 2.5% میباشد. پس طبیعیست برای هدف قراردادن تکۀ بزرگتر کیک، اولویت را به سئو موبایل داد. از این رو به توضیح اصطلاح Mobile-first” Design” یا اولویت طراحی برای موبایل خواهیم پرداخت.

انطباق پذیری با نمایشگر موبایل – حیاتی برای سئو موبایل

اولین مورد برای رعایت اصول سئو و طراحی وب سای موبایل، انطباق پذیری محتوا با اندازه نمایشگر موبایل است. این مورد بیشتر مرتبط با لایه بندیهای وب سایت است و عموما برای محتواهای بصری غیر متنی صدق میکند. اما محتوای متنی نیز از این قاعده مستثنی نیست. برای مثال اشاره به ابزار “Inspect URL” در GSC یا همان Google Search Console خواهم داشت. با بکارگیری این ابزار و با بررسی هر کدام از صفحات وب سایت خود، میتوانید متوجه ایرادات سئو موبایل در سایز استاندارد نمایشگرهای موبایل شوید.

ایرادات رایج

خطاهایی مانند: “Clickable Elements Too Close Together” به معنی نزدیکی بیش از حد المنت های قابل کلیک کردن. و یا “Content Wider Than Screen” به معنی محتوای پهن تر از صفحه. این دو از جمله شایع ترین خطاهای مربوط به سئو وب سایت در موبایل هستند.

برخی از این ایرادات از سوی مدیر وب سایت است که با ویرایش محتوا و یا حذف آن رفع میشوند. اما سایر ایرادات مانند کافی نبود فضای بالشتک (Padding) درمنو و زیرمنوهای اصلی صفحه، نکاتی مربوط به طراح هستند. البته اکثر این موارد در CMS های با قالب پیشفرض، قابل ویرایش و تغییر هستند. اما با مواردی برخورد داشته ام که یک تغییر کوچک در تنظیمات سورس کدهای فرانت-اند تمام چیدمان وب پیج را به هم ریخته.

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

مینیمالیسم برای سئو موبایل در طراحی سایت

اصل بعدی سئو موبایل در طراحی سایت، مینیمایز کردن عواملیست که سرعت وب سایت را برای نمایش در موبایل کاهش میدهند. به عنوان نمونه، نمایش تصاویر به صورت اسلاید خودکار یا پخش ویدیو به عنوان پس زمینه عمدتا نیاز به پیاده سازی کدهای جاوا (JavaScript) و CSS (Cascading Style Sheets) دارند.

استفاده از کدهای سی اس اس و جاوا، حجم صفحات شما را افزایش میدهد. درنتیجه باعث کند شدن سرعت بارگذاری و رندر صفحات وب سایت میشوند. این افزایش حجم و کندی را شاید بتوان تا حدی در طراحی وب سایت با اولویت برای صفحات نمایشگر بزرگ پذیرفت. اما راجع به طراحی وبسایت برای موبایل چطور؟ آیا جلوه بصری انیمیشن ها در نمایشگرهای 4 الی 7 اینچی همسان با یک نمایشگر 17 اینچی است؟ یا جزئیات مربوط با اسلایدشوهای نمایش داده شده در یک اسکرین 6 اینچی خواناست؟

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

استفاده از ابزار و تکنولوژی مناسب

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

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

به این نکته دقت داشته باشید که آیا تکنولوژی که از آن استفاده میکنید قابل نمایش در انواع رایج سیستم عامل های موبایل هست یا خیر. برای مثال، سیستم عامل iOS قادر به رندر کردن فلش (Flash) نیست. پس با استفاده از فلش محتوای خود را از دید کاربران آیفون که کم هم نیستند، خارج میسازید.

فرمت مناسب، سایز مناسب

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

در رابطه با بهبود فرمت محتوا، میتوان به عنوان مثال از وب سایت Hubspot نام برد. استفاده از فرمت SVG به جای PNG و یا حتی JPEG میتواند حجم تصاویر را تا حد زیادی کاهش دهد. البته استفاده از این فرمت شاید برای هر نوع کسب و کاری ممکن نباشد. استفاده از ابزارهای فشرده ساز و کاهش سایز عکس که به وفور یافت میشوند، راه دیگری برای کاهش حجم عکس هاست. TinyPNG یکی از همین ابزارهای تحت وب است.

فونت مناسب، سایز مناسب، رنگ مناسب

اگر توضیحات متن خوانا نباشد و یا قیمت محصول شما در کل عرض صفحه موبایل کشیده شود، احتمالا بازدیدکنندۀ وب سایت تحت تاثیر قرار نخواهد گرفت. اگر از سایز بسیار بزرگ قلم برای نمایش وب سایت در موبایل استفاده کنید، کاربر هر 1 تا 2 ثانیه یکبار نیاز به اسکرول کردن صفحه خواهد داشت و کلافه خواهد شد.

تناسب اندازه قلم میان سرتیترها و فونت مورد استفاده شده در وب سایت شما نیز تاثیرگذار است. و خوب، استفاده از رنگ مناسب پس زمینه و قلم هم چیزی مختص به موبایل نیست اما در مبحث سئو و طراحی وب سایت موبایل میگنجد.

استفاده از امکانات منحصر بفرد موبایل

قرار دادن دکمه تماس آنی در قسمت مناسبی از صفحات نسخه موبایل شما باعث افزایش تعامل و افزایش نرخ تبدیل بازدیدکننده به مشتری میشود. و اگر زمینه کسب و کار شما میتواند از دوربین در وب سایت بهره ببرد، استفاده از AR (Augmented Reality) و VR (Virtual Reality) را در دستور کار قرار دهید. بسته به نوع کسب و کار شما و بسته به میزان بلند پروازی شما در ارتقاء رتبۀ سئو موبایل در طراحی سایت، میتوانید تمام ماژول های دستگاه های موبایل را طی چرخۀ طراحی وب سایت مرور کنید.

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

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

:منابع

https://support.google.com/webmasters#topic=9128571

https://www.invisionapp.com/inside-design/mobile-first-design/

https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/

https://www.webdesignerdepot.com/2020/12/how-to-prioritize-speed-with-a-mobile-first-design/

https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00

https://www.webdesignerdepot.com/2021/07/https-www-searchenginejournal-com-seo-guide-brand-building-strategy/#responsive

 
Summary
سئو موبایل و طراحی سایت
Article Name
سئو موبایل و طراحی سایت
Description
📱 سئو موبایل و اولویت دادن به طراحی وبسایت برای موبایل از جمله فاکتورهاییست که با رعایت آن پیش از مراحل مقدماتی ساختن سایت، میتوان بازار هدف را گسترش داد.
Author
Publisher Name
Still SEO Institute
Publisher Logo

اشتراک گذاری:

Share on facebook
Share on google
Share on twitter
Share on email
Share on linkedin
Share on whatsapp
Share on telegram
Share on reddit
Share on skype

دیدگاه‌ خود را بنویسید

Your email address will not be published.

رنگ کلاه در سئو
مبانی سئو

رنگ کلاه در سئو

رنگ کلاه در سئو و همچنین دیگر مقوله های سایبری را شاید بتوان استعاره ای از استراتژی و مرزبندی اخلاق حرفه ای یک فرد مشرف

 
متن کامل >
تکنیک سئو 2021
آموزش پیشرفته

6 تکنیک سئو در 2021

همانطور که در گذر زمان موتورهای جستجو الگوریتم های خود را به روز رسانی میکنند، تکنیک های کسب رتبه بالاتر در SERP یا Search Engine

 
متن کامل >
سئو چیست
مبانی سئو

سئو چیست

در جواب این سوال که تعریف سئو چیست و متخصص سئو کیست، کلمه سئو که برگرفته از مخفف SEO است معادل Search Engine Optimization بوده

 
متن کامل >