Не далее как вчера была мной была опубликована статья, которая рапортовала о смене шаблона данного сайта на адаптивный, что означает, что его страницы на различных устройствах отображаются без горизонтальной прокрутки, все элементы сайта могут быть воспроизведены на любом современном и не очень устройстве. Яндекс в начале этого месяца запустил новый алгоритм «Владивосток», который будет ранжировать сайты в зависимости от удобства просмотра их на мобильных устройствах. Правда, при просмотре сайтов на обычных десктопах данный алгоритм ранжирования применяться не будет. Но это сегодня, а что будет завтра, Яндекс его знает. Я бодро копировала URLы страниц сайта и обнаружила, что только половина из них детектируется Яндексом и Гуглом, как адаптированные к просмотру на мобильных устройствах. На всех остальных же присутствовала горизонтальная прокрутка. Чтобы разобраться в ситуации, я достала свой Nokia e72, отмеченный в прошлой истории, и начала просматривать с него страницы с этой пресловутой горизонтальной прокруткой. Тут-то все стало ясно…
Для того, чтобы можно было легко визуально распознать код C#, PHP, CSS, HTML на странице сайта, необходимо для этого установить один из распространенных плагинов. Среди них можно выделить два:
- Crayon Syntax Highlighter
- SyntaxHighlighter Evolved
Оба они хороши, и я по вкусу выбрала второй. Все было замечательно до тех пор, пока не началась вся эта история с адаптивностью. У плагина SyntaxHighlighter Evolved версии 2 предусмотрен перенос строк, но дело в том, что функции на том же PHP зачастую носят название, состоящие из 30-40 символов! Вызов функции с параметрами также делают без пробелов между названием функции и ее первым параметром, получается еще более длинная строка. При этом делать пробелы во всех таких местах, сами понимаете, не выход. Так что вот такая приятная мелочь, как подсветка синтаксиса, может привести к пессимизации страницы в выдаче пока только на мобильных устройствах.
Было принято решение о замене существующего плагина на Crayon Syntax Highlighter. Он для кода создает специальные области с горизонтальной прокруткой. При этом у пользователя есть возможность просмотра на отдельной странице кода в «полную величину».
Чтобы не быть голословной, вот результаты обследования одной из страниц на предмет ее адаптивности.
- SyntaxHighlighter Evolved
Результаты Google:
Результаты Yandex:
2. После начала использования плагина Crayon Syntax Highlighter:
Результаты Google:
Результаты Yandex:
Таким образом, при применении адаптивного шаблона необходимо также просмотреть список имеющихся на Вашем блоге плагинов и удостовериться, что они не нарушают Ваших планов по продвижению сайта 
.
Подпишитесь на обновления блога!
Нажимая кнопку «Подписаться», вы соглашаетесь с обработкой персональных данных и даете согласие на рассылку .
