Мобильный SEO: как создать и оптимизировать мобильный сайт

1. Важность мобильного присутствия.
2. Решения для построения мобильного присутствия.
3. 1. Отзывчивый веб-дизайн.
4. 2. Динамическое Обслуживание
5. 3. Отдельный мобильный сайт
6. Перенаправляет лучшие практики сопоставления для отдельных мобильных сайтов.
7. В заключение: какая альтернатива лучше?

Я из iPhone, и я ищу отель в центре Рима, поэтому я ищу в Google "hotel roma centro" и начинаю изучать отели, которые привлекают мое внимание к первой странице результатов поиска. На данный момент я исключаю сайты бронирования и указываю прямо на те, которые выделены фрагментами звезд, где, после прочтения некоторых положительных отзывов, я решаю посетить сайт отелей.

Ситуация, которая представляется мне при исследовании первых 8 сайтов с богатыми фрагментами, заключается в том, что только 3 из 8 имеют мобильное присутствие. Оставшаяся часть сайтов делает просмотр настольной версии зачастую неразборчивым.

Позвольте мне прояснить, что я принял во внимание сектор туризма, который, хотя и является конкурентоспособным, является, пожалуй, одним из наиболее «оптимизированных» с мобильной точки зрения. Во многих других секторах, даже конкурентных, ситуация хуже. Например, я мог бы рассказать вам о некоторых крупных международных блогах, которые проповедуют SEO, но не имеют адаптивной и / или мобильной версии своего блога. 🙂

Важность мобильного присутствия.

Почему становится необходимым иметь мобильное присутствие? Ну, во-первых, потому что уже почти десять лет мы говорим о мебельном буме, его важности и т. Д. и т.д. о буме, они, вероятно, говорили об этом немного раньше, но с прошлого года это стало реальностью, представленной постоянно растущими цифрами, и это можно проверить из аккаунтов Google Analytics. Возьмем, к примеру, Facebook: вероятно, доступ к веб-сайтам, поступающим из Facebook в этом году, будет превышать доступ с сайтов.

Но маркетинговая сторона, если говорить о трафике, что должно подтолкнуть все компании к инвестированию в мобильные устройства, - это пункты, перечисленные в поиске, опубликованном в прошлом году самой Google, и, в итоге, переходят к следующим слайдам.

1. потребители ищут на мобильных сайтах в течение всего процесса покупки.

2. Потребители, как правило, ищут местоположение магазина на своем мобильном телефоне.

3. 93% пользователей, которые используют мобильный телефон для поиска, приходят, чтобы купить.

Не следует недооценивать тот факт, что все больше и больше пользователей покупают (и покупают) напрямую со своих мобильных устройств. Вы можете прочитать остальное в Think Insights от Google ,

Все это противоречит итальянской реальности; Сколько ресторанов имеют мобильную версию своего сайта в Италии? Очень мало!

Решения для построения мобильного присутствия.

С технической точки зрения дизайн мобильного сайта можно создать, выбрав один из следующих трех вариантов:

1. Адаптивный дизайн;

2. Динамическое обслуживание;

3. Отдельный сайт с выделенным URL-адресом.

Я буду анализировать альтернативы по очереди, выделяя их плюсы и минусы и предоставляя лучшие практики для оптимизации SEO (мобильные SEO).

1. Отзывчивый веб-дизайн.

кредитное изображение: SEL

Главной особенностью адаптивного дизайна является то, что с любого устройства, которое вы просматриваете на сайте, макет будет адаптироваться к размеру экрана . Отзывчивый веб-дизайн, помимо того, что предпочтительная альтернатива для строительства мобильного сайта является рекомендованным самим Google.

Так, например, действуя непосредственно в файле css, используя медиа-запросы, мы можем определить, как шаблон будет отображаться на устройствах iPhone, даже в альбомном режиме.

5 6 7 8 9 @ media screen и (max-width: 600px) {h1 {font: 24px / 50px "Helvetica Neue", Helvetica, Arial, без засечек; }}

@ media screen и (max-width: 600px) {h1 {font: 24px / 50px "Helvetica Neue", Helvetica, Arial, без засечек; }}

В приведенном примере код полезен для изменения размера шрифта.

Преимущества адаптивного дизайна:

• наличие единого HTML-шаблона (более уникальный сайт и, следовательно, уникальная институциональная идентичность бренда в сети);
• один файл css, благодаря медиа-запросам;
• нет скрипта для распознавания устройства;
• уникальная SEO оптимизация

Среди недостатков отзывчивости часто читают, что время загрузки одного шаблона велико по сравнению со строительством отдельного сайта. На самом деле это ложный миф, потому что все зависит от того, что мы собираемся загрузить. Если мы не будем показывать пользователям контент, который бесполезен для их потребностей в просмотре, например, рекламу и / или видео, время загрузки не будет высоким, и мы будем отдавать приоритет мобильному контенту выше сгиба .

источник изображения: feedthebot - установить приоритетность видимого контента

2. Динамическое Обслуживание

кредитное изображение: www.ayima.com

Благодаря динамическому обслуживанию у нас все еще есть один URL-адрес, по которому содержимое будет загружаться с мобильного телефона, но сервер перехватывает тип устройства, которое использует пользователь и с которого происходит запрос, и возвращает наиболее подходящий контент для типа устройство . Разница с адаптивным дизайном состоит в том, что это обеспечивает больше шаблонов HTML и CSS в зависимости от устройства, отправляющего запрос.

Среди преимуществ динамического обслуживания, безусловно, есть возможность предлагать более персонализированные шаблоны в зависимости от устройства и, что касается адаптивного дизайна, наличие единого URL-адреса и институциональной идентичности бренда. Среди недостатков - трудности с реализацией, так как вам придется вооружиться хорошим программистом, который будет изменять заголовок HTTP, чтобы он правильно отвечал на запросы.

9 10 11 12 13 14 15 16 17 GET / page-1 HTTP / 1.1 Хост: www.example.com (... остальные заголовки HTTP-запросов ...) HTTP / 1.1 200 OK Тип содержимого: text / html Варьируется : User-Agent Content-Length: 5710 (... остальные заголовки ответа HTTP ...)

GET / page-1 HTTP / 1.1 Хост: www.example.com (... остальные заголовки HTTP-запросов ...) HTTP / 1.1 200 OK Тип контента: text / html Варьируется: Длина контента агента пользователя: 5710 (... остальные заголовки ответа HTTP ...)

3. Отдельный мобильный сайт

Третий вариант - создать отдельный мобильный сайт под другим URL . Это, как я вижу, одна из широко используемых альтернатив. На мой взгляд, это самая сложная и дорогая альтернатива, потому что, помимо создания и поддержки двух разных сайтов (например, электронной коммерции, когда вам придется обновлять линейку продуктов на настольном сайте, вам придется обновлять ее и на страницах Мобильный сайт), требует ряда дополнительных действий, направленных на то, чтобы боты поняли, что вы сталкиваетесь с мобильной версией сайта.

Среди преимуществ отдельный сайт, безусловно, предлагает полную настройку мобильного просмотра.

Перенаправляет лучшие практики сопоставления для отдельных мобильных сайтов.

Прежде всего, мы должны обратить внимание на правильность перенаправления . Случалось ли когда-нибудь, например, сохранить мобильный URL-адрес, отдельный мобильный сайт, а затем снова открыть его дома с рабочего стола и увидеть показанную там мобильную версию? (на рабочем столе!). Или наоборот откройте URL-адрес сайта со своего мобильного телефона и увидите, что вы загружаете его версию для настольного компьютера (и, возможно, вы также знали о существовании мобильной версии сайта).

Итак, давайте обратим внимание пользователей, которые запрашивают URL-адрес веб-сайта для настольных компьютеров, на соответствующие им мобильные URL-адреса, а также пользователей, которые просматривают мобильный телефон и запрашивают мобильный URL-адрес, в его настольную версию .

Для управления перенаправлениями мы рекомендуем написать скрипт, который будет вставлен в заголовок, который перехватывает устройство и загружает правильную версию.

Так что давайте не будем видеть такие ситуации загруженными на рабочем столе (а мы не говорим о ситарелли, а!)

Что может быть хуже, чем перенаправление пользователя (и бота) на правильный URL-адрес? Перенаправьте его на домашнюю страницу ! Если URL-адрес, запрошенный пользователем, не имеет соответствующей мобильной версии, всегда лучше показать ему версию запрошенного URL-адреса для ПК . Перенаправлять его на домашнюю страницу бесполезно, потому что это не домашняя страница, которую пользователь запрашивает в то время.

Кроме того, Google рекомендует перенаправлять пользователей планшетов на настольные версии веб-сайтов, поскольку собранные данные показали, что последняя является предпочтительной версией при просмотре с планшета.

Также обратите внимание на время загрузки мобильных перенаправлений , лучше, чтобы они были как можно короче. В этом исследовании было показано, как добавление даже одной секунды ко времени загрузки мобильного контента очень сильно и негативно влияет на просмотры страниц, частоту отказа и конверсии.

кредиты: webperformancetoday
Что касается скорости загрузки, всегда следите за советами по производительности и оптимизации, предоставляемыми такими инструментами, как Google PageSpeed , которые предоставляют услуги и консультации даже на мобильных устройствах.

Одна вещь, которую я никогда не нашел в наличии и которую я рекомендую программистам, с которыми я работаю, это добавление двух мета-тегов в настольную и мобильную версии URL сайта.

В заголовках мобильных версий URL будет необходимо добавить rel = "canonical", который указывает на настольную версию того же URL. Это, в дополнение к консолидации индексации и ранжирования страниц, позволит Google избежать потенциальных проблем дублирования контента.

1 <link rel = "canonical" href = "http://www.example.com/page-1">

<link rel = "canonical" href = "http://www.example.com/page-1">

Версия URL для рабочего стола должна вместо этого содержать rel = alternate media , чтобы отобразить URL для рабочего стола и мобильного телефона.

2 3 <link rel = "alternate" media = "only screen и (max-width: 640px)" href = "http://m.example.com/page-1">

<link rel = "alternate" media = "только экран и (max-width: 640px)" href = "http://m.example.com/page-1">

Наконец, если у компании также есть мобильное приложение, мы не показываем гигантское всплывающее окно пользователю, который приглашает его загрузить приложение. Если необходимо, давайте покажем вам содержимое страницы и ссылку для загрузки приложения , как в примере ниже.

Вы хотите создать мобильный сайт, иметь отзывчивый или оптимизировать свой сайт для мобильного SEO ? Мы готовы выполнить ваш проект!

Свяжитесь с нами!

В заключение: какая альтернатива лучше?

Скажем так, это во многом зависит от целей мобильного присутствия . Сайт является показательным, информативным, и цель состоит в том, чтобы позволить чтение содержимого? Тогда адаптивный сайт для вас. В случае более сложных проектов, целью которых является преобразование, мы думаем об электронной коммерции, возможно, было бы лучше разработать отдельный сайт. В любом случае, однако, все должно включать в себя подробный анализ поисковых запросов пользователя, прохождение через Google Analytics и сравнение использования и поведения устройств на месте.

источник: http://ssl.gstatic.com/think/docs/creating-moments-that-matter-infographic_infographics.pdf

Похожие

Комментарии