- 1. Перевіряйте основні елементи контенту вашої сторінки, включаючи рендеринг JavaScript
- 2. Шукайте вміст, приховане за допомогою CSS
- 3. Перевіряйте заповнення атрибуту alt зображень
- 4. Виявляйте Неіндексований конфігурації і атрибут rel = canonical
- 5. Перевіряйте статус HTTP в конфігурації заголовка
- 6. Слідкуйте за мобільного веб-оптимізацією
- 7. Контролюйте час завантаження сторінки
- 8. Визначайте ресурси, які блокують рендеринг
- 9. Знаходьте небезпечні ресурси під час переходу на HTTPS
- 10. Перевіряйте прискорені мобільні сторінки
- Бонус: надайте телефону настройки інструментів Chrome
Є проблеми з ранжируванням, проект не росте, хочете перевірити роботу своїх фахівців з просування? Замовте професійний аудит в семантиці
Якщо ви проводите SEO-аудит, швидше за все вам знайомі інструменти розробника від Google Chrome.
Колумніст Алейда Соліс ділиться 10 способами застосування цих інструментів для виявлення і усунення проблем в області SEO.
Багато з нас платять сотні і навіть тисячі за програмне забезпечення для SEO, яке допомагає автоматизувати повсякденну роботу і значно її спростити. Однак у нас вже є один з найбільш зручних безкоштовних наборів інструментів SEO, який йде в комплекті з браузером - інструменти розробника. Вбудований в Google Chrome, цей набір засобів, корисних для створення контенту і його налагодження, дозволяє перевіряти деякі з найбільш фундаментальних і важливих для SEO аспектів будь-якої сторінки.
У більшості випадків використання інструментів розробника не викликає особливих питань. Але є кілька дуже зручних і не настільки очевидних додатків для проведення SEO-аналізу. Подивимося, які саме будуть вам корисні.
Для початку відкриємо сторінку, яку ви хочете перевірити, в Google Chrome, а потім - панель інструментів. Ви можете зробити це, вибравши в правому верхньому куті вікна браузера Додаткові інструменти> Інструменти розробника з меню Google Chrome.
В якості альтернативи можете використовувати поєднання клавіш:
- Ctrl + Shift + I для Windows.
- Cmd + Opt + I для Mac.
Ще один варіант - натиснути правою кнопкою миші на сторінці, яку ви хочете перевірити, і в меню вибрати опцію Переглянути код.
1. Перевіряйте основні елементи контенту вашої сторінки, включаючи рендеринг JavaScript
Google тепер може сканувати та індексувати контент, написаний на мові JavaScript, але йому не завжди вдається робити це бездоганно. Тому необхідно перевіряти основні елементи контенту ваших сторінок - не тільки шляхом аналізу їх вихідного коду, але і за допомогою перевірки DOM. Так ви зможете побачити, як інформація буде рендерірована і ідентифікована Google.
Швидко подивитися DOM будь-якої сторінки за допомогою браузера можна в панелі інструментів розробника, розділ «Elements».
Використовуйте цей інструмент для перевірки будь-якого з елементів сторінки (тайтл, дескріпшн, текст сторінки), щоб переконатися, що в кожному конкретному випадку відображається саме необхідна вам інформація, релевантна і доступна Google.
Наприклад, у верхньому лівому кутку на зображенні нижче ми можемо побачити, як відображається основний текст (обведений червоним кольором), виділений елементом <div>. Але насправді він написаний за допомогою JavaScript. Відповідний код можна побачити на скріншоті, представленому у верхній правій частині зображення, там, де відкритий код сторінки.
Порівнюючи зміст лівого і правого скріншотів, ви можете перевірити, чи правильно виконується індексація:
- Переглянувши кешовану сторінку в Google.
- Перевіривши, чи відображається текст у видачі Google при пошуку.
- Використовуючи «Переглянути як Googlebot» в Google Search Console.
2. Шукайте вміст, приховане за допомогою CSS
Відомо, що Google знецінює текстовий контент, який за замовчуванням прихований від користувача, хоча він і включений в сторінки вихідного коду HTML.
Один з найбільш поширених способів приховати текст - використовувати властивості CSS display: none або visibility: hidden. Тому потрібно перевірити, чи немає на сторінках вашого сайту важливої інформації, яка прихована за допомогою цих засобів.
Зробити це ви можете за допомогою інструменту Search, доступ до якого можна отримати, натиснувши комбінацію клавіш Ctrl + Shift + F (Windows) або Cmd + Opt + F (Mac), коли відкрита панель інструментів Google. Функція пошуку дозволить вам переглянути не тільки відкритий файл сторінки, але також CSS або JavaScript.
За допомогою Search ви можете виконати пошук необхідних властивостей, наприклад visibility: hidden або display: none. Якщо вони є в коді сторінки, ви їх знайдете.
Відкрийте код рядка з вашим сайтом у видачі пошуку. Знайдіть приховані фрагменти тексту. Якщо це важливий контент, перевірте, чи був він знецінений пошукачем, і якщо так, прийміть заходи.
3. Перевіряйте заповнення атрибуту alt зображень
Крім перевірки основних елементів текстового вмісту ваших сторінок, ви також можете перевірити опису зображень, текст, який міститься в атрибуті alt. Зробити це також можна через розділ Elements в панелі. Клацніть правою кнопкою миші на будь-яке зображення і виберіть пункт Переглянути код. Так, як показано на скріншоті нижче:
4. Виявляйте Неіндексований конфігурації і атрибут rel = canonical
Ви можете використовувати інструменти розробника для перевірки технічної конфігурації ваших сторінок. Наприклад, для перевірки тегів robots і canonical. Зробити це можна за допомогою інструменту Search. 
Перевірку можна виконати не тільки для тегів HTML, але і заголовків HTTP. Для цього перейдіть до панелі Network і виберіть сторінку або ресурс, вміст заголовків якого хочете перевірити. Там же ви зможете подивитися, чи є посилання rel = canonical в файлі зображення.
5. Перевіряйте статус HTTP в конфігурації заголовка
При перевірці конфігурації заголовка сторінок і ресурсів за допомогою розділу Network панелі інструментів, ви також можете перевірити статус HTTP, подивитися, чи є там якісь редіректи, якого вони типу, знайти статуси помилок, а також вкраплення інших конфігурації, таких як х-robots -tag, hreflang або vary: user agent.
6. Слідкуйте за мобільного веб-оптимізацією
Зручність читання інформації на мобільних пристроях зараз важливо для SEO, і ви можете перевірити конфігурацію сторінки і контенту в мобільному телефоні за допомогою інструменту Mode Device. Ця опція активується натисканням на піктограму пристрою в лівій верхній частині панелі або натисканням комбінації клавіш Ctrl + Shift + M (Mac) або Ctrl + Shift + M (Windows, Linux) при відкритій панелі інструментів.
Після цього в режимі пристрою, у верхній частині вікна відкриється панель управління. Тут Ви можете вибрати адаптивний видовий екран або конкретний пристрій для перевірки сторінки. Ви також можете додати власний пристрій за допомогою опції Edit. 
7. Контролюйте час завантаження сторінки
Аналізувати час завантаження будь-якої сторінки можна шляхом емуляції умов мережі і використовуваного пристрою. Для цього, перейдіть до інструменту Network Conditions, доступ до якого можна отримати з діалогового вікна налаштувань у верхньому правому куті панелі, розділ More tools. 
Тут ви знайдете такі конфігурації, як Caching, Network throttling і User agent.
Після того, як ви вибрали необхідні настройки, перезавантажте потрібну сторінку і перейдіть до панелі Network, щоб побачити не тільки повний цикл завантаження даної сторінки (Load), але також і те, коли відбулася подія DOMContentLoaded. Ця інформація міститься в нижній частині вікна. Ви можете також переглянути час завантаження і розмір кожного з використовуваних ресурсів, записавши його натисканням на червону кнопку на лівій стороні панелі.
Щоб отримати рекомендацію про те, як збільшити швидкість сторінки, перейдіть до панелі Audits і натисніть кнопку Run. Кожна рекомендація буде вказувати на наявні проблеми. Приклад наведено нижче: 
Крім того, ви можете подивитися рендеринг сторінки за допомогою опції Filmstrip. При натисканні на піктограму камери і перезавантаження сторінки, ви побачите знімки екрану вашої сторінки на різних етапах завантаження, що дає можливість перевірити, що саме бачать користувачі на кожному етапі.
8. Визначайте ресурси, які блокують рендеринг
Також ви можете використовувати дані про час завантаження ресурсу в панелі Network, щоб визначити, які JS і CSS ресурси завантажуються швидше DOM і, можливо, блокують його. Це одна з найбільш поширених проблем, що впливають на швидкість завантаження сторінки.
9. Знаходьте небезпечні ресурси під час переходу на HTTPS
Додаткові інструменти Chrome можуть бути дуже корисні під час перенесення сайту на HTTPS, так як дозволяють ідентифікувати проблеми безпеки за допомогою інструменту Secure. Ви можете перевірити безпеку, сертифікат HTTPS, а також, визначити наявність проблем з контентом, викликаних небезпечним походженням будь-якого з використовуваних ресурсів.
10. Перевіряйте прискорені мобільні сторінки
Якщо ви реалізуєте AMP, можете подивитися, чи є які-небудь проблеми на ваших сторінках, додавши рядок # development = 1 до вашого URL AMP, а потім перевіривши в панелі Console. 
Цей спосіб допоможе вам зрозуміти, чи є які-небудь питання, попередження або помилки, і якщо є, то в якому елементі і рядку коду вони були знайдені. Таким чином, ви завжди зможете вжити заходів, необхідних для їх виправлення.
Бонус: надайте телефону настройки інструментів Chrome
Можливості використання інструментів Chrome для SEO різноманітні, а значить, вам доведеться часто їх використовувати. Цілком логічно, якщо ви захочете персоналізувати панель, виходячи з власних уподобань. Ви можете налаштувати її зовнішній вигляд, включити ярлики і т.д.
Зробити все це можна в налаштуваннях. Натисніть значок меню у верхньому правому куті браузера і виберіть опцію Settings.
І ще один бонус. Іноді код занадто довгий, і його складно розібрати. Натисніть кнопку {}, яка знаходиться в центральній частині нижньої області панелі. Так ви зможете побачити повну версію коду, а не скорочену.
Я сподіваюся, ці поради по використанню інструментів розробника в браузері Google Chrome допоможуть зробити ваше життя простіше!
оригінал статті.
Олег Васильєв
Тімліда SEO-відділу SEMANTICA
Google Chrome відмінний браузер, який використовують понад 50% користувачів в рунеті. Для повноцінного комплексу робіт, на жаль, його недостатньо, але стандартні інструменти гугл хром, безумовно, корисні в роботі. Вони безкоштовні і завжди знаходяться завжди під рукою фахівця. Однак їх використання обмежено: вони підходять тільки для роботи з невеликими сайтами або для проведення поверхневого аудиту на наявність технічних помилок. Але на браузер можна навішати багато додаткових плагінів. Наприклад, у своїй роботі ми іспольльзуем: Web Developer, RDS Bar, а також Yandex Assistant для роботи з вордстат.
