К постам Опубликовано: 2016-12-23

Web Developer Toolbar для SEO

Додаток для веб-розробників (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 у меню «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 і Mozilla під будь популярною операційною системою (Windows, Linux, Mac).

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

Інтерфейси тулбаров для різних браузерів трохи різняться, але вже після декількох застосувань управління інструментом стає інтуїтивно зрозумілим.