5 полезных Chrome-расширений для веб-разработчиков для SEO

Здравствуйте дорогие читатели и подписчики блога Vip-Reseller.ru! Во-первых, от блога Vip-Reseller.ru поздравляю вас с прошедшими праздниками. Во-вторых, рад снова быть с вами на связи. И сегодня мы поговорим о том, как использовать встроенные инструменты или расширения браузера Google Chrome для проведения SEO-аудитов своих и чужих ресурсов.

Чтобы попасть в «инструменты разработчика», используйте горячие клавиши Ctrl+Shift+I для Windows и Cmd+Opt+I для Mac, либо воспользуйтесь меню в Google Chrome: «Дополнительные инструменты – Инструменты разработчика».

Зашли? Отлично. Теперь научимся использовать эти инструменты на практике:

1. Проверяем DOM любой страницы сайта

DOM (Document Object Model) — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML- , XHTML- и XML-документов. Это определение с «Википедии». А теперь объясню простым языком

Google уже научился индексировать контент, подгружаемый с помощью JavaScript, но он все еще далек от совершенства в этом деле. С помощью «инструментов разработчика», вы можете посмотреть DOM страницы и узнать, в каком виде на самом деле бот Google получает доступ к странице и как видит ее основные элементы, в том числе title, description и основной текст, если они «запрятаны» в JS.

Как это работает? Давайте разберем на примере главной страницы популярного приложения Tinder. Открываем исходный код с помощью горячих клавиш ctrl + u иии… видим объявление о найме на работу и основные метатеги.

Однако если вы попытаетесь найти в исходном коде надпись Tinder. Now on Apple TV с главной страницы, то вы ее не обнаружите. Как она подгружается? Открываем инструменты разработчика и выбираем первую вкладку – Elements.

В открывшемся окне находим нужный текст – видим, что он завернут в <div>, но на самом деле, он подгружается с помощью JavaScript. С кодом разобрались. Теперь посмотрим, проиндексировал ли этот текст поисковый бот Google. Вводим запрос site:https ://www.gotinder.com/ «now on apple tv»

2. Ищем контент, скрытый с помощью CSS

Google может игнорировать контент, включенный в HTML-код страницы, но скрытый от пользователей с помощью CSS – например, текст в меню, которое открывается по клику или при наведении курсора. Самые распространенные способы скрыть такой контент – с помощью свойств display:none и visibility:hidden. Чтобы убедиться, что вы не скрыли ничего важного, используйте встроенный поиск – откройте инструменты разработчика и вызовите поисковую строку с помощью горячих клавиш Ctrl + Shift + F (Windows) или Cmd + Opt + F (Mac). Поиск осуществляется не только по коду открытой страницы, но по всем ресурсам, включая CSS и JavaScript.

Введите в поисковую строку display:none или visibility:hidden, чтобы найти скрытый контент, который Google может игнорировать. Убедитесь, что вы не закрыли ничего важного.

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

3. Проверяем правильность указания тегов ALT к изображениям

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

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

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

Откройте инструменты разработчика на нужной странице и нажмите горячие клавиши Ctrl+Shift+M (Windows), Command+Shift+M (Mac) или нажмите на иконку Toggle device toolbar:

Сверху откроется меню:

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

5. Проверяем, ссылается ли страница на ресурсы с незащищенным соединением

Особенно этот пункт актуален для тех, кто еще перенес свой сайт на HTTPS. Просто пример использования этой функции – если ваш сайт доступен по HTTPS, а на странице есть партнерская ссылка на HTTP-сайт, то все переходы по ней будут отображаться как переходы из неизвестного источника в аналитике вашего партнера. Это может привести к тому, что партнер начнет жаловаться, что с вашего сайта нет переходов. Как найти такие ссылки на странице? Открываем инструменты разработчика и идем во вкладку Security:

Листаем окно инструментов разработчика чуть ниже и видим список всех соединений, к которым обращается страница:

Небезопасные соединения будут отмечены красным маркером. Если такие найдутся на странице – обязательно выясните, в чем может быть проблема.

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

Данная статья написана по материалам интернет-агентства Texterra