Google Mobile-Friendly: створюємо ТЗ по «мобілізації» сайту

1. Google просто ускладнює життя SEO-шникам? Або це черговий хитрий хід, який змусить бізнес піти в контекстну...
2. Яким повинен бути сайт, щоб сподобатися Google?
3. На що вплине це оновлення?
4. Якщо сайт не адаптований до нових правил гри - все пропало?
5. А якщо на сайті сотні або тисячі сторінок?
6. Чи може бути сторінка частково Mobile-Friendly?
7. Як зробити сайт Mobile-Friendly?
8. Три методу зробити сторінку Mobile-Friendly
9. динамічний показ
10. мобільний піддомен
11. Чи вплине алгоритм на трафік контекстної реклами Google Adwords?
12. Коли Google перестане змінювати алгоритми і правила?
13. Створюємо ТЗ по розробці мобільної версії сайту
14. 1. Визначтеся з функціоналом
15. Складіть список сторінок, які слід залишити (створити).
16. Для кожної сторінки визначте, які елементи має сенс залишити, а які краще видалити, щоб не витрачати...
17. Будьте лаконічні
18. Знайдіть декілька мобільних сайтів, якими вам зручно користуватися, дизайн яких вам подобається.
19. 2. Дизайн
20. 3. Швидкість завантаження сайту
21. 4. Оцінка готового сайту

21 квітня Google офіційно викотив новий алгоритм ранжирування: оптимізовані для перегляду на мобільних пристроях сайти тепер мають перевагу при мобільному пошуку. Давайте розберемося, чи так страшні зміни в алгоритмі ранжирування Google, і що слід робити сайтовладельцам, щоб залишитися на плаву в світі мобільних пристроїв.

Що за дивовижний звір цей Mobile-Friendly? Фахівці з пошукового гіганта повідомляють, що ця зміна вплине на результати видачі більше, ніж чорно-білі алгоритми-попередники. є підстави думати, що зміниться не менше 11% результатів видачі. Втім, ми пильно стежили за оновленням - і ні на один з наших сайтів алгоритм не вплинув. Поки що не вплинув.

Google просто ускладнює життя SEO-шникам? Або це черговий хитрий хід, який змусить бізнес піти в контекстну рекламу?

Незважаючи на поширену думку, Google просто піклується про своїх користувачів. «Результати повинні бути релевантними, зручними для перегляду і всеосяжними» - ось головна заповідь пошукача. Не так давно представники Google оприлюднили статистику, згідно з якою в 10 країнах світу пошук з мобільних пристроїв перевищив пошук з десктопів. Простіше кажучи, інтернет стає мобільним. Користувачі шукають інформацію зі своїх смартфонів і хочуть знаходити її в зручному для мобільного екрану форматі.

Яким повинен бути сайт, щоб сподобатися Google?

Перевірте, щоб елементи дизайну і контент відповідали вимогам:

• Великий, читабельний шрифт;
• Великі, зручні для натискання з сенсорного екрану посилання;
• Зручне розташування блоків на сторінці;
• Менше довгого тексту, більше інтерактивного контенту (наприклад, відео-огляди замість цілої «вікіпедії» статей на сайті пластикових вікон).

На що вплине це оновлення?

• На ранжування при мобільному пошуку. Важливо: в Рунеті відсоток пошукових запитів з мобільних пристроїв досить невеликий. Бити на сполох не варто, але і сидіти наложу руки також: саме час працювати на перспективу.
• На окремі сторінки, але не на весь сайт.
• На всі сторінки на всіх мовах по всьому світу.

Як дізнатися, чи є ваш сайт Mobile-Friendly?

Google надає спеціальний сервіс Mobile-Friendly Test , За допомогою якого визначається зручність перегляду вашого сайту на мобільних екранах.

Крім цього, можна знайти свій сайт в пошуковій видачі і подивитися, чи варто перед сніпетів спеціальна позначка «Для мобільних». Цей знак якості - найкращий доказ, що сам Google розцінює сторінку, як адаптовану до мобільного перегляду.

Перевірити швидкість завантаження сайту на мобільному пристрої можна за допомогою ще одного інструменту Google - PageSpeed ​​Insights .

Але, навіть якщо результати даних трьох тестів вас обрадували, не думайте, що тільки через це сайт відразу ж переміститься в ТОП. Фахівці Google акцентують увагу на тому, що Mobile-Friendly - тільки один з факторів ранжирування, і нехтувати іншими в надії лише на симпатію пошукача перед мобільною версією не варто.

Якщо сайт не адаптований до нових правил гри - все пропало?

Ні звичайно. По-перше, новий алгоритм працює в режимі реального часу (на відміну від своїх попередників). Іноді замітка «Для мобільних» може запізнюватися, але, як правило, пошукова машина бере до уваги адаптивність сторінки до мобільних вже через 2-72 години. Так що все в ваших руках, дерзайте.

По-друге, інші чинники ранжирування нікуди не поділися. «Все, що нажито непосильною працею» залишається при вас, і у видачі на ПК ваш сайт не змінить своїх позицій.

Якщо значна частина органічного трафіку приходить до вас по брендовим запитам (назва вашої компанії, торгової марки, бренду і т.д.) - ваші позиції і на мобільних пристроях не зміняться.

А якщо на сайті сотні або тисячі сторінок?

Значить, адаптацію для мобільних необхідно починати з найважливіших сторінок. І далеко не завжди це головна сторінка: проаналізуйте, з яких сторінок відбувається найбільше продажів, яка сторінка приносить вам більше передплатників.

Чи може бути сторінка частково Mobile-Friendly?

Ні, сторінка або хороша для перегляду і використання на мобільних пристроях, або ні. Тут представники пошукового гіганта непохитні.

Як зробити сайт Mobile-Friendly?

Представники пошуковика акцентують увагу, що Mobile-Friendly - це спосіб взаємодії з користувачем, а не технічна реалізація. І хоча самі вони рекомендують використовувати адаптивні сайти (тобто сайт підлаштовується під пристрій, з якого відбувається візит), однак такий спосіб рішення не обов'язковий.

Три методу зробити сторінку Mobile-Friendly

Адаптивний веб-дизайн

Читайте також: Оптимізація сайтів для мобільних пристроїв: частина 1 , частина 2

Його суть полягає у використанні адаптивних css-стилів і команди @media. За допомогою цієї команди задаються розміри, позиціонування, видимість та інші параметри елементів сторінки. Однак не все можна зробити за допомогою CSS, тому CSS зазвичай використовують у поєднанні з JavaScript. Це вирішує найскладніші завдання в адаптації контенту.

переваги:

• Сторінка має однакову структуру для всіх версій девайсів, змінюється тільки зовнішній вигляд.
• Контент для всіх девайсів ідентичний, не дубльований для мобільної версії.
• Всі номери мають одне джерело, немає плутанини з піддоменів.

недоліки:

• Адаптивна верстка - це дуже трудомісткий процес і займає багато часу.
• Якщо до задачі підійти несерйозно, вийде провальний продукт, який відлякає користувача.
• З'являться додаткові скрипти і css, які збільшать час завантаження сторінки.
• Складність налагодження.

динамічний показ

На відміну від адаптивної верстки динамічний показ адаптується зміст сторінки за допомогою зовнішніх засобів, а робить це на сервері. Іншими словами, на сервері йде перевірка типу пристрою і після цього виводить те чи інше уявлення.

переваги:

• Готова сторінка, що не Требова додаткової обробки браузером.
• Менше скриптів і css, що прискорить завантаження сторінки.
• Можливість відключити непотрібні плагіни для мобільної версії, що також прискорить роботу сторінки.
• Даний тип використовує єдині посилання (як і в адаптивної верстці).

недоліки:

• Більше навантаження на сервер за рахунок додаткових умов.
• Більше файлів на сервері.
• Верстка сайту для мобільної версії здійснюється практично з нуля.

мобільний піддомен

Мобільна версія сайту розташовується на окремому піддомені, зазвичай у вигляді «m.site.com». переваги:

• Можна розробити мобільний сайт, викинувши непотрібний для нього функціонал (якісь функції доступні на ПК не знадобляться на смартфоні), це дозволить йому швидко працювати.

недоліки:

• Різні посилання на сторінки з одним контентом.
• Дублювання даних, що незручно при оновленні.
• Необхідна двостороння анотація, щоб Google зрозумів зв'язок між аналогічним контентом на сторінці для десктопів і мобільних пристроїв.

Чи вплине алгоритм на трафік контекстної реклами Google Adwords?

Ні, новий алгоритм впливає тільки на органічний пошук. Правда, сервіс Adwords самостійно оцінює якість сторінки, на яку приземляється користувач, але це не відноситься до алгоритму ранжирування органічної видачі.

Коли Google перестане змінювати алгоритми і правила?

Настав час постійних і швидких змін в інтернет-технологіях. Фахівці Google прагнуть зробити досвід користувача в своїй системі максимально зручним, а, значить, веб-майстри та власники сайтів повинні також дотримуватися цього принципу і вносити зміни часто. Будьте готові, що правки, внесені в сайт сьогодні, застаріють вже через рік. Сайти повинні швидко еволюціонувати, адже виживають в інтернет-середовищі тільки найсильніші.

Створюємо ТЗ по розробці мобільної версії сайту

Рекомендації нижче призначені власникам сайтів, які планують доручити створення мобільної версії програмісту, але при цьому хочуть:

• бути в курсі «про що йдеться»,
• знати, як правильно донести до програміста своє бачення сайту,
• вміти перевірити виконану роботу.

1. Визначтеся з функціоналом

Задайте собі питання: мені потрібна мобільна версія - для чого?

Щоб користувач міг зробити повноцінну покупку через корзину або досить взяти у нього номер телефону для передзвону?

Складіть список сторінок, які слід залишити (створити).

Основна версія Для мобільних Головна + Каталог + Сторінка товару + Новини - Партнери - Кошик + Контакти + Відгуки +

Для кожної сторінки визначте, які елементи має сенс залишити, а які краще видалити, щоб не витрачати дорогоцінний місце.

Сторінка Елемент Ми залишаємо? Головна Пошук + «Дзвонилка» + Головне меню + Лого з перенаправленням на головну + Слайдер - Галерея - Текст (стаття) - Відео +

Будьте лаконічні

Елемент Складові Головне меню Про нас Послуги Прайс

рекомендації:

• Чи не захаращувати шапку непотрібними функціями. Зазвичай туди поміщають кнопку виклику головного меню, лого з перенаправленням на головну і кнопку «Назад».
• Випадають меню повинні містити тільки найголовніше, тому що багато інформації на невеликому екрані не поміститься. Меню повинно бути повністю видно на одному екрані.
• Визначити допоміжні блоки (блоки які виїжджають зліва чи справа, наприклад, фільтр по товарах).

Знайдіть декілька мобільних сайтів, якими вам зручно користуватися, дизайн яких вам подобається.

Крадіть ідеї, як художник.

Сайт Що подобається Site1.com Великі кнопки, відео на головній Site2.com Зручна навігація, кнопка «Показати ще» Site3.com Форма для контактів, фільтр в що виїжджає блоці

2. Дизайн

Приблизний дизайн можна намалювати за допомогою онлайн-сервісу Moqups .

Створіть за чверть години приблизний макет, це допоможе вам швидко знайти спільну мову з програмістом.

Рекомендації з розробки дизайну:

• Найменша ширина екрану, на якій сайт повинен відображатися коректно - 320 рх.
• Потрібно продумати такий дизайн, при якому всі активні елементи розташовуються на достатній відстані один від одного. Користувач повинен мати можливість легко «тапа» по обраної кнопці (не зачіпаючи зайві елементи).
• Не повинно бути прокручувань по ширині.
• Сайт повинен мати читається шрифт розміром не менше 12px.

3. Швидкість завантаження сайту

Швидкість завантаження залежить від розміру (ваги) сторінки: якості картинок (для моб. Версії якість картинок повинно бути помірним), що підключаються скриптів і стилів.

«Гугл» рекомендує розміщувати підключення і стилі рівномірно по всій сторінці, щоб відображення не зависає на завантаженні цих файлів.

Один зі способів збільшення швидкості - це правильна конфігурація файлу robots.txt, в якому може бути прописана блокування файлів js, css або картинок.

Включивши кешування браузером, можна значно збільшити швидкість завантаження сторінок. Функція кешування включається в хостинг-акаунті або прописується в настройках сервера.

Важливо пам'ятати: чим менше важить графіка, тим швидше вантажиться сайт. А, значить, відсоток відмов (доглядів з сайту через лічені секунди) падає.

рекомендації:

• Іконки (якщо вони мають просту графіку) повинні бути векторними.
• Для того, щоб знайти вузькі (читай - важкі) місця сайту використовуйте Google PageSpeed ​​Insights .
• Інструменти для зменшення ваги зображень:
  • Jpegtran - стискає картинку і видаляє метадані
  • Pngquant - інструмент для зменшення ваги зображень PNG з втратою якості (зменшується кількість кольорів)
  • Pngcrush , Tinypng - сервіси для стиснення PNG без втрат якості
  • Jpegmini - хмарний сервіс по зменшенню ваги картинки на 20-30%

4. Оцінка готового сайту

• Оцінка на швидку руку: «все добре» або «все погано».
• проведіть експрес-тестування .
• Більш детальну оцінку можна отримати в Google PageSpeed ​​Insights.
• Головний доказ того, що Google схвалив мобільну версію - напис «Для мобільних» перед сніпетів вашого сайту в пошуковій видачі.

PS Ідеального результату в тесті Google домогтися неможливо. Навіть мобільна версія пошуковика не дає 100% показника швидкості, а на стартовій сторінці Google Developers графіку можна стиснути на 71%.

Вдалою оптимізації!