3,678 просмотров

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

10 задач seo-оптимизатора, решаемых с помощью Web Developer Toolbar

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

1. Проверка скорости загрузки сайта

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

Отключение кэша в панели Web Developer Toolbar

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

2. Определение веса страницы

Зайдите в пункт меню «Information» панели для веб-мастеров и выберите «Document Size». В результате откроется дополнительная вкладка с подробной информацией о размере (в килобайтах) разных элементов сайта.

Сгенерированный отчет о весе документа

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

Колонка «Uncompressed Size» (размер без сжатия) означает, что сервер передает браузеру контент в сжатом виде и можно посмотреть, насколько сильно происходит сжатие, сравнивая значения в разных колонках.

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

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

— Отключить куки в меню «Cookies — Disable Cookies — Disable All Cookies».
— Отключить яваскрипт в меню «Disable — Disable JavaScript — Disable All JavaScript».
— Перезагрузить страницу (F5).
— Отключить CSS стили в меню «CSS — Disable Styles — Disable All Styles».
— Отобразить атрибут ALT вместо изображений (необязательно). Для этого используем элемент меню «Images — Replace Images With Alt Attributes».

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

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

4. Определение структуры заголовков контента

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

Первый способ: выделить контуры заголовков непосредственно на нужной странице. Сделать это можно с помощью меню «Outline — Outline Headings». Также в меню «Outlines» лучше сразу поставить галочку напротив пункта «Показывать имена элементов в контуре» (“Show Element Tag Names When Outlining”), чтобы легче ориентироваться, какой заголовок обведен цветным контуром.

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

Второй способ: посмотреть оглавление документа с помощью меню «Information — View Document Outline».

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

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

5. Поиск изображений без атрибута alt

Найти на сайте изображения с пустым или отсутствующим alt с помощью плагина Web Developer очень просто. Для этого выбираем «Images — Outline Images — Outline Images Without Alt Attribute».

Пример обведения контурами изображений с пустым ALT

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

6. Определение наличия текста и ссылок, закрытых от индексации

Чтобы найти блоки текста, закрытые в noindex или ссылки с атрибутом nofollow, можно использовать функцию «Outline Custom Elements» в меню «Outline».

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

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

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

7. Проверка исходящих ссылок

По исходящим ссылкам на странице инструмент Web Developer Toolbar позволяет:

— Найти количество исходящих ссылок и их адреса (Меню «Information — View Link Information»).
— Проверить ссылки на их работоспособность (Меню «Tools — Validate Links»).
— Найти внешние ссылки (Меню «Outline — Outline External Links»).

Пример поиска внешних ссылок на странице

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

8. Просмотр информации о мета-тегах

Для генерации отчета по мета-тегам страницы выберите пункт меню «Information — View Meta Tag Information».

Пример отчета о мета-тегах

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

9. Проверка HTTP-заголовков страницы

Часто необходимо проверить HTTP-заголовки страниц на корректность отдаваемого статуса, кодировки и других параметров.

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

Такой отчет получился при выборе пункта меню «Information — View Response Header». Этим инструментом удобно проверять отсутствующие на сайте страницы, отдают ли они верный 404 код ошибки.

10. Проверка HTML-кода на валидацию

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

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

Проанализировав возникшие ошибки можно принять решение об их значимости и необходимости устранения.

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

Установка Web Developer Toolbar на браузеры Firefox, Opera или Chrome

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

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

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

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

  • 0 Нет
  • 8 Да
  • Мне понравилось!

Если вам понравилась статья, вы можете подписаться на RSS или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму (Доставка от FeedBurner):