Сайт для мобільних пристроїв - створення і сео оптимізація

1. Способи створення сайту для мобільних пристроїв
2. адаптивний дизайн
3. Динамічна підстановка контенту
4. Самостійна мобільна версія
5. Який із способів створення сайту для мобільних пристроїв вибрати
6. SEO оптимізація сайтів для мобільних пристроїв
7. висновок

Ось і прийшов час М - мобільна версія веб-сайту з ряду необов'язкових, перейшла в ранг необхідних. Адже частка відвідувачів, що приходять на інтернет-ресурс з мобільних пристроїв, неухильно зростає і в середньому вже становить 20%. А для деяких веб-сайтів перевалила і за половіну.По оцінці пошукового гіганта Google вже зовсім скоро ОДИН МІЛЬЯРД людей в інтернет в основному будуть заходити через свої смартфони. А скільки це буде робити час від часу? Та практично все! Тому зараз однією з найактуальніших завдань інтернет-маркетингу можна вважати створення якісної мобільної версії сайту і її сео просування. До речі, Гугл вже офіційно заявив про істотний вплив факторів mobile-friendly на результати видачі для мобільних пристроїв.

Звичайна і мобільна версії сайту

Способи створення сайту для мобільних пристроїв

При аналізі цих способів будемо враховувати складність їх реалізації, а також витрати на їх сео просування.

адаптивний дизайн

Адаптивний означає те, що зайшовши по одному і тому ж URL, власник десктопа і мобільного пристрою будуть бачити один і той же контент, тільки показ його буде пристосований для конкретного пристрою. Простіше кажучи, адаптивна мобільна версія веб - це представлена ​​в більш дрібному масштабі основна його версія.

Існує досить велика кількість плагінів для різних CMS, які адаптують веб-сайт для перегляду через мобільні пристрої. Наприклад, для популярного движка WordPress це WPtouch, а для Joomla! - MobileTemplate, MobileJoomla, TapThemeі т. Д.

переваги:

1. Один і той же URL для деськтопной і мобільної версії. Адже це ж один сайт, один код, який по-різному візуалізується на стаціонарних і мобільних пристроях. Єдиний URL означає, що сео оптимізацією необхідно займатися для ОДНОГО інтернет-ресурсу і просувати необхідно тільки його, що істотно скорочується витрати на це. Відпадають питання з дублюванням контенту (що дуже не люблять пошуковики) і поділом посилань між різними версіями сайту.
2. Не треба розробляти новий HTML-код для мобільної версії. Встановив потрібний плагін і все.

недоліки:

1. Практично завжди погіршується юзабіліті сайту. Спробуйте перейти зі сторінки на сторінку, якщо елементи навігації відстоять один від одного на відстані менше ширини пальця! І серфінг по інтернет-ресурсу стає схожим на яхтинг в шторм, коли зводить пальці від напруги.
2. Погіршується дизайн. Одна справа, коли таблиці, картинки і текст гармонізовані для показу на великому екрані і з усім по-іншому це виглядає, коли вони стиснуті в кілька разів. Тому часто потрібно редизайн сайту. А це вже майже, що його розробка.
3. Значне збільшення часу завантаження сторінок. Все ж завантажити картинку в кілька мегабайт на швидкості 100 Мбіт / с набагато швидше, ніж робити це в 2G мережі і в місці зі слабким сигналом. І не забуваємо про скрипти, які значно збільшують час завантаження сторінки, але абсолютно не працюють в мобільній версії. До речі, це є одним з істотних аргументів проти створення мобільної версії інтернет-магазину за допомогою адаптивного дизайну. Адже багато функцій в цьому випадку просто не будуть працювати!
4. Безальтернативність. Якщо з якихось причин вас не влаштовує вигляд сайту на вашому смартфоні, перейти на мобільну версію не вийде. Її просто немає!

І ще про одне нестачі хотілося б сказати. Мобільні пристрої досить сильно впливають на сприйняття інформації користувачем. Погодьтеся, що одна справа читати головну сторінку з розміром статті в 3000 знаків, прикрашеної красивою графікою, а то і відео на ноутбуці з діагоналлю 17 »і зовсім інша - робити це на смартфоні нехай і з 5-дюймовим екраном - дуже виснажливе заняття! Іншими словами, для мобільних пристроїв необхідний інший контент - більш лаконічний, не обтяжений важкою графікою і вже тим більше відео. Звичайно, в цьому випадку частина інформації залишиться за бортом. Розумно, звичайно, за бортом мобільної версії залишити все найменш затребуване.

Динамічна підстановка контенту

Суть цього способу полягає в тому, що сервер розуміє, з якого пристрою відбувається запит, і під одним і тим же URL користувачам смартфонів і ПК показує РІЗНІ версії сторінок.

переваги:

1. URL залишається незмінним, тому не треба розпорошувати зусилля при сео просуванні. Знову ж, відпадають питання з роздвоєнням посилальної маси і дублюванням контенту. Навіть якщо для мобільної версії сторінки буде використана просто частина текстового контенту зі стаціонарної версії, в очах пошукових систем це не є дублюванням, так як і вся стаття, і уривок з неї будуть розташовані на одній сторінці.
2. З'являється можливість створювати зручний інтерфейс і контент, заточений під мобільні пристрої. А це і хороше юзабіліті, і прийнятний час завантаження сторінки, і добре сприймається контент. Все це істотно впливає на віддачу веб - рівень продажів (якщо мова йде про інтернет-магазині), часу, проведеного на веб-ресурсі відвідувачами і т. Д.

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

недоліки:

1. Необхідність розробки іншого варіанту коду HTML і додаткового контенту.
2. Складність розробки і висока вартість обслуговування.
3. Помилки при визначенні виду пристрою. Тобто сервер може не розпізнати смартфон користувача, як мобільний пристрій і відкриє десктопну версію.

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

Основні рекомендації по сео оптимізації:

1. Використовуйте HTTP-заголовки Vary, щоб роботу Google для смартфонів було легше знаходити мобільний контент.
2. Перевірте HTML-код за допомогою опції Fetchas Google в вWebmaster Tools і за допомогою емуляторів - Mobile Phone Emulator, Opera Mini Simulator та ін.

Самостійна мобільна версія

У цьому випадку на піддомені m. (Mobile) створюється САМОСТІЙНИЙ сайт для мобільних пристроїв (наприклад, m.rambler.ru). Перехід зі сторінок веб для ПК на сайт для мобільних пристроїв (і назад) здійснюється за допомогою 301-го редіректу. Тобто якщо ви вирішили дізнатися погоду і набрали в смартфоні weather.rambler.ru, то будете автоматично переадресовані на сторінку m.weather.rambler.ru.

переваги:

1. Простота HTML-коду в порівнянні з першими двома способами.
2. Зручний, адаптований під мобільні пристрої інтерфейс.
3. Показ контенту, адаптованого для мобільних пристроїв.

недоліки:

1. Поділ посилань між двома сайтами.
2. Необхідність сео просування відразу двох сайтів.
3. Проблема дубльованого контенту. У рекомендаціях по сео оптимізації пропонується використовувати атрибут rel = "canonical» тега, створеного спеціально для вказівки бажаної (канонічної) сторінки. Тобто на сторінках сайту для ПК використовуєте атрибут rel = "alternate» для вказівки на відповідні сторінки сайту для мобільних пристроїв (наприклад, <link rel = "alternate» a href = "http://weather.rambler.ru» />) . А в мобільному сайті атрибут rel = "canonical» (наприклад, наприклад, <link rel = "canonical» a href = "http://m.weather.rambler.ru» />). Але є одне але. У роз'ясненнях Яндекса написано, що, по-перше, що атрибут rel = "canonical» не є суворої директивою і може бути проігноровано. А по-друге, вказані випадки, коли найвірогідніше це станеться. І один з них - вказівка ​​в якості адреси канонічної сторінки URL, розташованої в піддомені. Так що проблему сдублірованние контентом залишаємо в недоліках цього виду сайту для мобільних пристроїв.
   І все ж підсолодимо пігулку. Хоча в даному способі створення сайту для мобільних пристроїв присутній необхідність сео просування і його, і його десктопного колеги, в цьому є певна ... перевага. Адже використовується 301 редирект, який повністю передає вагу сторінок. Тобто, просуваючи десктопний варіант, ви одночасно просуваєте і мобільний. І навпаки. Такий своєрідний індукований ефект.

Основні рекомендації по сео оптимізації:

1. Максимально зменшите ймовірність появи дубльованого контенту (див. П. 3 недоліків самостійного мобільної версії сайту).
2. Для мобільного сайту створіть ту ж структуру, що і для деськтопной версії і обов'язково зробіть карту сайту (XML Sitemap).
3. Перевірте HTML-код за допомогою емуляторів.
4. З кожної сторінки сайту для мобільних пристроїв зробіть посилання на відповідну сторінку деськтопной версії. Тільки саме на відповідну, а не на головну.

Який із способів створення сайту для мобільних пристроїв вибрати

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

Для великих веб-ресурсів необхідно використовувати або спосіб динамічної підстановки контенту, або мобільну версію сайту. Наприклад, найбільший інтернет-магазин Amazon використовує мобільну версію, а сайт CNN - динамічну підстановку контенту. Вище представлений алгоритм (не беззаперечний!) По вибору способу створення сайту для мобільних пристроїв.

SEO оптимізація сайтів для мобільних пристроїв

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

1. За допомогою сервісу www.google.com/webmasters/tools/mobile-friendly/. Вводите в спеціальне поле URL сторінки і через кілька секунд отримуєте результат.

Цей сайт, на думку Google, оптимізований під мобільні пристрої А цей немає

2. За допомогою SE Ranking . Причому є два набори інструментів для аналізу:

1. Для оперативного виявлення помилок за критеріями mobile-friendly за шістьма критеріями:
   • оптимізація для мобільних пристроїв;
   • наявність заданої області перегляду для мобільних пристроїв;
   • сумісність плагінів;
   • розміщення посилань;
   • розмір шрифту;
   • ширина тематичної області.
2. Практичний посібник для усунення знайдених помилок.

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

Вердикт Google і SE Ranking по сайтам збігаються:

Іншими обов'язковими перевірками при сео оптимізації сайту для мобільних пристроїв є:

1. Пошук сторінок, які видають помилки при скануванні гугловських роботом (Google bot). Виконується це за допомогою сервісу Google Webmaster Tools (Сканування -> Помилки сканування).
2. Коректність аналізу сторінок Google bot - Google Webmaster Tools (Сканування -> Переглянути як Google bot).
3. Швидкість завантаження сторінок (особливо важливо для адаптивного сайту). Виконується за допомогою Гуглівского сервісу Page Speed ​​Insights.

висновок

У цій статті ми показали можливі шляхи створення сайту длямобільних пристроїв, а також інструменти для його сео оптимізації. Як бачите, для більшості інтернет-ресурсів перехід на мобільність великих труднощів не викликає. Тому, нехтуючи цим питанням, ви практично на рівному місці не добирає і трафік, і прибуток. Ще раз - годину М вже настав!

Перегляди: 3 314