Проблема ссылок в мобильной версии сайта решена

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

link

Давайте рассмотрим ситуацию, когда мобильная версия сайта находится на поддомене и/или (как в случае с Blogger) доступна по соответствующему параметру в URL-адрес. В таком случае, возникает проблема со ссылками, которые ведут на десктопную версию сайта.

Например, у меня есть статья «Чёрный список в Одноклассниках», десктопная версия которой доступна по адресу:

http://www.wmascat.ru/2012/10/chernyy-spisok-na-odnoklassniki-ru.html

а мобильная её версия включает в себя параметр m=1:

http://www.wmascat.ru/2012/10/chernyy-spisok-na-odnoklassniki-ru.html?m=1

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

Вот поэтому я решил написать простейший JavaScript сценарий, с использованием библиотеки jQuery, который автоматически добавляет параметр ?m=1 в локальные ссылки… если это надо. Его код выглядит следующим образом:

<b:if cond='data:blog.isMobile'>
<script>//<![CDATA[
$(document).ready(function() {
  $('a').each(function() {
    if( $(this).is('[href]') ) {
      var href = $(this).attr('href');
      if (
        (href.search(new RegExp('/'+ window.location.hostname +'/', 'i')) != -1) &&
        (href.search(/\#/) == -1) &&
        (href.search(/\?m\=/) == -1)
      ) {
        $(this).attr('href', href + '?m=1');
      }
    }
  });
});
//]]></script>
</b:if>

Как вы видите, код задочем под шаблон блога на Blogger. В частности, он отображается только в мобильной версии блога по условию data:blog.isMobile является TRUE. Дальше идёт обычная проверка готовности документа. Зачем мы начинаем перебирать теги A. В них нас интересует наличие атрибута href. Если такой есть проверяем, что ссылка является локальным, т.е. указанный URL-адрес содержит доменное имя сайта: window.location.hostname. Из обработки я также решил исключить ссылки со знаком решетки (#) и параметром ?m=. В случае если всё условия соблюдены, добавляет к URL-адресу параметр мобильной версии сайта.

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

Возможно, что это решение можно счесть несколько более сложным, чем хотелось бы. Но это вполне доступный и рабочий вариант. На этом у меня всё. Спасибо за внимание. Удачи!

Twitter Facebook ВКонтакте Одноклассники Google+

4 комментария:

Сайхан Сосланбеков
Узнал много полезного для себя. До сих пор думал, что ссылка с параметром m=1 это дубль и пытался от неё избавиться. Но теперь я спокоен, спасибо за статью.
Константин Кирилюк
2Сайхан Сосланбеков Ссылки с тем же дополнительным параметром m=1 это действительно дубль, но если указан link тег canonical, то поисковый робот выберет именно этот вариант URL-адреса для страницы и дублей не будет.
Сайхан Сосланбеков
Canonical указан, с этим Слава Богу, всё в порядке. Но если вас не затруднит, ответьте пожалуйста на такой вопрос: Возьмём к примеру эту страницу. Если прямо из этой страницы в поиске ввести запрос "дубли страниц", то результаты отобразятся на новой странице. У меня же на блоге всё не так, если в поиске ввести этот же запрос, то результаты отобразятся на той же самой странице и к ссылке добавится еще вот такой параметр "#uds-search-results". Я хотел бы узнать, как вы вывели результаты поиска на новую страницу. Перелазил весь интернет, но так и не нашел ответа на свой вопрос. :)
Константин Кирилюк
2Сайхан Сосланбеков ну это уже просто особенности интеграции Google поиска для сайта, в дух словах здесь не расскажешь. Если хотите, я могу написать гостевой пост для вашего блога на эту тему. В замен попрошу подпись, например, как тут: http://www.chuvyr.ru/2015/05/seo.html - я сделал для Сергея Назарова.
Отправить комментарий