14 بهترین روش های بهینه سازی موبایل که باید بدانید
برای دستیابی به بهترین پیاده سازی تلفن همراه، اطمینان حاصل کنید که یک سایت موبایلی ایجاد می کنید که با این 14 بهترین روش مطابقت دارد.
مدتی است که گوگل شروع به انتشار فهرست اول موبایل خود کرده است.
هنگامی که این برای اولین بار اعلام شد، متخصصان سئو در همه جا هجوم آوردند تا اطمینان حاصل کنند که سایت آنها با اصول اساسی وب Google و بهترین دستورالعمل های توسعه موبایل مطابقت دارد.
بهینه سازی برای وب موبایل یک زیر زمینه کاملاً جامع در سئو است که برای موفقیت به دانش سطح متخصص و بهترین شیوه های خاص خود نیاز دارد.
به حدی که بسیاری از صنایع به پیاده سازی کامل و با کیفیت وب سایت خود در موبایل نیاز دارند. و همه اندازه گیری نمی کنند.
در بسیاری از موارد، گاهی اوقات اکثر سایت ها در تحقق هدف خود برای سازگاری کوتاهی می کنند.
واضح است که این یک اشتباه است زیرا طراحی موبایل بخش رایجی از جامعه دیجیتال ما است:
96 درصد از آمریکایی های 18 تا 29 ساله گوشی هوشمند دارند.
تا سال 2020، بیش از 3.6 میلیارد کاربر در سراسر جهان از یک دستگاه تلفن هوشمند استفاده می کردند. تا سال 2023 به 4.3 میلیارد خواهد رسید.
در سال 2020، کاربران تلفن همراه در مقایسه با مرورگرهای تلفن همراه، 90 درصد از زمان خود را در برنامه ها صرف کردند.
گوگل 93.22 درصد از سهم بازار جستجوی موبایل در ایالات متحده را در سال 2021 به خود اختصاص داده است.
نتایج جستجوی اولیه تلفن همراه در Google به 26.9٪ CTR ارگانیک (نرخ کلیک) دست می یابد.
برای استفاده از بهترین حضور آنلاین ممکن، باید برای انواع مختلف دستگاه ها و وضوح صفحه نمایش بهینه سازی کنید. نه فقط برای دسکتاپ.
و اکنون، گوگل به‌روزرسانی تجربه صفحه دسکتاپ خود را ارائه می‌کند. اما این به روز رسانی فراتر از محدوده این مقاله است، اگرچه به طور کلی در تجربه صفحه نقش دارد.
برای دستیابی به بهترین پیاده‌سازی موبایلی، مهم است که مطمئن شوید یک سایت موبایلی ایجاد می‌کنید که با این بهترین شیوه‌ها مطابقت دارد، و همچنین فرصت‌هایی برای افزایش تعداد Core Web Vitals شما ایجاد می‌کند.
با استفاده از طراحی ریسپانسیو و نه زیردامنه m-dot، رعایت بهترین روش‌ها با ایجاد و بهینه‌سازی تصویر، و مشاهده فشرده‌سازی و کوچک‌سازی، می‌توانید به یک سایت موبایلی باکیفیت دست پیدا کنید که تا حد امکان به افراد زیادی در بین مخاطبان خود دسترسی پیدا کند.
این جایی است که سایت موبایل شما موفق خواهد شد.
1. مطمئن شوید که همه محتوا در دسکتاپ و موبایل یکسان است
ایده پشت این بهترین عمل، اجتناب از محتوای تکراری و اتهامات پنهان کاری است.
برای ایمن بودن، همیشه مطمئن شوید که تمام محتوا در نسخه دسکتاپ سایت شما به همان اندازه که در موبایل است، یکسان باشد.
یکی از بهترین تکنیک ها برای اطمینان از این اتفاق طراحی واکنش گرا است.
طراحی واکنشگرا، برای کسانی که نمی دانند، شامل ایجاد یک شیوه نامه است که از «پرس و جوهای رسانه ای» برای انتقال خودکار طرح ها بین طیف گسترده ای از پلتفرم ها و دستگاه ها استفاده می کند.
اگر می‌خواهید تمام سرعت ممکن را کاهش دهید و طراحی خود را ساده و ساده کنید، برای کاهش درخواست‌های سمت سرور به دنبال CSS sprites باشید.
2. Above The Fold Isn’t Gone Entirely
مهم است که به یاد داشته باشید که در یک محیط تلفن همراه، که در آن چیزها بی انتها پیمایش می کنند، بالای تاشو کاملاً از بین نمی رود.
همچنان ترجیح داده می شود که حداقل مقداری از محتوای متن در بالای صفحه روی یک طرح موبایل وجود داشته باشد تا به کسی نشان دهد که دلیلی برای پیمایش وجود دارد.
مزایا و تمایلات روانشناختی تمایل به دیدن آنچه ارائه می‌دهید به طور کامل از بین نرفته‌اند، بنابراین هنوز باید برای این کار در بسیاری از دستگاه‌های تلفن همراه مختلف تا حدودی بهینه‌سازی کنید.
3. از یک رویکرد توسعه از بالا به پایین استفاده کنید
رویکرد توسعه "از بالا به پایین" به این معنی است که شما تمام پیامدهای بالقوه هر تصمیم اتخاذ شده در یک طراحی را از ابتدا تا انتها در نظر بگیرید.
شما ابتدا برای موبایل توسعه می دهید، نه برای دسکتاپ، و سپس به طراحی موبایل می پردازید. این رویکرد توسعه ایده آل است زیرا شما مسائلی را در طراحی نهایی وارد نمی کنید.
یک مثال در اینجا آمده است: شما یک وب سایت دسکتاپ ایجاد می کنید. در حدود سه چهارم راه، تصمیم می گیرید که می خواهید یک سایت موبایل در بالای آن ایجاد کنید.
شما ماکت را ایجاد می کنید. اما، پس از کدنویسی ماکت و حرکت در طول انتقال، یک اشکال در اینجا پیدا می کنید. و شما یک اشکال را در آنجا پیدا می کنید. سپس یک اشکال را در آنجا پیدا می کنید. این به این دلیل است که رویکرد پایین به بالا کار نمی کند و باعث خزش دامنه می شود.
این پدیده ای است که در آن مسائل غیرقابل مشاهده در آخرین لحظه ظاهر می شود و باعث ایجاد اشکالات پیش بینی نشده و افزایش ساعاتی می شود که در ابتدا در زمان اجرای پروژه در نظر گرفته نشده بود.
حقیقت این است که اگر رویکرد از بالا به پایین برای طراحی پاسخگوی تلفن همراه مستقیماً از ابتدا در نظر گرفته می شد، این اشکالات و مواردی که باید برطرف شوند در انتها ظاهر نمی شدند و باعث ایجاد این مشکل وحشتناک می شوند.
4. با این حال، منحصراً روی مصرف‌کننده تلفن همراه تمرکز نکنید
همزمان با ادغام موبایل و دسکتاپ، اهداف و خواسته های کاربران این پلتفرم ها نیز افزایش می یابد.
هنگامی که بر روی آنچه کاربر شما می‌خواهد بر اساس پلتفرم به دست آورد تمرکز می‌کنید، رویکردی جامع ایجاد می‌کنید که از طریق وب‌سایت شما به طور مؤثرتری به مشتریان می‌رسد.
چه کاربر در حال خرید یک محصول باشد یا در حال انجام تحقیق در مورد خدماتی که ارائه می‌دهید، ترکیبی از اهداف کاربر و جذب مشتری از کسب و کار ادامه خواهد داشت.
به حدی که تمرکز ویژه بر این آرمان ها و ارزش ها کمتر ضروری می شود.
مهم نیست، توجه داشته باشید، زیرا این ترکیب از تلفن همراه و دسکتاپ ادامه دارد، کمتر ضروری است.
5. از تکنیک های طراحی پاسخگو استفاده کنید
روزهای وب‌سایت‌های m-dot جداگانه (m.example.com) به پایان رسیده است.
هیچ دلیل قابل بازخرید ممکنی برای استفاده از چنین پیاده سازی در عصر موبایل اول وجود ندارد.
ساختار می‌تواند بسیار نامرتب باشد، در صورتی که URLهای متعدد به درستی بهینه نشده باشند، مشکلات محتوای تکراری ایجاد می‌کنند.
تکنیک‌های زیادی برای اطمینان از تکمیل یک انتقال مؤثر وجود دارد، اما در غیر این صورت، پیاده‌سازی m-dot با ظهور فناوری‌های جدید راه dodo را طی کرده است.
امروزه، پیاده سازی ایده آل شامل طراحی پاسخگو است. این طرح‌ها از مواردی استفاده می‌کنند که پرس‌وجوهای رسانه‌ای نامیده می‌شوند تا رزولوشن‌های نمایشی را که طرح پشتیبانی می‌کند، تعریف کند.
هر رزولوشن جداگانه چیزی است که در طراحی "نقطه شکست" یا نقطه ای که در آن طراحی واکنشگرا از یک وضوح به وضوح دیگر منتقل می شود، نامیده می شود.
مزیت استفاده از این نوع ساختار این است که با مشکلات محتوای تکراری که در پیاده سازی m-dot انجام می دهید، مواجه نمی شوید.
همچنین، پیاده سازی تلفن همراه شما بر روی آخرین فناوری خواهد بود.
6. برای افزایش سرعت سایت به جای «تصاویر در همه جا» به «کد» فکر کنید
آیا واقعاً باید از آن پس‌زمینه دو رنگ به‌عنوان پس‌زمینه 2 پیکسلی عریض و 1200 پیکسلی با تکرار بالا استفاده کنید؟
اگر این کار را نمی‌کنید و می‌توانید در عوض آن را کدنویسی کنید، در عوض آن را کدنویسی کنید.
در حالی که چیزی بسیار کوچک باعث کاهش سرعت سایت نمی شود، بهینه سازی ها می توانند با تکمیل آنها اضافه شوند.
دفعه بعد که ممیزی سایت را انجام می دهید یا در غیر این صورت یک وب سایت ایجاد می کنید، فکر کنید: "آیا واقعاً به این تصویر در اینجا نیاز دارم یا می توانم به سادگی آن را کدنویسی کنم؟"
اگر تصویر واقعاً ضروری نیست، کدگذاری شی می‌تواند به افزایش تصاعدی سرعت سایت کمک کند، به‌ویژه طرح‌های روی سایت که از گرافیک بیش از حد استفاده می‌کنند.
7. وردپرس را برای موبایل سفارشی کنید
افزونه های زیادی برای وردپرس موجود است.
به حدی که برخی حتی قابلیت هایی را برای افزایش سازگاری با تلفن همراه ارائه می دهند.
مفیدترین افزونه ها برای این منظور Duda Mobile، W3 Total Cache و همچنین افزونه هایی برای کوچک سازی HTML و CSS هستند.
8. برای فروش محصول خود از ابزارهای بینابینی مزاحم استفاده نکنید
آره. ما میدانیم. محصول شما بزرگ‌ترین و شگفت‌انگیزترین چیزی است که این سیاره را زیبا کرده است. به همین دلیل است که ما احتمالاً از وب سایت شما بازدید می کنیم و قبل از خرید در مورد آن تحقیق می کنیم.
اما، ما نیازی به داشتن یک آگهی مزاحم نداریم که فعالیت ما را در سراسر سایت شما مسدود کند تا ما را در فروش با مشکل مواجه کند.
در صورت امکان، بینابینی‌های مزاحم را به حداقل برسانید و تبلیغات را به سمت پایین یا کناری با گزینه‌ای برای کلیک بر روی تبلیغ و حذف حداقل آن نگه دارید.
مهم است که توجه داشته باشید که گوگل مطالب بینابینی مزاحم را جریمه می کند.
خواندن راهنماهای توسعه دهندگان آنها به همراه دستورالعمل های وب مستر آنها در مورد این موضوع و همچنین پست وبلاگ آنها در مورد این موضوع ارزشمند است.
9. سایت خود را در چندین سیستم عامل و نمایش بررسی کنید
هر SEO باید بداند که چگونه نقاط ضعف را در پیاده سازی موجود یک وب سایت شناسایی کند، از جمله مکان و نحوه یافتن مشکلات در نمایشگرها و دستگاه های مختلف.
شما می خواهید سایت خود را در بیش از یک سیستم عامل و همچنین بیش از یک دستگاه نمایشگر بررسی کنید. انجام این کار تضمین می کند که سایت شما تا حد امکان با طیف وسیعی از نمایشگرها و پلتفرم ها سازگار است.
اما، اگر نتوانید هزار دستگاه را بخرید تا آنها را بررسی کنید، چه؟
همه اینها به چند برنامه مربوط می شود. آره! بررسی این نوع مشکلات با بیش از یک برنامه امکان پذیر است.
افزونه Chrome Developer Google
اگر بودجه‌ای ندارید، استفاده از برنامه افزودنی Chrome Developer Google می‌تواند به شما کمک کند تا ببینید سایت شما در اندازه‌ها و وضوح‌های مختلف صفحه نمایش چگونه به نظر می‌رسد.
همچنین این امکان را ارائه می دهد که ببینید سایت شما از طریق جهت گیری های مختلف دستگاه چگونه به نظر می رسد، ورودی های لمسی چگونه از طریق شبیه سازی تعامل دارند و موارد دیگر.
همچنین می توان از ابزار اشکال زدایی آنها برای بررسی کدهای سایت برای مشکلات استفاده کرد.
BrowserStack
BrowserStack.com یک ابزار عالی برای آزمایش بر روی بسیاری از مرورگرها، سیستم عامل ها و وضوح نمایشگرهای مختلف است. آنها همچنین دارای یک افزونه Google Chrome هستند که می توانید برای این منظور از آن استفاده کنید.
شما می توانید هر سایتی را روی بیش از 2000 دستگاه واقعی، مرورگر و سیستم عامل آزمایش کنید.
با داشتن یک حساب پولی، دسترسی نامحدودی به افزونه مرورگر آنها برای آزمایش دارید.
تست متقابل مرورگر
CrossBrowserTesting.com جایگزینی برای BrowserStack است که می توانید برای آزمایش مرورگرها و دستگاه ها از آن استفاده کنید.
با ارائه بیش از 1500 مرورگر و پلتفرم برای آزمایش، ارائه محصول آن در کاری که می توانید انجام دهید کوتاه نیست.
مقایسه اسکرین شات با ابزار آنها امکان پذیر است و همچنین می توان نحوه رفتار وب سایت شما در دستگاه های واقعی را شبیه سازی کرد.
10. بهترین شیوه های ویدیوی موبایل را دنبال کنید
بله، بهترین شیوه های سئو ویدیوی موبایل وجود دارد! گوگل همچنان باید سیگنال هایی را در صفحه جاسازی کند تا موتور جستجوی آن ویدیوی موجود در آن صفحه را بهتر درک کند.
این مقاله از ژورنال موتور جستجو Matt Southern، پنج روش پیشنهادی گوگل برای سئو ویدیو را شرح می دهد.
مواردی مانند متن روی صفحه، پیوندهای ارجاع، داده های ساختاریافته و فایل های ویدئویی مهم هستند.
موارد دیگری نیز وجود دارد که می‌خواهید هنگام ایجاد ویدیو به آنها توجه کنید
برای مثال، می‌خواهید مطمئن شوید که ویدیوهای شما برای عموم قابل دسترسی است. این بدان معنی است که مطمئن شوید تنظیمات حریم خصوصی YouTube شما روی عمومی تنظیم شده است و باید یک صفحه وب قابل دسترسی برای Google با آن ویدیو داشته باشید.
با داده های ساختاریافته، استفاده از نوع داده VideoObject در Schema.org توصیه می شود.
گوگل استفاده از بهترین شیوه های ویدیوی موبایل زیر را برای اجرای بی عیب ویدیوی موبایلی توصیه می کند:
استفاده از کنترل‌های سفارشی با یک عنصر ریشه div، همراه با یک عنصر رسانه ویدیویی، و یک عنصر فرزند div که به کنترل‌های ویدئویی اختصاص داده شده است.
با استفاده از دکمه پخشمکث ویدیو.
اطمینان از اینکه کاربر می تواند به عقب و جلو بگردد.
اجرای فنی جامع آنها از یک ویدیوی موبایلی بی نظیر است و شما را قدم به قدم در این فرآیند راهنمایی می کند.
همانطور که گوگل می گوید:
"اگر دلیل اصلی کاربر برای بازدید ویدیو باشد، این تجربه کاربری باید همه‌جانبه و دوباره جذاب شود."
گذشته از موارد بدیهی، سایر بهترین شیوه های سئو ویدیوی موبایل عبارتند از:
پیدا کردن ویدیوهای شما را تا حد امکان برای Google آسان می کند. این یعنی:
استفاده از نقشه سایت ویدیویی: اگر نقشه سایت ویدیویی ارسال نکنید، ممکن است Google نتواند مستقیماً ویدیوهای شما را پیدا کند. نقشه سایت ویدیویی ارسال این نقشه سایت را در کنسول جستجوی Google برای شما آسان تر می کند، که خزیدن و فهرست کردن ویدیوهای شما را برای Google آسان تر می کند.
از اقدامات پیچیده کاربر یا قطعات URL استفاده نکنید: اگر از آنها برای بارگیری ویدیوهای شما استفاده می شود، ممکن است Google اصلاً ویدیوهای شما را پیدا نکند، زیرا این موارد در صفحه شما برای Google برای درک آن بسیار پیچیده هستند.
از یک تگ HTML با قابلیت شناسایی آسان استفاده کنید: برخی از برچسب های معتبر شامل ویدیو، iframe، شی یا جاسازی هستند. شناسایی ویدیوها زمانی که گوگل در تگ های رایج جاسازی شده اند برای گوگل آسان تر است.
مطمئن شوید که ویدیوهای شما واقعاً می توانند ایندکس شوند. این اتفاق می‌افتد: گاهی ممکن است شخصی تغییری در فایل robots.txt ایجاد کند که از خزیدن فایل‌های ویدیویی جلوگیری می‌کند (بدون تقصیر... امیدوارم). اگر ویدیوهای شما ایندکس می‌شدند، و اکنون ناگهان ایندکس نمی‌شوند، ارزش آن را دارد که به فایل robots.txt خود نگاهی بیندازید تا مطمئن شوید که مسدود نمی‌شوند.
از قالب‌های تصویر کوچک پشتیبانی شده توسط Google استفاده کنید: بهترین روش‌های تصویر کوچک نیز وجود دارد که باید در اسناد توسعه‌دهنده وب Google بالا دنبال کنید.
سئوی ویدیوی موبایل همیشه آنطور که فکر می کنید آسان نیست.
در حالی که لازم نیست تک تک کادرها بررسی شوند، اما مواردی وجود دارد که می‌تواند برای خزیدن و نمایه‌سازی ویدیوی تلفن همراه شما مضر باشد.
11. از Schema.org Structured Data استفاده کنید
داده‌های ساختاری Schema.org نه تنها برای شناسایی صفحاتی در سایت شما که دارای اطلاعات ساختارمند و ویژه‌ای هستند که موتورهای جستجو باید ببینند، مهم هستند، بلکه زمانی که فهرست موبایل به طور کامل وارد عمل شد، انتظار افزایش اتکا به Schema را داشته باشید.
این یک روش ساده و مختصر برای درک اطلاعات است که می‌توان آن را به قطعات غنی در نتایج جستجوی تلفن همراه ترجمه کرد.
اما، در هر صورت، این نظر نویسنده این است که داده های ساختار یافته Schema حتی در پیاده سازی های دسکتاپ نیز مورد استفاده قرار می گیرند، زیرا می توانند به شما کمک کنند بر اساس کلمه کلیدی مورد نظرتان در نتایج ریچ اسنیپت ظاهر شوید. این می تواند به افزایش دید سایت شما در صورت اجرای صحیح کمک کند.
12. اسکریپت های پشتیبانی مانند جاوا اسکریپت، CSS یا چیزهایی مانند تصاویر را مسدود نکنید
این باید هنگام توسعه سایت‌ها برای هر پلتفرمی، چه دسکتاپ یا موبایل، منطقی باشد، اما برخی از افراد هنوز این کار را انجام می‌دهند.
مهم است که مطمئن شوید که اسکریپت‌های پشتیبانی برای طراحی موبایل شما مسدود نمی‌شوند، زیرا این انسداد می‌تواند منجر به مشکلاتی مانند موبایل نرم‌افزار 404 شود. همچنین می تواند منجر به 404s دسکتاپ شود.
اما، اگر این فایل‌ها را از خزیدن توسط Google مسدود کنید، آنها نمی‌توانند این فایل‌ها را بخزند تا ببینند وب‌سایت شما درست کار می‌کند.
هنگامی که آنها نمی توانند این کار را انجام دهند، این می تواند منجر به رتبه های پایین تر شود زیرا آنها نمی توانند وب سایت شما را به طور کامل درک کنند.
13. فشرده سازی و بهینه سازی تصویر
برای وب تلفن همراه، بهینه سازی تصویر یک مؤلفه مهم برای درست کردن آن است. این بدان معنی است که شما باید مطمئن شوید که تصاویر به درستی برای تمام اندازه های تصویر در تمام وضوح های ممکن بهینه شده اند.
امکان ایجاد یک تصویر و اطمینان از قابل مشاهده بودن آن در همه جا وجود ندارد. خوب، شما می توانید.
اما در قطعنامه هایی که برای آنها ساخته نشده است، تحریف به نظر می رسد.
درعوض، استفاده از بهترین شیوه های سئو جامع و اطمینان از ایجاد تصاویری با کیفیت بالا در هر وضوح و همچنین بارگیری سریع چیزی است که توصیه می شود.
به همین دلیل است که چندین روش طراحی واکنشگرا وجود دارد که Google توصیه می کند از آنها برای بهینه سازی تصاویر خود برای پلتفرم موبایل استفاده کنید. آنها موارد زیر را توصیه می کنند:google
از اندازه های نسبی تصویر استفاده کنید. اگر از اندازه های نسبی تصویر استفاده می کنید، در نهایت از سرریز شدن برچسب ظرفی که تصویر را در خود جای داده است جلوگیری می کنید.
از تصاویر درون خطی استفاده کنید. کاهش سرعت صفحه با اطمینان از استفاده از تصاویر درون خطی به منظور کاهش درخواست فایل امکان پذیر است. اینها باید در صفحاتی استفاده شوند که ممکن است در جای دیگری از سایت شما استفاده نشوند.
برای دستگاه های DPI بالاتر، از ویژگی srcset برای تصاویر استفاده کنید. این به شما کمک می کند بیش از یک فایل تصویری را برای دستگاه های مختلف اضافه کنید.
اگر سئوی تجارت الکترونیکی انجام می دهید، ممکن است بخواهید تصاویر محصول خود را قابل گسترش کنید. مشتریان ممکن است بخواهند تصویری را که به طور بالقوه در دستگاه خود خریداری می کنند بزرگ کنند تا آن را بهتر ببینند. بنابراین، ارائه این گزینه منطقی است.
ترفند یکپارچه‌سازی تصاویر در بهینه‌سازی‌های موبایل این است: ایجاد تعادل بین اندازه تصویر، بارگذاری آنها در دستگاه تلفن همراه، و اطمینان از سرعت صفحه مناسب بدون کاهش کیفیت تصویر در هر دستگاه اصلی که مخاطبان شما به دنبال آن هستند.
14. بهینه سازی اندازه کلی صفحه
اندازه صفحه یکی از نکات مهم برای یک وب سایت سازگار با موبایل است. برای اینکه واقعاً سازگار با موبایل باشد، اندازه صفحه باید سریع بارگیری شود. برای انجام این کار، بهینه سازی اندازه کلی DOM ضروری است.
برای انجام موثر این کار، نه تنها باید آنچه را که در لینک بالا مطرح کردم، بلکه موارد زیر را نیز در نظر بگیرید:
از فونت های سفارشی غیر ضروری استفاده نکنید
استفاده از فونت های سفارشی غیر ضروری می تواند روند بارگذاری صفحه شما را پیچیده کند و تعداد اسکریپت های مورد نیاز برای پردازش صفحه شما را افزایش دهد.
این به معنای افزایش زمان بارگذاری صفحه است و می تواند امتیازات Core Web Vitals شما را از محدوده مطلوب افزایش دهد.
در صورت امکان، به جای آن از فونت های سیستمی استفاده کنید و می توانید تأثیری را که این کار ایجاد می کند به حداقل برسانید.
تصاویر خود را بهینه کنید
شما همچنین می خواهید مطمئن شوید که تصاویر خود را با حفظ کیفیت تصویر بهینه می کنید. اگر شخصی وارد سایت شما شود و کیفیت تصویر شما به دلیل فشرده سازی بیش از حد ضعیف باشد، نتیجه حرفه ای نیست، بهترین نتیجه را به دست نیاورده اید.
در حالت ایده‌آل، باید از اندازه فایل‌های تصویری استفاده کنید که مطابق با آنچه که بالاترین کیفیت را در دستگاه‌های تلفن همراهی که سایت شما برای آنها بهینه‌سازی شده است تولید می‌کند، در حالی که مطمئن شوید که از آن نقطه کیفیت پایین‌تر نمی‌روید.
این یک عمل متعادل کننده ظریف است و برای رسیدن به نتایج دلخواه به فردی متخصص در بهینه سازی تصاویر نیاز دارد.
مقدار منابع مورد نیاز کلی DOM و مسیر رندر بحرانی را کاهش دهید
هر چه صفحه شما به منابع بیشتری برای رندر نیاز داشته باشد، سرعت دانلود صفحه شما بالاتر خواهد بود. برای پردازش یک صفحه وب هرگز نباید به بیش از 10 افزونه (حداکثر) و سه تا چهار فایل اسکریپت نیاز داشته باشید.
این نویسنده موقعیت هایی را دیده است که در آن 160 افزونه بارگذاری می شود و اندازه فایل صفحه 10 مگابایت است. اینجا مطلقاً جایی نیست که شما می خواهید باشید.
برای مؤثرترین کار، نظر نویسنده این است که صفحات در یک سایت وردپرس هرگز نباید از 150 تا 250 کیلوبایت تجاوز کنند - به طور متوسط - و نباید بیش از پنج تا هفت منبع (CSS، فونت خارجی در صورت نیاز، یک فایل تبلیغاتی، یک فایل جاوا اسکریپت و سه افزونه). اگر به موارد بیشتری نیاز دارید، ممکن است آنطور که فکر می کنید بهینه نباشید.
و صرفه جویی را دست کم نگیرید که استفاده از فونت های سیستم نسبت به فونت های وب خارجی شما را نجات می دهد.
صفحات خود را کوچک کنید
فرآیند کوچک سازی در صفحات شما شامل فشرده سازی فایل های شما به منظور صرفه جویی در فضا و در نتیجه کاهش زمان بارگذاری کلی صفحه است.
استفاده از کوچک‌سازی به‌عنوان یک فرآیند به شما کمک می‌کند تا از شر فضای سفید ناخواسته در کد خلاص شوید و آن کد را فشرده کنید تا حداقل فضای ممکن را اشغال کند.
در حالت ایده آل، بهترین فرآیند شامل هیچ پلاگینی نخواهد بود. شما می خواهید یک توسعه دهنده استخدام کنید تا به صورت دستی صفحات شما را کوچک کند.
اگر قبلاً با افزونه‌ها پر شده‌اید، اضافه کردن افزونه دیگری برای کوچک کردن صفحات شما ایده بدی است. در این موارد، شما می خواهید از یک توسعه دهنده در سطح حرفه ای استفاده کنید تا بهترین نتیجه را تضمین کنید.
اگر در حال حاضر حداقل پلاگین دارید، استفاده از یک توسعه دهنده حرفه ای برای این کار به شما کمک می کند تا زمان بارگذاری صفحه و امتیازات Core Web Vitals بهتری داشته باشید.
اگر حتماً باید از یک افزونه استفاده کنید، فقط مطمئن شوید که از آن به عنوان یک اقدام موقت استفاده کنید تا زمانی که بتوانید یک توسعه دهنده حرفه ای وارد آن شده و به صورت دستی کد شما را کوچک کند.
Mobile-First اینجاست. نیاز به اجرا به حد بحرانی رسیده است
با ورود فهرست اول موبایل گوگل، پیاده سازی وب سایت متقابل پلت فرم، چند دستگاهی و سازگار با یکدیگر اکنون به اولویت زیادی رسیده است.
این بدان معناست که هر چه بیشتر تاخیر داشته باشید، تنها پیاده‌سازی موبایلی بیشتر خواهد بود، اما پیاده‌سازی مناسب موبایل از بسیاری جهات برای شما هزینه خواهد داشت.
نه فقط رتبه بندی
اگر هنوز به موبایل نرسیده اید، چرا که نه؟
14 بهترین روش های بهینه سازی موبایل که باید بدانید
برای دستیابی به بهترین پیاده سازی تلفن همراه، اطمینان حاصل کنید که یک سایت موبایلی ایجاد می کنید که با این 14 بهترین روش مطابقت دارد.
مدتی است که گوگل شروع به انتشار فهرست اول موبایل خود کرده است.
هنگامی که این برای اولین بار اعلام شد، متخصصان سئو در همه جا هجوم آوردند تا اطمینان حاصل کنند که سایت آنها با اصول اساسی وب Google و بهترین دستورالعمل های توسعه موبایل مطابقت دارد.
بهینه سازی برای وب موبایل یک زیر زمینه کاملاً جامع در سئو است که برای موفقیت به دانش سطح متخصص و بهترین شیوه های خاص خود نیاز دارد.
به حدی که بسیاری از صنایع به پیاده سازی کامل و با کیفیت وب سایت خود در موبایل نیاز دارند. و همه اندازه گیری نمی کنند.
در بسیاری از موارد، گاهی اوقات اکثر سایت ها در تحقق هدف خود برای سازگاری کوتاهی می کنند.
واضح است که این یک اشتباه است زیرا طراحی موبایل بخش رایجی از جامعه دیجیتال ما است:
96 درصد از آمریکایی های 18 تا 29 ساله گوشی هوشمند دارند.
تا سال 2020، بیش از 3.6 میلیارد کاربر در سراسر جهان از یک دستگاه تلفن هوشمند استفاده می کردند. تا سال 2023 به 4.3 میلیارد خواهد رسید.
در سال 2020، کاربران تلفن همراه در مقایسه با مرورگرهای تلفن همراه، 90 درصد از زمان خود را در برنامه ها صرف کردند.
گوگل 93.22 درصد از سهم بازار جستجوی موبایل در ایالات متحده را در سال 2021 به خود اختصاص داده است.
نتایج جستجوی اولیه تلفن همراه در Google به 26.9٪ CTR ارگانیک (نرخ کلیک) دست می یابد.
برای استفاده از بهترین حضور آنلاین ممکن، باید برای انواع مختلف دستگاه ها و وضوح صفحه نمایش بهینه سازی کنید. نه فقط برای دسکتاپ.
و اکنون، گوگل به‌روزرسانی تجربه صفحه دسکتاپ خود را ارائه می‌کند. اما این به روز رسانی فراتر از محدوده این مقاله است، اگرچه به طور کلی در تجربه صفحه نقش دارد.
برای دستیابی به بهترین پیاده‌سازی موبایلی، مهم است که مطمئن شوید یک سایت موبایلی ایجاد می‌کنید که با این بهترین شیوه‌ها مطابقت دارد، و همچنین فرصت‌هایی برای افزایش تعداد Core Web Vitals شما ایجاد می‌کند.
با استفاده از طراحی ریسپانسیو و نه زیردامنه m-dot، رعایت بهترین روش‌ها با ایجاد و بهینه‌سازی تصویر، و مشاهده فشرده‌سازی و کوچک‌سازی، می‌توانید به یک سایت موبایلی باکیفیت دست پیدا کنید که تا حد امکان به افراد زیادی در بین مخاطبان خود دسترسی پیدا کند.
این جایی است که سایت موبایل شما موفق خواهد شد.
1. مطمئن شوید که همه محتوا در دسکتاپ و موبایل یکسان است
ایده پشت این بهترین عمل، اجتناب از محتوای تکراری و اتهامات پنهان کاری است.
برای ایمن بودن، همیشه مطمئن شوید که تمام محتوا در نسخه دسکتاپ سایت شما به همان اندازه که در موبایل است، یکسان باشد.
یکی از بهترین تکنیک ها برای اطمینان از این اتفاق طراحی واکنش گرا است.
طراحی واکنشگرا، برای کسانی که نمی دانند، شامل ایجاد یک شیوه نامه است که از «پرس و جوهای رسانه ای» برای انتقال خودکار طرح ها بین طیف گسترده ای از پلتفرم ها و دستگاه ها استفاده می کند.
اگر می‌خواهید تمام سرعت ممکن را کاهش دهید و طراحی خود را ساده و ساده کنید، برای کاهش درخواست‌های سمت سرور به دنبال CSS sprites باشید.
2. Above The Fold Isn’t Gone Entirely
مهم است که به یاد داشته باشید که در یک محیط تلفن همراه، که در آن چیزها بی انتها پیمایش می کنند، بالای تاشو کاملاً از بین نمی رود.
همچنان ترجیح داده می شود که حداقل مقداری از محتوای متن در بالای صفحه روی یک طرح موبایل وجود داشته باشد تا به کسی نشان دهد که دلیلی برای پیمایش وجود دارد.
مزایا و تمایلات روانشناختی تمایل به دیدن آنچه ارائه می‌دهید به طور کامل از بین نرفته‌اند، بنابراین هنوز باید برای این کار در بسیاری از دستگاه‌های تلفن همراه مختلف تا حدودی بهینه‌سازی کنید.
3. از یک رویکرد توسعه از بالا به پایین استفاده کنید
رویکرد توسعه "از بالا به پایین" به این معنی است که شما تمام پیامدهای بالقوه هر تصمیم اتخاذ شده در یک طراحی را از ابتدا تا انتها در نظر بگیرید.
شما ابتدا برای موبایل توسعه می دهید، نه برای دسکتاپ، و سپس به طراحی موبایل می پردازید. این رویکرد توسعه ایده آل است زیرا شما مسائلی را در طراحی نهایی وارد نمی کنید.
یک مثال در اینجا آمده است: شما یک وب سایت دسکتاپ ایجاد می کنید. در حدود سه چهارم راه، تصمیم می گیرید که می خواهید یک سایت موبایل در بالای آن ایجاد کنید.
شما ماکت را ایجاد می کنید. اما، پس از کدنویسی ماکت و حرکت در طول انتقال، یک اشکال در اینجا پیدا می کنید. و شما یک اشکال را در آنجا پیدا می کنید. سپس یک اشکال را در آنجا پیدا می کنید. این به این دلیل است که رویکرد پایین به بالا کار نمی کند و باعث خزش دامنه می شود.
این پدیده ای است که در آن مسائل غیرقابل مشاهده در آخرین لحظه ظاهر می شود و باعث ایجاد اشکالات پیش بینی نشده و افزایش ساعاتی می شود که در ابتدا در زمان اجرای پروژه در نظر گرفته نشده بود.
حقیقت این است که اگر رویکرد از بالا به پایین برای طراحی پاسخگوی تلفن همراه مستقیماً از ابتدا در نظر گرفته می شد، این اشکالات و مواردی که باید برطرف شوند در انتها ظاهر نمی شدند و باعث ایجاد این مشکل وحشتناک می شوند.
4. با این حال، منحصراً روی مصرف‌کننده تلفن همراه تمرکز نکنید
همزمان با ادغام موبایل و دسکتاپ، اهداف و خواسته های کاربران این پلتفرم ها نیز افزایش می یابد.
هنگامی که بر روی آنچه کاربر شما می‌خواهد بر اساس پلتفرم به دست آورد تمرکز می‌کنید، رویکردی جامع ایجاد می‌کنید که از طریق وب‌سایت شما به طور مؤثرتری به مشتریان می‌رسد.
چه کاربر در حال خرید یک محصول باشد یا در حال انجام تحقیق در مورد خدماتی که ارائه می‌دهید، ترکیبی از اهداف کاربر و جذب مشتری از کسب و کار ادامه خواهد داشت.
به حدی که تمرکز ویژه بر این آرمان ها و ارزش ها کمتر ضروری می شود.
مهم نیست، توجه داشته باشید، زیرا این ترکیب از تلفن همراه و دسکتاپ ادامه دارد، کمتر ضروری است.
5. از تکنیک های طراحی پاسخگو استفاده کنید
روزهای وب‌سایت‌های m-dot جداگانه (m.example.com) به پایان رسیده است.
هیچ دلیل قابل بازخرید ممکنی برای استفاده از چنین پیاده سازی در عصر موبایل اول وجود ندارد.
ساختار می‌تواند بسیار نامرتب باشد، در صورتی که URLهای متعدد به درستی بهینه نشده باشند، مشکلات محتوای تکراری ایجاد می‌کنند.
تکنیک‌های زیادی برای اطمینان از تکمیل یک انتقال مؤثر وجود دارد، اما در غیر این صورت، پیاده‌سازی m-dot با ظهور فناوری‌های جدید راه dodo را طی کرده است.
امروزه، پیاده سازی ایده آل شامل طراحی پاسخگو است. این طرح‌ها از مواردی استفاده می‌کنند که پرس‌وجوهای رسانه‌ای نامیده می‌شوند تا رزولوشن‌های نمایشی را که طرح پشتیبانی می‌کند، تعریف کند.
هر رزولوشن جداگانه چیزی است که در طراحی "نقطه شکست" یا نقطه ای که در آن طراحی واکنشگرا از یک وضوح به وضوح دیگر منتقل می شود، نامیده می شود.
مزیت استفاده از این نوع ساختار این است که با مشکلات محتوای تکراری که در پیاده سازی m-dot انجام می دهید، مواجه نمی شوید.
همچنین، پیاده سازی تلفن همراه شما بر روی آخرین فناوری خواهد بود.
6. برای افزایش سرعت سایت به جای «تصاویر در همه جا» به «کد» فکر کنید
آیا واقعاً باید از آن پس‌زمینه دو رنگ به‌عنوان پس‌زمینه 2 پیکسلی عریض و 1200 پیکسلی با تکرار بالا استفاده کنید؟
اگر این کار را نمی‌کنید و می‌توانید در عوض آن را کدنویسی کنید، در عوض آن را کدنویسی کنید.
در حالی که چیزی بسیار کوچک باعث کاهش سرعت سایت نمی شود، بهینه سازی ها می توانند با تکمیل آنها اضافه شوند.
دفعه بعد که ممیزی سایت را انجام می دهید یا در غیر این صورت یک وب سایت ایجاد می کنید، فکر کنید: "آیا واقعاً به این تصویر در اینجا نیاز دارم یا می توانم به سادگی آن را کدنویسی کنم؟"
اگر تصویر واقعاً ضروری نیست، کدگذاری شی می‌تواند به افزایش تصاعدی سرعت سایت کمک کند، به‌ویژه طرح‌های روی سایت که از گرافیک بیش از حد استفاده می‌کنند.
7. وردپرس را برای موبایل سفارشی کنید
افزونه های زیادی برای وردپرس موجود است.
به حدی که برخی حتی قابلیت هایی را برای افزایش سازگاری با تلفن همراه ارائه می دهند.
مفیدترین افزونه ها برای این منظور Duda Mobile، W3 Total Cache و همچنین افزونه هایی برای کوچک سازی HTML و CSS هستند.
8. برای فروش محصول خود از ابزارهای بینابینی مزاحم استفاده نکنید
آره. ما میدانیم. محصول شما بزرگ‌ترین و شگفت‌انگیزترین چیزی است که این سیاره را زیبا کرده است. به همین دلیل است که ما احتمالاً از وب سایت شما بازدید می کنیم و قبل از خرید در مورد آن تحقیق می کنیم.
اما، ما نیازی به داشتن یک آگهی مزاحم نداریم که فعالیت ما را در سراسر سایت شما مسدود کند تا ما را در فروش با مشکل مواجه کند.
در صورت امکان، بینابینی‌های مزاحم را به حداقل برسانید و تبلیغات را به سمت پایین یا کناری با گزینه‌ای برای کلیک بر روی تبلیغ و حذف حداقل آن نگه دارید.
مهم است که توجه داشته باشید که گوگل مطالب بینابینی مزاحم را جریمه می کند.
خواندن راهنماهای توسعه دهندگان آنها به همراه دستورالعمل های وب مستر آنها در مورد این موضوع و همچنین پست وبلاگ آنها در مورد این موضوع ارزشمند است.
9. سایت خود را در چندین سیستم عامل و نمایش بررسی کنید
هر SEO باید بداند که چگونه نقاط ضعف را در پیاده سازی موجود یک وب سایت شناسایی کند، از جمله مکان و نحوه یافتن مشکلات در نمایشگرها و دستگاه های مختلف.
شما می خواهید سایت خود را در بیش از یک سیستم عامل و همچنین بیش از یک دستگاه نمایشگر بررسی کنید. انجام این کار تضمین می کند که سایت شما تا حد امکان با طیف وسیعی از نمایشگرها و پلتفرم ها سازگار است.
اما، اگر نتوانید هزار دستگاه را بخرید تا آنها را بررسی کنید، چه؟
همه اینها به چند برنامه مربوط می شود. آره! بررسی این نوع مشکلات با بیش از یک برنامه امکان پذیر است.
افزونه Chrome Developer Google
اگر بودجه‌ای ندارید، استفاده از برنامه افزودنی Chrome Developer Google می‌تواند به شما کمک کند تا ببینید سایت شما در اندازه‌ها و وضوح‌های مختلف صفحه نمایش چگونه به نظر می‌رسد.
همچنین این امکان را ارائه می دهد که ببینید سایت شما از طریق جهت گیری های مختلف دستگاه چگونه به نظر می رسد، ورودی های لمسی چگونه از طریق شبیه سازی تعامل دارند و موارد دیگر.
همچنین می توان از ابزار اشکال زدایی آنها برای بررسی کدهای سایت برای مشکلات استفاده کرد.
BrowserStack
BrowserStack.com یک ابزار عالی برای آزمایش بر روی بسیاری از مرورگرها، سیستم عامل ها و وضوح نمایشگرهای مختلف است. آنها همچنین دارای یک افزونه Google Chrome هستند که می توانید برای این منظور از آن استفاده کنید.
شما می توانید هر سایتی را روی بیش از 2000 دستگاه واقعی، مرورگر و سیستم عامل آزمایش کنید.
با داشتن یک حساب پولی، دسترسی نامحدودی به افزونه مرورگر آنها برای آزمایش دارید.
تست متقابل مرورگر
CrossBrowserTesting.com جایگزینی برای BrowserStack است که می توانید برای آزمایش مرورگرها و دستگاه ها از آن استفاده کنید.
با ارائه بیش از 1500 مرورگر و پلتفرم برای آزمایش، ارائه محصول آن در کاری که می توانید انجام دهید کوتاه نیست.
مقایسه اسکرین شات با ابزار آنها امکان پذیر است و همچنین می توان نحوه رفتار وب سایت شما در دستگاه های واقعی را شبیه سازی کرد.
10. بهترین شیوه های ویدیوی موبایل را دنبال کنید
بله، بهترین شیوه های سئو ویدیوی موبایل وجود دارد! گوگل همچنان باید سیگنال هایی را در صفحه جاسازی کند تا موتور جستجوی آن ویدیوی موجود در آن صفحه را بهتر درک کند.
این مقاله از ژورنال موتور جستجو Matt Southern، پنج روش پیشنهادی گوگل برای سئو ویدیو را شرح می دهد.
مواردی مانند متن روی صفحه، پیوندهای ارجاع، داده های ساختاریافته و فایل های ویدئویی مهم هستند.
موارد دیگری نیز وجود دارد که می‌خواهید هنگام ایجاد ویدیو به آنها توجه کنید
برای مثال، می‌خواهید مطمئن شوید که ویدیوهای شما برای عموم قابل دسترسی است. این بدان معنی است که مطمئن شوید تنظیمات حریم خصوصی YouTube شما روی عمومی تنظیم شده است و باید یک صفحه وب قابل دسترسی برای Google با آن ویدیو داشته باشید.
با داده های ساختاریافته، استفاده از نوع داده VideoObject در Schema.org توصیه می شود.
گوگل استفاده از بهترین شیوه های ویدیوی موبایل زیر را برای اجرای بی عیب ویدیوی موبایلی توصیه می کند:
استفاده از کنترل‌های سفارشی با یک عنصر ریشه div، همراه با یک عنصر رسانه ویدیویی، و یک عنصر فرزند div که به کنترل‌های ویدئویی اختصاص داده شده است.
با استفاده از دکمه پخشمکث ویدیو.
اطمینان از اینکه کاربر می تواند به عقب و جلو بگردد.
اجرای فنی جامع آنها از یک ویدیوی موبایلی بی نظیر است و شما را قدم به قدم در این فرآیند راهنمایی می کند.
همانطور که گوگل می گوید:
"اگر دلیل اصلی کاربر برای بازدید ویدیو باشد، این تجربه کاربری باید همه‌جانبه و دوباره جذاب شود."
گذشته از موارد بدیهی، سایر بهترین شیوه های سئو ویدیوی موبایل عبارتند از:
پیدا کردن ویدیوهای شما را تا حد امکان برای Google آسان می کند. این یعنی:
استفاده از نقشه سایت ویدیویی: اگر نقشه سایت ویدیویی ارسال نکنید، ممکن است Google نتواند مستقیماً ویدیوهای شما را پیدا کند. نقشه سایت ویدیویی ارسال این نقشه سایت را در کنسول جستجوی Google برای شما آسان تر می کند، که خزیدن و فهرست کردن ویدیوهای شما را برای Google آسان تر می کند.
از اقدامات پیچیده کاربر یا قطعات URL استفاده نکنید: اگر از آنها برای بارگیری ویدیوهای شما استفاده می شود، ممکن است Google اصلاً ویدیوهای شما را پیدا نکند، زیرا این موارد در صفحه شما برای Google برای درک آن بسیار پیچیده هستند.
از یک تگ HTML با قابلیت شناسایی آسان استفاده کنید: برخی از برچسب های معتبر شامل ویدیو، iframe، شی یا جاسازی هستند. شناسایی ویدیوها زمانی که گوگل در تگ های رایج جاسازی شده اند برای گوگل آسان تر است.
مطمئن شوید که ویدیوهای شما واقعاً می توانند ایندکس شوند. این اتفاق می‌افتد: گاهی ممکن است شخصی تغییری در فایل robots.txt ایجاد کند که از خزیدن فایل‌های ویدیویی جلوگیری می‌کند (بدون تقصیر... امیدوارم). اگر ویدیوهای شما ایندکس می‌شدند، و اکنون ناگهان ایندکس نمی‌شوند، ارزش آن را دارد که به فایل robots.txt خود نگاهی بیندازید تا مطمئن شوید که مسدود نمی‌شوند.
از قالب‌های تصویر کوچک پشتیبانی شده توسط Google استفاده کنید: بهترین روش‌های تصویر کوچک نیز وجود دارد که باید در اسناد توسعه‌دهنده وب Google بالا دنبال کنید.
سئوی ویدیوی موبایل همیشه آنطور که فکر می کنید آسان نیست.
در حالی که لازم نیست تک تک کادرها بررسی شوند، اما مواردی وجود دارد که می‌تواند برای خزیدن و نمایه‌سازی ویدیوی تلفن همراه شما مضر باشد.
11. از Schema.org Structured Data استفاده کنید
داده‌های ساختاری Schema.org نه تنها برای شناسایی صفحاتی در سایت شما که دارای اطلاعات ساختارمند و ویژه‌ای هستند که موتورهای جستجو باید ببینند، مهم هستند، بلکه زمانی که فهرست موبایل به طور کامل وارد عمل شد، انتظار افزایش اتکا به Schema را داشته باشید.
این یک روش ساده و مختصر برای درک اطلاعات است که می‌توان آن را به قطعات غنی در نتایج جستجوی تلفن همراه ترجمه کرد.
اما، در هر صورت، این نظر نویسنده این است که داده های ساختار یافته Schema حتی در پیاده سازی های دسکتاپ نیز مورد استفاده قرار می گیرند، زیرا می توانند به شما کمک کنند بر اساس کلمه کلیدی مورد نظرتان در نتایج ریچ اسنیپت ظاهر شوید. این می تواند به افزایش دید سایت شما در صورت اجرای صحیح کمک کند.
12. اسکریپت های پشتیبانی مانند جاوا اسکریپت، CSS یا چیزهایی مانند تصاویر را مسدود نکنید
این باید هنگام توسعه سایت‌ها برای هر پلتفرمی، چه دسکتاپ یا موبایل، منطقی باشد، اما برخی از افراد هنوز این کار را انجام می‌دهند.
مهم است که مطمئن شوید که اسکریپت‌های پشتیبانی برای طراحی موبایل شما مسدود نمی‌شوند، زیرا این انسداد می‌تواند منجر به مشکلاتی مانند موبایل نرم‌افزار 404 شود. همچنین می تواند منجر به 404s دسکتاپ شود.
اما، اگر این فایل‌ها را از خزیدن توسط Google مسدود کنید، آنها نمی‌توانند این فایل‌ها را بخزند تا ببینند وب‌سایت شما درست کار می‌کند.
هنگامی که آنها نمی توانند این کار را انجام دهند، این می تواند منجر به رتبه های پایین تر شود زیرا آنها نمی توانند وب سایت شما را به طور کامل درک کنند.
13. فشرده سازی و بهینه سازی تصویر
برای وب تلفن همراه، بهینه سازی تصویر یک مؤلفه مهم برای درست کردن آن است. این بدان معنی است که شما باید مطمئن شوید که تصاویر به درستی برای تمام اندازه های تصویر در تمام وضوح های ممکن بهینه شده اند.
امکان ایجاد یک تصویر و اطمینان از قابل مشاهده بودن آن در همه جا وجود ندارد. خوب، شما می توانید.
اما در قطعنامه هایی که برای آنها ساخته نشده است، تحریف به نظر می رسد.
درعوض، استفاده از بهترین شیوه های سئو جامع و اطمینان از ایجاد تصاویری با کیفیت بالا در هر وضوح و همچنین بارگیری سریع چیزی است که توصیه می شود.
به همین دلیل است که چندین روش طراحی واکنشگرا وجود دارد که Google توصیه می کند از آنها برای بهینه سازی تصاویر خود برای پلتفرم موبایل استفاده کنید. آنها موارد زیر را توصیه می کنند:google
از اندازه های نسبی تصویر استفاده کنید. اگر از اندازه های نسبی تصویر استفاده می کنید، در نهایت از سرریز شدن برچسب ظرفی که تصویر را در خود جای داده است جلوگیری می کنید.
از تصاویر درون خطی استفاده کنید. کاهش سرعت صفحه با اطمینان از استفاده از تصاویر درون خطی به منظور کاهش درخواست فایل امکان پذیر است. اینها باید در صفحاتی استفاده شوند که ممکن است در جای دیگری از سایت شما استفاده نشوند.
برای دستگاه های DPI بالاتر، از ویژگی srcset برای تصاویر استفاده کنید. این به شما کمک می کند بیش از یک فایل تصویری را برای دستگاه های مختلف اضافه کنید.
اگر سئوی تجارت الکترونیکی انجام می دهید، ممکن است بخواهید تصاویر محصول خود را قابل گسترش کنید. مشتریان ممکن است بخواهند تصویری را که به طور بالقوه در دستگاه خود خریداری می کنند بزرگ کنند تا آن را بهتر ببینند. بنابراین، ارائه این گزینه منطقی است.
ترفند یکپارچه‌سازی تصاویر در بهینه‌سازی‌های موبایل این است: ایجاد تعادل بین اندازه تصویر، بارگذاری آنها در دستگاه تلفن همراه، و اطمینان از سرعت صفحه مناسب بدون کاهش کیفیت تصویر در هر دستگاه اصلی که مخاطبان شما به دنبال آن هستند.
14. بهینه سازی اندازه کلی صفحه
اندازه صفحه یکی از نکات مهم برای یک وب سایت سازگار با موبایل است. برای اینکه واقعاً سازگار با موبایل باشد، اندازه صفحه باید سریع بارگیری شود. برای انجام این کار، بهینه سازی اندازه کلی DOM ضروری است.
برای انجام موثر این کار، نه تنها باید آنچه را که در لینک بالا مطرح کردم، بلکه موارد زیر را نیز در نظر بگیرید:
از فونت های سفارشی غیر ضروری استفاده نکنید
استفاده از فونت های سفارشی غیر ضروری می تواند روند بارگذاری صفحه شما را پیچیده کند و تعداد اسکریپت های مورد نیاز برای پردازش صفحه شما را افزایش دهد.
این به معنای افزایش زمان بارگذاری صفحه است و می تواند امتیازات Core Web Vitals شما را از محدوده مطلوب افزایش دهد.
در صورت امکان، به جای آن از فونت های سیستمی استفاده کنید و می توانید تأثیری را که این کار ایجاد می کند به حداقل برسانید.
تصاویر خود را بهینه کنید
شما همچنین می خواهید مطمئن شوید که تصاویر خود را با حفظ کیفیت تصویر بهینه می کنید. اگر شخصی وارد سایت شما شود و کیفیت تصویر شما به دلیل فشرده سازی بیش از حد ضعیف باشد، نتیجه حرفه ای نیست، بهترین نتیجه را به دست نیاورده اید.
در حالت ایده‌آل، باید از اندازه فایل‌های تصویری استفاده کنید که مطابق با آنچه که بالاترین کیفیت را در دستگاه‌های تلفن همراهی که سایت شما برای آنها بهینه‌سازی شده است تولید می‌کند، در حالی که مطمئن شوید که از آن نقطه کیفیت پایین‌تر نمی‌روید.
این یک عمل متعادل کننده ظریف است و برای رسیدن به نتایج دلخواه به فردی متخصص در بهینه سازی تصاویر نیاز دارد.
مقدار منابع مورد نیاز کلی DOM و مسیر رندر بحرانی را کاهش دهید
هر چه صفحه شما به منابع بیشتری برای رندر نیاز داشته باشد، سرعت دانلود صفحه شما بالاتر خواهد بود. برای پردازش یک صفحه وب هرگز نباید به بیش از 10 افزونه (حداکثر) و سه تا چهار فایل اسکریپت نیاز داشته باشید.
این نویسنده موقعیت هایی را دیده است که در آن 160 افزونه بارگذاری می شود و اندازه فایل صفحه 10 مگابایت است. اینجا مطلقاً جایی نیست که شما می خواهید باشید.
برای مؤثرترین کار، نظر نویسنده این است که صفحات در یک سایت وردپرس هرگز نباید از 150 تا 250 کیلوبایت تجاوز کنند - به طور متوسط - و نباید بیش از پنج تا هفت منبع (CSS، فونت خارجی در صورت نیاز، یک فایل تبلیغاتی، یک فایل جاوا اسکریپت و سه افزونه). اگر به موارد بیشتری نیاز دارید، ممکن است آنطور که فکر می کنید بهینه نباشید.
و صرفه جویی را دست کم نگیرید که استفاده از فونت های سیستم نسبت به فونت های وب خارجی شما را نجات می دهد.
صفحات خود را کوچک کنید
فرآیند کوچک سازی در صفحات شما شامل فشرده سازی فایل های شما به منظور صرفه جویی در فضا و در نتیجه کاهش زمان بارگذاری کلی صفحه است.
استفاده از کوچک‌سازی به‌عنوان یک فرآیند به شما کمک می‌کند تا از شر فضای سفید ناخواسته در کد خلاص شوید و آن کد را فشرده کنید تا حداقل فضای ممکن را اشغال کند.
در حالت ایده آل، بهترین فرآیند شامل هیچ پلاگینی نخواهد بود. شما می خواهید یک توسعه دهنده استخدام کنید تا به صورت دستی صفحات شما را کوچک کند.
اگر قبلاً با افزونه‌ها پر شده‌اید، اضافه کردن افزونه دیگری برای کوچک کردن صفحات شما ایده بدی است. در این موارد، شما می خواهید از یک توسعه دهنده در سطح حرفه ای استفاده کنید تا بهترین نتیجه را تضمین کنید.
اگر در حال حاضر حداقل پلاگین دارید، استفاده از یک توسعه دهنده حرفه ای برای این کار به شما کمک می کند تا زمان بارگذاری صفحه و امتیازات Core Web Vitals بهتری داشته باشید.
اگر حتماً باید از یک افزونه استفاده کنید، فقط مطمئن شوید که از آن به عنوان یک اقدام موقت استفاده کنید تا زمانی که بتوانید یک توسعه دهنده حرفه ای وارد آن شده و به صورت دستی کد شما را کوچک کند.
Mobile-First اینجاست. نیاز به اجرا به حد بحرانی رسیده است
با ورود فهرست اول موبایل گوگل، پیاده سازی وب سایت متقابل پلت فرم، چند دستگاهی و سازگار با یکدیگر اکنون به اولویت زیادی رسیده است.
این بدان معناست که هر چه بیشتر تاخیر داشته باشید، تنها پیاده‌سازی موبایلی بیشتر خواهد بود، اما پیاده‌سازی مناسب موبایل از بسیاری جهات برای شما هزینه خواهد داشت.
نه فقط رتبه بندی
اگر هنوز به موبایل نرسیده اید، چرا که نه؟
11 نکته و ترفند SEO برای بهبود فهرست بندی جستجو