سئوی موبایل: چگونه سایت خود را برای هر دستگاهی بهینه کنیم…؟

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

داشتن یک طرح پاسخگو و طراحی مناسب برای موبایل سایت شمارا فوق العاده جذاب تر می کند.

متأسفانه، سازگاری با رایانه شخصی به طور خودکار باعث نمی‌شود که یک وب‌سایت برای موبایل نیز سازگار باشد. و به دلیل ایندکس موبایل اول گوگل، اگر سایت شما برای موبایل مناسب نباشد، ممکن است هرگز نور صفحه 1 از صفحات نتایج موتور جستجو (SERP) را نبیند. پس اگرسعی در باز کردن آن در گوشی هستید با مشکل مواجه خواهید شد زیرا آن وب سایت عملاً در تلفن همراه غیرقابل استفاده است راه حل این مسئله چیست؟ اولین قدم مهم در ساخت سایت برای موبایل، کار بر روی طراحی واکنش گرا است. زمانی که سایتی ریسپانسیو باشد، به درستی روی صفحه نمایش در هر اندازه نمایش داده می شود.

چگونه یک طراحی برای موبایل را در وب سایت خود ایجاد کنیم ؟

دو راه برای ارتقاء وب سایت شما به یک تجربه موبایل پسند وجود دارد و سریع ترین راه این است که:

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

برای تبدیل و سایت دسکتاپ خود به یک وب‌سایت پاسخگو و سازگار با موبایل، باید موارد زیر را وارد کنید:

یک دریچه دید
تصاویر واکنش گرا
یک طرح سیال داستان های رسانه.

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

نحوه تنظیم Viewport در وب سایت.

Viewports به هر مرورگر کمک می کند تا بداند چگونه ابعاد صفحه وب شما را با صفحه خود تطبیق دهد. اگر یک Viewport به HTML وب سایت خود اضافه کنید، صفحات وب شما به طور خودکار با هر دستگاه تلفن همراه سازگار می شوند. این را اضافه کنید: برای تنظیم نمای در یک صفحه، این خط کد HTML را در تگ <head> آن اضافه کنید: <meta name="viewport" content="width=device-width, initial-scale=1">

چگونه تصاویر را واکنش گرا کنیم؟

مهمترین مسئله دراین رابطه .مجبور نبودن مخاطب برای پیمایش به چپ وراست درهنگام بازدید از وب سایت شماست که شامل همه تصاویر، به خصوص اینفوگرافیک ها نیز میشود. ریسپانسیو باید به طور خودکار کوچک وبزرگ شوند تا کاملاً با عرض صفحه نمایش هر بازدیدکننده مطابقت داشته باشند. بنابراین، شما باید از ویژگی max-width استفاده کنید.

چگونه حداکثر عرض را اضافه کنیم تا تصاویر خود را پاسخگو نشان دهیم؟

شیوه نامه سایت خود (فایل CSS) را باز کنید. "max-width: 100%" را برای تگ <img> اضافه کنید، مانند این: img { حداکثر عرض: 100%؛ } حال اگر عریض‌تر از تصویری باشد که در مرحله بالا اضافه کرده‌اید، به‌طور خودکار کوچک می‌شوند تا با فضای موجود متناسب شوند.

نحوه نصب طرح بندی سیال..

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

فلکس باکس.
چند رنگ توری. در صورت لزوم از آنها استفاده کنید. زمان استفاده از Flexbox

زمانی که تعدادی آیتم با اندازه های متفاوت دارید و می خواهید آنها را در یک ردیف قرار دهید از این روش استفاده کنید. ویژگی “display: flex” را به تگ HTML خود اضافه کنید، مانند این مثال: .موارد { صفحه نمایش: انعطاف پذیر; }

استفاده از Multicol این روش محتوای شما را به ستون هایی تقسیم می کند. از خاصیت column-count مانند زیر استفاده می کند: ظرف { تعداد ستون: 3; } در این مثال سه ستون دریافت می کنید.

زمان استفاده از Grid همانطور که از نام آن پیداست، این روش یک شبکه برای قرار دادن عناصر شما در داخل ایجاد می کند.به طور مثال: ظرف { صفحه نمایش: شبکه شبکه-الگو-ستون: 1fr 1fr 1fr; }

ویژگی grid-template-columns تعداد مسیرهای ستون (در این مثال سه عدد) و اندازه آنها (1 fr) را تنظیم می کند. هنوز مطمئن نیستید که از کدام استفاده کنید؟ پلاگین ها می توانند به طور خودکار بهترین چیدمان سیال را شناسایی و پیاده سازی کنند.

نحوه ی اضافه کردن پرسش های رسانه ای به وب سایت...

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

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

1. وب سایت کامل خود را در موبایل خوب جلوه دهید. مرحله اول چارچوب فنی را پوشش می دهد که باعث می شود وب سایت شما به خوبی بر روی دستگاه های تلفن همراه جا بیفتد.

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

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

2. محتوای خود را با پنجره های بازشو مسدود نکنید.

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

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

3. خطاهای فنی وب سایت خود را برطرف کنید.

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

کشف خطاهای فنی وب سایت خود ؟

لینک های خراب
تصاویر شکسته
تغییر مسیرهای ناخواسته صفحه CSS و جاوا اسکریپت معیوب.
مشکلات سرور (مثلاً مهلت زمانی دروازه).

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

تمام خطاهای وب سایتی را که پیدا می کنید در سریع ترین زمان ممکن برطرف کنید. اجازه ندهید کدهایی مانند "وضعیت: 503" شما را گیج کنند - پس از آن، اسکن سایت خود را به طور منظم عادت دهید ( مثلا هفته ای یک بار )، و به موقع خطاها را بررسی کنید.

در این قسمت به چند نکته تخصصی برای مقابله با آنها پرداخته شده است.

4. سرعت بارگیری سایت را افزایش دهید.

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

شش نکته برای بارگزاری سریع وب سایت:

بهینه سازی تصاویرو به حداقل رساندن اندازه فایل آنها با تغییر ارتفاع و عرض .
ذخیره و فشرده سازی در قالب مناسب ..
فشرده سازی GZIP یکی از محبوب ترین روش ها است.
از کش مرورگر استفاده کنید. فایل htaccess. دامنه را پیدا کرده و زمان انقضا را برای عناصر صفحه خود تنظیم کنید.
از بارگذاری تنبل استفاده کنید. مانند فشرده سازی، که اغلب از قبل فعال است.
می‌توانید ویژگی loading=”lazy” را در تگ‌های HTML عناصری که می‌خواهید lazy load کنید، وارد کنید.

یا فقط از افزونه ای مانند Smush استفاده کنید.
کد صفحات خود را بهینه کنید البته مشروط براینکه دانش کافی از HTML، جاوا اسکریپت و سایر زبان‌هایی که سایت شما را تشکیل می‌دهند، داشته باشید.
ادغام عناصر در یک تصویر به بارگذاری سریعتر صفحه کمک می کند. به عنوان مثال، اگر دو تصویر درست در کنار یکدیگر دارید، ادغام آنها در یک تصویر توصیه می شود.
سرعت بارگذاری فعلی خود را با ابزار WebCEO's Speed Optimization بررسی کنید.

5. وب سایت خود را برای جستجوی محلی و صوتی بهینه کنید.

حمل و نقل آسان تلفن های هوشمند آنها را به ابزاری عالی برای مرور آنلاین در خیابان ها تبدیل کرده است. توجه داشته باشید که خواسته ی کاربر باهدف آنها در حد یک سوال فاصله دارد آیا کاربر باید چیزی در این نزدیکی پیدا کند؟ و از آنجایی که سوال احتمالاً حاوی کلمه "where" خواهد بود، وب سایت شما باید برای آن آماده باشد. این کار از طریق بهینه‌سازی برای جستجوی محلی انجام می‌شود – و در ترکیب با سئوی موبایل، به طور شگفت‌انگیزی برای جستجوی صوتی در همان زمان موثر می‌شود!

مواردی که باید انجام شود:

از کلمات و عبارات کلیدی مبتنی بر مکان در محتوای خود استفاده کنید. آنها معمولاً حاوی کلماتی مانند: کجا، نزدیکترین، نزدیک به من یا در "نام مکان شما" هستند. به عنوان مثال: کارواش نزدیک من.
یک صفحه پرسش و پاسخ در سایت خود داشته باشید. پاسخ های خود را مختصر و مستقیم به اصل مطلب بگویید.
بهتر است نام، آدرس و شماره تلفن کسب و کار خود را در صفحه اصلی وب سایت و در فوتر قرار دهید.
فهرستی در نمایه کسب و کار Google ایجاد کنید و تا آنجا که می توانید آن را با اطلاعات تکمیل کنید.
اگر می خواهید در Google Maps ظاهر شوید،مهم است که نظرات مثبت مشتریان را هرچه بیشترجمع آوری کنید -

6. اولین اسکرول خود را کارآمد کنید.

در حالت ایده آل، کاربران به محض دیدن وب سایت ،باید مجذوب وب سایت شما شوند درحالیکه اما آنها فقط می توانند یک صفحه نمایش کوچک را مشاهده کنند. بنابراین، چه باید کرد؟باید سایت شما "بالای تا" (آنچه کاربران در اولین اسکرول می بینند) یک ناک اوت کامل باشد. چیزهایی که باید در آنجا قرار دهید...؟

عنوان توصیفی و چشم نواز.
منوی ناوبری.
نوار جستجو فراخوانی برای اقدام.

اما اینها فقط اصول اولیه هستند. در اینجا چند ایده تخصصی تر وجود دارد:

یک عنصر تعاملی (مانند یک عکس پانوراما، یک مدل سه بعدی یا یک بازی ساده). حتی یک ویدیوی معمولی هم کار می کند.
یک CTA شناور که همیشه روی صفحه می ماند، مهم نیست چقدر فاصله دارد.

7. نتایج جستجوی خود را جذاب کنید.

به قول معروف بهترین مکان برای پنهان کردن اسرار صفحه 2 گوگل است. با این حال، این فقط برای نسخه دسکتاپ صادق است. تلفن همراه Google با اسکرول بی نهایت ارائه می شود که قبل از پیدا کردن دکمه «بیشتر»، به جای 10 نتیجه، 40 نتیجه برتر را ارائه می دهد. با این حال، 10 مورد برتر یا نه، اگر نتایج جستجوی شما برجسته نباشد، هیچ کلیکی دریافت نمی کنند.

چگونه نتایج جستجوی خود را متمایز کنید؟.چند راه عالی برای هیجان انگیزتر کردن نتایج جستجو برای بازدیدکنندگان :

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

غول جست‌وجو ی گوگل سرمایه‌گذاری زیادی روی سازگاری با موبایل انجام داده است، و شکی نیست که : اینترنت برای آن بهتر است. استفاده ازمحتوای آنلاین آسان تر شده است.

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

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