Адаптивный веб-дизайн, SEO и мобильные сайты

1. Параметры мобильного сайта
2. Адаптивный веб-дизайн и SEO
3. Отзывчивый веб-дизайн
4. Специфичный для устройства HTML
5. Должны ли вы пойти отзывчивым?

Опубликовано в 14: 14 в Веб-дизайн от Маркус Миллер

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

Эта статья даст вам обзор лучших практик для дизайна мобильных телефонов и смартфонов с точки зрения поисковой оптимизации и пользовательского опыта. Мы предоставим краткий обзор преимуществ, затрат и вариантов, чтобы реагировать!

Параметры мобильного сайта

При создании сайтов, ориентированных на мобильные телефоны или, в частности, на смартфоны (поскольку большинство мобильных телефонов теперь попадают в эту категорию, кроме моих пап, но это совсем другая история) , у вас есть три основных варианта:

1. Адаптивный веб-дизайн - это новый стиль дизайна, который возвращает тот же контент, но форматирует его для конкретного устройства, так что теоретически взаимодействие максимально близко, а контент одинаков. Это рекомендуемая в настоящее время конфигурация Google (1)

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

3. Отдельный мобильный сайт - совершенно отдельный мобильный сайт на другом наборе страниц. Это не рекомендуется.

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

В конечном итоге, если вы хотите генерировать трафик из поиска, имеет смысл следовать рекомендациям, изложенным Google, как и все Гугл очень хочет из его поисковой системы, чтобы вернуть наилучшие возможные результаты для своих пользователей. Итак, как это относится к мобильному SEO? Что ж, если опыт работы с настольными и мобильными устройствами отличается, то рейтинг (рейтинг) вашей страницы для мобильной версии вашего сайта не должен быть таким же, как для настольной версии вашего сайта.

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

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

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

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

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

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

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

Специфичный для устройства HTML

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

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

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

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

Должны ли вы пойти отзывчивым?

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

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

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

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

Мой взять? Да, если вы можете, будьте отзывчивы, он получил одобрение SEO от Google и предоставляет наиболее согласованные возможности для ваших пользователей на многих устройствах, которые они используют для доступа в Интернет. Кроме того, если у вас большой сайт и вы используете несколько сайтов для пользователей настольных компьютеров, планшетов и смартфонов, то адаптация может сэкономить вам значительное количество времени и усилий (денег).

Есть вопросы?

Есть вопросы? Нужен ли дизайн вашего сайта с адаптивным макетом? Оставьте комментарий ниже или отправить мне письмо Я всегда «отзывчивый» и рад помочь. О, и, пожалуйста, поделитесь статьей, если она показалась вам полезной. 🙂

Рекомендации

1. Рекомендации Google по созданию сайтов для смартфонов
http://googlewebmastercentral.blogspot.co.uk/2012/06/recommendations-for-building-smartphone.html

2. Руководство разработчика Google по созданию сайтов, оптимизированных для мобильных устройств.
https://developers.google.com/webmasters/smartphone-sites/

Похожие

Комментарии