Окончательное руководство по адаптивному дизайну и SEO

1. Адаптивный дизайн помогает SEO?
2. Влияет ли на скорость конверсии адаптивный дизайн?
3. Как я могу преобразовать мой сайт в адаптивный дизайн?
4. Что происходит с поддоменом моего мобильного сайта?
5. Адаптивный дизайн для SEO, 6 причин, по которым вам нужно переключиться
6. Один URL лучше многих
7. Нет двухстороннего перенаправления
8. Нет пропущенных мобильных страниц
9. Те же рамки и код SEO
10. Одна учетная запись для инструментов для веб-мастеров
11. План на будущее

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

Окончательное руководство по адаптивному дизайну и SEO

Адаптивный дизайн помогает SEO?

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

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

Мэтт Каттс от Google рекомендует использовать адаптивный дизайн с указанием «Это самый умный путь для SEO» по сравнению с мобильным сайтом, потому что все обрабатывается с одного URL-адреса, а не делит Page Rank между двумя сайтами. По сути, у адаптивного сайта меньше недостатков, так как проще устранить разделенный рейтинг страницы, дублировать ошибки в содержании и легче управлять.

Влияет ли на скорость конверсии адаптивный дизайн?

С ростом производительности пользователей благодаря адаптивному дизайну веб-сайты отмечают увеличение коэффициентов конверсии. Крупные компании, такие как State Farm и Career Builder, сообщают о резком увеличении коэффициента конверсии после смены дизайна сайта. На самом деле, State Farm в твиттере повысил коэффициент конверсии на всех устройствах на 56 процентов, в то время как Career Builder написал, что их коэффициент конверсии вырос более чем на 20 процентов.

Что движет повышенными коэффициентами конверсии? Ну, мы все знаем, что пользователи покинут мобильный сайт в течение нескольких секунд если он не работает правильно. Поэтому отзывчивый сайт будет препятствовать вашим пользователям обращаться к вашим конкурентам, поскольку они могут легко использовать ваш сайт; Таким образом, улучшение конверсии, продаж и доходов. Например, бренд одежды O'Neill Clothing опубликовал результаты своих метрик после 3 недель перехода на адаптивный дизайн. За это время их коэффициент конверсии для iPhone / iPad увеличился почти на 66 процентов, в то время как их конверсия с устройств Android выросла на 407 процентов. В результате их транзакции с iPhone / iPad выросли почти на 113%, а на Android - на 333%. Оба этих фактора привели к резкому увеличению дохода на 101% среди iPhone / iPad и 591% на Android.

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

Как я могу преобразовать мой сайт в адаптивный дизайн?

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

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

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

После того, как у вас есть фреймворк, вам нужно решить, собираетесь ли вы использовать новый шаблон в целом или обновить существующий код. Начиная с нуля, более длительный; однако обновление нового кода может быть сложным, так как вам нужно будет удалить ненужную разметку HTML, CSS и JavaScript, которые становятся неактуальными из-за новой инфраструктуры, с которой вы работаете. Если вы оставите эти аспекты, вес вашего сайта будет тяжелее, что может замедлить скорость сайта , Вам нужно будет полностью пройтись по своему коду и заменить любые области, которые не имеют отношения к адаптивной теме.

Если вы решите начать с нуля, вам нужно добавить свой CSS-фреймворк и Файлы JavaScript на ваш новый шаблон. Затем можно скопировать существующие изображения, глобальные стили, цвета, стили ссылок, Jquery, пользовательские файлы JavaScript и т. Д., За исключением кода, который не относится к адаптивному шаблону.

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

Что происходит с поддоменом моего мобильного сайта?

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

Вот что Google предлагает переместить два URL в один:

1. Удалите перенаправления и HTTP-заголовок Vary: user-agent, который был у вас на URL-адресе рабочего стола для пользователей смартфонов (если используется).
2. Удалите двунаправленные аннотации, если вы использовали их на своих настольных ПК и смартфонах.
3. Перенаправьте отдельные URL-адреса смартфонов на URL-адреса своего рабочего стола, используя перенаправления HTTP на стороне сервера 302 (мы рекомендуем не использовать перенаправления JavaScript). Убедитесь, что робот Googlebot может сканировать эти перенаправления и не блокируется директивами robots.txt. Вы можете использовать « Инструмент "Получить как Google" в Google Webmaster Tools, чтобы проверить это.
4. Настройте новый макет страницы или измените дизайн своего основного сайта и убедитесь, что мы можем сканировать важные файлы, такие как CSS, JS и изображения, чтобы мы могли распознать, что сайт отзывчивый.

Или, если у вас есть несколько мобильных URL-адресов, которые необходимо объединить в один URL-адрес, Google рекомендует использовать динамическое обслуживание:

1. Удалите перенаправления, которые вы имели на своем рабочем столе URL для пользователей смартфонов (если используются).
2. Удалите двунаправленные аннотации, если вы использовали их на своих настольных ПК и смартфонах.
3. Перенаправьте отдельные URL-адреса смартфонов на URL-адреса своего рабочего стола, используя перенаправления HTTP на стороне сервера 302 (мы рекомендуем не использовать перенаправления JavaScript). Убедитесь, что робот Googlebot может сканировать эти перенаправления и не блокируется директивами robots.txt.
4. Настройте HTTP-заголовок Vary: user-agent (если у вас его еще нет) на целевом URL-адресе, чтобы сообщить роботу Googlebot для смартфона сканировать ваши страницы и таким образом распознавать дружественный для вашего смартфона характер вашего сайта. Заголовок Vary: user-agent поможет предоставить пользователям соответствующий контент в соответствии с их user-agent.
5. Обновите свой строка user-agent и добавить Googlebot для смартфона. Имейте в виду, что пользовательский агент Googlebot для смартфонов идентифицирует себя как iPhone. Относись к этому как к такому.

Обязательно следите за любыми заблокированными активами страницы, заблокированными перенаправлениями или ошибочными перенаправлениями при консолидации ваших URL-адресов.

Адаптивный дизайн для SEO, 6 причин, по которым вам нужно переключиться

Google говорит, что есть три варианта мобильного SEO. Это мобильные и настольные сайты, отличающиеся http-заголовком и адаптивным дизайном. Они очень ясно заявляют, что все три могут одинаково хорошо ранжироваться в поисковых системах. Ну, в некоторой степени это правда. Но у меня есть 6 причин, по которым я действительно думаю, что вы должны перейти на адаптивный дизайн, а не использовать эти другие методы. И здесь мы идем…

Один URL лучше многих

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

Нет двухстороннего перенаправления

Когда вы используете заголовок var http или отдельный мобильный веб-сайт, вы должны убедиться, что вы обнаружили устройство и обслуживаете правильную версию своего сайта. Когда пользователь мобильного телефона попадает на рабочий стол, его нужно перенаправить на мобильный и наоборот. При просмотре больших сайтов это может быть трудно сделать, и это требует большого количества работы. Благодаря адаптивному дизайну экран просто меняется в зависимости от ширины устройства, и вам не нужно иметь дело с этим сложным процессом.

Нет пропущенных мобильных страниц

По очень распространенной проблеме, которая возникает с различным заголовком http и наличием выделенной версии, часто на сайте есть определенные страницы, которые не готовы для мобильных устройств. Когда нет соответствующих страниц, это приводит к тому, что сайт теряет рейтинги по терминам, которые идут на странице рабочего стола в результатах поиска для мобильных устройств. С отзывчивым, как правило, все шаблоны построены на интегрированной платформе, что означает, что каждая страница имеет мобильный эквивалент. Это так приятно иметь дело так, что вам не нужно создавать 2 страницы вместо того, чтобы просто сделать одну новую страницу, которая работает для всего.

Те же рамки и код SEO

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

Одна учетная запись для инструментов для веб-мастеров

Если у вас есть отдельный веб-сайт для мобильных устройств, вам нужно настроить и поддерживать две учетные записи Google Search Console. Это становится действительно утомительным. Вы постоянно работаете над двумя сайтами, и вам необходимо это изменить в своем рабочем процессе.

План на будущее

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

Источники:

• «Насколько важен адаптивный дизайн?» Джон Рэмптон Хаффингтон пост
• «14 брендов, которые повысили конверсию благодаря адаптивному дизайну». Econsultancy

Обновлено 8-14-2015

Похожие

Комментарии