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

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

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

اگرسعی کرده اید آن را در گوشی هوشمند باز کنید پس با مشکل بزرگی مواجه هستید. آن وب سایت عملاً در تلفن همراه غیرقابل استفاده است. متأسفانه، سازگاری با رایانه شخصی به طور خودکار باعث نمی‌شود که یک وب‌سایت برای موبایل نیز سازگار باشد. و به دلیل ایندکس موبایل اول گوگل، اگر سایت شما برای موبایل مناسب نباشد، ممکن است هرگز نور صفحه 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 مورد برتر یا نه، اگر نتایج جستجوی شما برجسته نباشد، هیچ کلیکی دریافت نمی کنند. و درست مانند هر چیز دیگری، شما باید به خوبی متمایز شوید. چگونه این اصل را در نتایج جستجوی خود اعمال می کنید؟

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

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

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

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