Какие задачи оптимизатора можно решить с помощью бесплатного плагина Web Developer Toolbar

Приложение для веб-разработчиков (Web Developer Toolbar) является бесплатным дополнением для браузеров, созданное Крисом Педериком (Chris Pederick) и предоставляет простой в использовании инструмент для разработчиков, дизайнеров, юзабилистов, верстальщиков, а также оптимизаторов сайтов.

10 задач оптимизатора и их решение с помощью приложения Web Developer

Ниже перечислены задачи seo-оптимизатора, которые позволяет решить бесплатный плагин Web Developer Toolbar.

1. Проверка скорости загрузки сайта
Для определения скорости загрузки сайта или некоторых его страниц, отключите кэш в первом пункте меню «Отключить» и перезагрузите страницу.

Для сайтов, загрузка которых длится больше 5 секунд, следует искать способы оптимизации кода или настройки сервера. Без дополнительных плагинов скорость загрузки оценить можно лишь визуально. Если необходимы точные цифры, лучше использовать Web Developer в связке с дополнением Firebug.


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

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

Текст «без сжатия» в скобочках означает, что сервер передает браузеру контент в сжатом виде и можно посмотреть, насколько сильно происходит сжатие, сравнивая значения в скобках и вне их.

3. Просмотр страницы, как её видит поисковый робот

Для просмотра страницы примерно в том виде, как её видит поисковый робот, необходимо:

• Отключить куки в меню «Cookies — Отключить Cookies — Все Cookies».
  
• Отключить яваскрипт в меню «Отключить — Отключить jаvascript — Полностью».
  
• Перезагрузить страницу (F5).
  
• Отключить CSS стили в меню «CSS — Отключить стили — Все стили».
  
• Отобразить атрибут ALT вместо изображений (необязательно). Для этого используем элемент меню «Графика — Показать вместо изображений атрибут Alt».

Пример просмотра сайта глазами робота

Далее смотрим, всё ли нас устраивает, присутствует ли с отключенными элементами необходимый контент и правильной ли он структуры, хотим ли мы, чтобы роботы видели наш сайт именно так.

4. Определение структуры заголовков контента
Перед следующим тестированием лучше снова включить поддержку jаvascript и Cookies, которые мы отключили в предыдущем пункте. Теперь попробуем определить структуру заголовков на странице. Это можно сделать двумя способами.
Первый способ: выделить контуры заголовков непосредственно на нужной странице. Сделать это можно с помощью меню «Контуры — Контур заголовков». Также в меню «Контуры» лучше сразу поставить галочку напротив пункта «Показывать имена элементов в контуре», чтобы легче ориентироваться, какой заголовок обведен цветным контуром.

Пример выделения заголовков на странице контурами

Второй способ: посмотреть оглавление документа с помощью меню «Инфо — Оглавление документа».

Сгенерированное оглавление документа

Если какие-то из заголовков формируются/дополняются на странице яваскриптом, то желательно перед генерацией оглавления полностью отключить jаvascript.

5. Поиск изображений без атрибута alt
Найти на сайте изображения с пустым alt с помощью плагина Web Developer очень просто. Для этого выбираем «Графика — Контур изображений — Изображения с пустыми атрибутами Alt».

На текущей странице соответствующая графика будет обведена цветным контуром.

6. Определение наличия текста и ссылок, закрытых от индексации
Чтобы найти блоки текста, закрытые в noindex или ссылки с атрибутом nofollow, можно использовать функцию «Контур дополнительных элементов» в меню «Контуры».

Обведение контуром произвольных элементов страницы

В открывшемся окошке можно вводить интересуемые элементы или их классы. Для выделения текста в noindex необходимо ввести название этого тега в пустое поле и выбрать для контура цвет. Для nofollow-ссылок используется две конструкции:

a[rel="external nofollow"]
a[rel="nofollow"]

7. Проверка исходящих ссылок
По исходящим ссылкам на странице инструмент Web Developer Toolbar позволяет:
Найти количество исходящих ссылок и их адреса (Меню «Инфо — Информация о ссылках»).
Проверить ссылки на их работоспособность (Меню «Инструменты — Проверить ссылки»).
Найти внешние ссылки (Меню «Контуры — Контур ссылок — Внешних ссылок»).

При проверке работоспособности ссылок, валидатор проверяет страницу-акцептор, какой http-статус выдает страница (200-доступна, 301-редирект, 404-недоступна) и закрыта ли эта страница от индексации в файле robots.txt.

8. Просмотр информации о мета-тегах
Для генерации отчета по мета-тегам страницы выберите пункт меню «Инфо — Информация Мета-тегов».

Пример отчета о мета-тегах для сайта webtun.com

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

9. Проверка HTTP-заголовков страницы
Часто необходимо проверить HTTP-заголовки страниц на корректность отдаваемого статуса, кодировки и других параметров. Например, главная страница Яндекса отдаёт следующие заголовки:

Пример отдаваемых http-заголовков

Такой отчет получился при выборе пункта меню «Инфо — Показать заголовки ответа». Этим инструментом удобно проверять отсутствующие на сайте страницы, отдают ли они верный 404 код ошибки.

10. Проверка HTML-кода на валидацию
Для валидации HTML-кода страницы выберите в меню плагина «Инструменты — Проверить HTML». В новой вкладке откроется валидатор с указанием найденных ошибок или замечаний.

Пример результатов валидации сайта

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

Установка Web Developer Toolbar на браузеры Firefox или Chrome
Дополнение Web Developer можно установить на браузер Mozilla Firefox, Google Chrome, Flock и Seamonkey под любой популярной операционной системой (Windows, Linux, Mac).

Установка на Google Chrome | Установка на Mozilla Firefox

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

Если вы уже используете Web Developer как seo инструмент для решения задач, которые не перечислены выше, можете поделиться ими с другими читателями в комментариях ниже.