SEO-аудит & Плагин для веб-разработчиков: 12 полезных функций для технического SEO

SEO-аудит & Плагин для веб-разработчиков: 12 полезных функций для технического SEO
SEO-аудит & Плагин для веб-разработчиков: 12 полезных функций для технического SEO

При проведении SEO-аудита правильные инструменты могут облегчить сбор необходимой информации. Вот обзор 12 полезных функций плагина веб-разработчика (для Firefox и Chrome), который обеспечивает массу функций.

Плагин для веб-разработчиков
Плагин для веб-разработчиков

Технический SEO-аудит - один из самых мощных результатов во всем SEO. Они определенно принесут максимальную отдачу от ваших SEO-вложений.

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

При проведении аудита ряд инструментов может помочь вам собрать нужную информацию и протестировать веб-сайт под рукой. Такие инструменты, как Screaming Frog, набор инструментов SEO для IIS, Xenu, различные плагины и т. д., каждый из которых предоставляет свое уникальное ценностное предложение. В сочетании с правильным опытом SEO технический аудит может помочь улучшить веб-сайт (и за относительно короткий промежуток времени).

Плагин веб-разработчика (для Firefox и Chrome)

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

В этом посте не будет описано все, на что способен плагин, но будут рассмотрены 12 наиболее полезных функций для проведения технического SEO-аудита.

Уже используете плагин? Вам все равно стоит просмотреть список ниже. Возможно, есть некоторые функции или советы, о которых вы еще не узнали. Давайте приступим.

Плагин для веб-разработчиков - 12 полезных функций для технического SEO

1. Отключите JavaScript

Веб-разработчик отключил JavaScript
Веб-разработчик отключил JavaScript

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

Например, доступна ли навигация для сканирования, как насчет различных модулей на странице, содержащих важный контент или ссылки? Вы можете легко отключить JavaScript, используя раскрывающийся список «Отключить», затем «Отключить JavaScript» и, наконец, «Отключить весь JavaScript». Затем вы можете перезагрузить страницу с отключенным JavaScript.

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

2. Просмотр информации о метатеге

Мета-теги веб-разработчиков
Мета-теги веб-разработчиков

Хотите быстро проверить метатеги страницы? Вы можете легко сделать это с помощью плагина веб-разработчика, нажав «Информация», «Просмотр информации метатега». В новом окне отобразится вся информация метатегов страницы, включая метаописание, данные открытого графика и т. д.

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

3. Просмотреть структуру документа (заголовки)

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

Например, для страницы должен быть один H1, затем H2 вложен в H1, затем H3 вложен в H2 и т. д. Она должна отражать иерархию контента, как это было бы в схеме.

Используя плагин веб-разработчика, вы можете просмотреть структуру документа, щелкнув вкладку «Информация», а затем выбрав «Просмотреть структуру документа». В новом окне отобразится структура, включая содержимое каждого заголовка.

Краткое описание заголовков для веб-разработчиков
Краткое описание заголовков для веб-разработчиков

Вы также можете выделить заголовки, чтобы визуально видеть их наложенными на странице. Для этого вы можете сначала нажать «Структура», «Показать имена тегов элементов в обрисованном виде», затем еще раз нажать «Структура», а затем «Структурные заголовки». Бум, теперь у вас есть все заголовки, обозначенные их тегами (например, H1, H2, H3 и т. д.)

4. Просмотр заголовков ответов

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

Например, типичная веб-страница, отображающая контент, должна выдавать код ответа 200 (что означает «ОК», запрос выполнен успешно). Во время тестовых обходов вы можете обнаружить ошибки 302, 404, 500 (ошибки приложений) и т. д. Разумеется, вы не хотите, чтобы робот Googlebot нажал на неправильный код ответа заголовка, причем, возможно, на тысячах страниц.

Обратите внимание: для массового сканирования вам следует использовать такой инструмент, как Screaming Frog или Xenu, но для определенных страниц очень удобен плагин веб-разработчика. После загрузки любой веб-страницы вы можете нажать «Информация», «Просмотреть заголовки ответов». В новом окне отобразятся заголовки страницы, включая код ответа.

Выбор функции «Просмотр заголовков ответов»:

Веб-разработчик Просмотр заголовков ответов
Веб-разработчик Просмотр заголовков ответов

Просмотр заголовков ответов:

Заголовки ответов веб-разработчика
Заголовки ответов веб-разработчика

5. Изображения, отображение альтернативного текста

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

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

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

Вы также можете нажать «Изображения», «Заменить изображения альтернативными атрибутами», чтобы удалить изображения со страницы и заменить их замещающим текстом. Оба метода позволяют быстро проверить замещающий текст изображения.

Веб-разработчик отображает альтернативные атрибуты
Веб-разработчик отображает альтернативные атрибуты

Вы можете обвести изображения на странице, которые не содержат замещающий текст или содержат пустой замещающий текст, нажав «Изображения», «Контурные изображения», а затем «Контурные изображения без альтернативных атрибутов» (или «Контурные изображения»). С пустыми атрибутами Alt»). Опять же, это еще один быстрый и эффективный способ дважды проверить оптимизацию изображений.

6. Изображения, атрибуты заголовка

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

Атрибуты должности веб-разработчика
Атрибуты должности веб-разработчика

Используя плагин веб-разработчика, вы можете нажать «Информация», «Отобразить атрибуты заголовка». Атрибут заголовка каждого изображения будет наложен на страницу. Затем вы можете дважды проверить длину, содержимое и т. д., чтобы убедиться, что каждое изображение оптимизировано правильно. Вы также можете легко увидеть, отсутствуют ли у изображений атрибуты заголовка.

7. Показать сведения о ссылке

Подробности отображения Lnk веб-разработчика
Подробности отображения Lnk веб-разработчика

Для проверки внутренних и внешних ссылок на странице плагин веб-разработчика может накладывать сведения о ссылках на все ссылки на странице. Это позволяет вам быстро увидеть, основаны ли ссылки на JavaScript, являются ли они относительными, абсолютными и т. д. Вы также можете обнаружить некоторые проблемы с кодированием, просматривая эту информацию (если место назначения ссылки, наложенное на страницу, явно нарушено).

Обратите внимание: вам следует использовать сканер, такой как Xenu или Screaming Frog, для массовой проверки неработающих ссылок, но вы определенно можете обнаружить некоторые проблемы, используя плагин веб-разработчика, постранично.

8. Просмотр информации о ссылке

Немного отличается от того, что я перечислил выше, просмотр информации о ссылках открывает новое окно, содержащее все ссылки на странице.

Информация о ссылке для веб-разработчика
Информация о ссылке для веб-разработчика

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

Вы также можете просмотреть каждый целевой URL в списке в новом окне, где вы можете отметить сомнительные ссылки, ссылки на основе JavaScript, сообщения mailto и т. д. А если вы хотите перейти на следующий уровень анализа, вы можете может скопировать список URL-адресов на страницу и использовать Xenu или Screaming Frog для их сканирования.

9. Изменение размера окна браузера

Веб-разработчик изменить размер окна 800x600
Веб-разработчик изменить размер окна 800x600

Хотите быстро просмотреть, как страница выглядит в окнах браузера разного размера? Плагин для веб-разработчиков поможет вам. Просто нажмите «Изменить размер», затем «Изменить размер окна» и введите размеры. Размер окна браузера будет автоматически изменен в соответствии с введенными вами размерами.

Обратите внимание: при этом не будет проверяться, форматируется ли сайт для посетителей с мобильных устройств или планшетов. Он просто изменит размер браузера.

Панель инструментов изменения размера веб-разработчика
Панель инструментов изменения размера веб-разработчика

У вас есть определенные размеры, которые вы всегда проверяете? Без проблем. Вы можете ввести различные размеры, чтобы сохранить их для будущего использования, нажав «Изменить размер», затем «Изменить размеры». Вы можете легко добавить эти измерения в окно и использовать их во время будущих аудитов или на разных страницах.

10. Проверка W3C

Служба проверки разметки W3C для веб-разработчиков
Служба проверки разметки W3C для веб-разработчиков

На протяжении многих лет было много споров о том, необходима ли проверка W3C для высоких позиций. Это явно не так, и Мэтт Каттс несколько раз подтверждал эту точку зрения на протяжении многих лет, в том числе на SMX West в 2010 году. Тем не менее, я твердо верю, что чем чище код, тем лучше он может работать для вас. мудро.

Плагин для веб-разработчиков предоставляет возможность быстрой проверки вашего HTML. Если вы нажмете «Инструменты», а затем «Проверить HTML», страница, которую вы просматриваете, будет проверена с помощью службы разметки проверки W3C.

11. Просмотреть исходный код (Alt Shift U)

Веб-разработчик Посмотреть исходный код
Веб-разработчик Посмотреть исходный код

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

Используя плагин для веб-разработчиков, вы можете легко просмотреть исходный код страницы, нажав «Просмотреть исходный код», а затем еще раз «Просмотреть исходный код». Более того, сочетание клавиш Alt+Shift+U откроет исходную страницу просмотра в Firefox.

12. Бонус: сочетания клавиш

Сочетания клавиш для веб-разработчиков
Сочетания клавиш для веб-разработчиков

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

Вы можете нажать «Параметры», а затем еще раз «Параметры», чтобы открыть окно параметров веб-разработчика. Вверху вы увидите вкладку «Клавиатура», которая позволяет добавлять сочетания клавиш. Нажмите «Добавить», затем выберите функцию, которую хотите активировать, а затем добавьте сочетание клавиш, которое хотите использовать. Обратите внимание: вам придется перезапустить браузер, чтобы новые ярлыки вступили в силу.

Следующие шаги

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

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

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