- 1. Проаналізуйте продуктивність мережі
- 2. Перевірте оптимізацію мобільного веб-сайту
- 3. Визначити ресурси, що блокують візуалізацію
- 4. Перевірте основні елементи вмісту сторінки
- 5. Перевірте опис ALT зображень
- 6. Виправлення неполадок пам'яті
- 7. Знайдіть прихований вміст CSS
- 8. Зрозуміти питання безпеки
- 9. Перевірте реалізацію вашого прискореного мобільного сайту (AMP)
- 10. Проаналізуйте продуктивність виконання
- 11. Знайдіть статус HTTP
- 12. Перевірте та видаліть файли cookie
- 13. Очистити сховище
- 14. Перевірте анімацію
- 15. Емулюйте датчики
Один з найбільш корисних інструментів SEO - це той, за який ми навіть не повинні платити. Цей інструмент - це Google Chrome DevTools . Цей інструмент вбудовано в Google Chrome і дозволяє виправити багато функцій SEO на веб-сторінці.
Щоб отримати доступ до DevTools, просто натисніть на три вертикальні точки у правому куті веб-переглядача Google Chrome. Далі виберіть Інші інструменти> Інструменти розробника. Інакше, ярлик для відкриття цього меню - Ctrl + Shift + I.
DevTools має дев'ять меню - меню пристрою, елементи, консоль, джерела, мережу, шкалу часу, профілі, додаток і безпеку. Усі вони можуть допомогти користувачам оптимізувати свої веб-сайти.
Отже, як може DevTools допомогти SEO? Ось 20 хаків, які працюють в SEO, повинні знати і використовувати:
1. Проаналізуйте продуктивність мережі
DevTool дозволяє аналізувати час завантаження сторінки веб-сайту в меню Мережа . Для цього потрібно ввімкнути " захоплення знімків екрана ", що увімкнуто в синій колір. Це дозволить зробити знімок екрана під час завантаження сторінки.
Після завершення цього процесу та вибору потрібних налаштувань перезавантажте сторінку та перейдіть на панель мережі, щоб переглянути час завантаження сторінки, а також розмітку сторінки, на якій було проаналізовано сторінку. Щоб виправити проблеми зі швидкістю, перейдіть до панелі " Аудит " і натисніть кнопку " запустити ". Там ви матимете доступ до списку ресурсів, що викликають проблему.
2. Перевірте оптимізацію мобільного веб-сайту
Джерело: Розробники Google
Кожен SEO-працівник хоче протестувати мобільну оптимізацію. Це також дозволяє перевірити продуктивність мережі для мобільних телефонів. Для цього просто відзначте поле " відключити кеш ". У меню « no throttling » (« без дроселювання ») виберіть звичайний 2G. Це дозволить емулювати продуктивність мобільних пристроїв під час роботи на ноутбуці або комп'ютері.
3. Визначити ресурси, що блокують візуалізацію
Скрипти для блокування візуалізації та великі запити часто призводять до повільного завантаження веб-сайту. Ви можете визначити ці ресурси під панеллю " Мережа ". Це покаже вам, які ресурси JS і CSS завантажуються до DOM, який знаходиться внизу панелі "Мережа".
4. Перевірте основні елементи вмісту сторінки
Будь-який бізнес із веб-сайтом захоче перевірити основні елементи вмісту веб-сайту, включаючи елементи, надані JavaScript. Поки У Google є інструменти, які сканують та індексують цей вміст не завжди досконалий. В результаті, важливо знати, як це перевірити самостійно.
Щоб переглянути DOM в DevTools, перейдіть на сторінку Elements . Його можна використовувати для перегляду елементів сторінки, включаючи назву, опис мета або вміст сторінки. Після цього ви зможете перевірити, чи доступний ваш вміст для Google.
5. Перевірте опис ALT зображень
Джерело: Земля пошуку
На вкладці Елементи також можна перевірити опис зображень ALT. Просто клацніть правою кнопкою миші на будь-якому зображенні і виберіть "інспектувати". Кодування відображатиме опис ALT.
6. Виправлення неполадок пам'яті
Ви завжди хочете зосередитися на досвіді користувача, який значно зменшиться, якщо ваш сайт має проблеми з пам'яттю .
Проблеми з пам'яттю, як правило, викликані витоком пам'яті, що призведе до погіршення понаднормової роботи веб-сайту, або розмивання пам'яті, коли веб-сайт використовує занадто багато пам'яті.
Щоб відслідковувати використання пам'яті, перейдіть до пункту Додаткові інструменти, а потім Диспетчер завдань , або ж натисніть Shift + Esc. Далі клацніть правою кнопкою миші на заголовку таблиці диспетчера завдань і ввімкніть пам'ять JavaScript.
Джерело: Розробники Google
Тут буде дві колонки. Колонка пам'яті являє собою внутрішню пам'ять, де зберігаються вузли DOM. Значення буде збільшуватися, коли створюються вузли DOM. Інший стовпець - для пам'яті JavaScript. Вас зацікавить номер у прямому ефірі, який відображає кількість доступних об'єктів пам'яті на веб-сторінці. Збільшення числа означає, що об'єкти створюються, або вже існуючі об'єкти зростають.
Можна візуалізувати витоки пам'яті, перейшовши на панель Timeline , увімкнувши прапорець пам'яті і зробивши запис.
7. Знайдіть прихований вміст CSS
Найпоширенішим способом приховування тексту є використання CSS з властивостями "display: none" або "visibility: hidden". Важливо перевірити ці сайти на будь-яку важливу інформацію, яка може бути прихована.
Щоб перевірити це, просто перейдіть до ящика пошуку , до якого можна отримати доступ, натиснувши Ctrl + Shift + F, коли ви відкриєте DevTool. Відкриється панель пошуку, яка дозволяє шукати властивості «приховані» або «відображення: ні» у коді сторінки. Перегляньте код, щоб побачити, що приховано, і в разі необхідності вживайте відповідних заходів.
8. Зрозуміти питання безпеки
Джерело: Розробники Google
Безпека веб-сайту є однією з найважливіших речей під час ведення бізнесу в Інтернеті. Ти можеш перевірте, чи захищена ваша сторінка або незахищені, перейшовши на панель безпеки .
Огляд "Безпека" повідомляє, чи ваша сторінка захищена, і чи має вона безпечне з'єднання та ресурси. Якщо натиснути кнопку " переглянути сертифікат ", ви зможете переглянути сертифікат сервера для основного походження. Незахищена сторінка буде читати повідомлення "ця сторінка не захищена". Можна також використовувати панель ліворуч, щоб перевірити окремі захищені або незахищені джерела. Натискання будь-яких незахищених посилань дасть вам детальну інформацію про те, який запит з цього джерела було передано через HTTP.
9. Перевірте реалізацію вашого прискореного мобільного сайту (AMP)
Для тих, хто реалізує AMP, це важливий, але і простий крок. Ви можете перевірити, чи є якісь проблеми з вашою сторінкою, додавши "# development = 1" до вашого URL-адреси AMP. Далі перевірте панель Console . Потім ви зможете побачити, чи є якісь проблеми, попередження або помилки. Він повідомить вам, у якому рядку сталася помилка, щоб ви могли зробити необхідні дії, щоб виправити її.
10. Проаналізуйте продуктивність виконання
Користувачі очікують, що веб-сайт буде працювати гладко і плавно. Поганий досвід користувачів призведе до високого показника відмов та меншої кількості конверсій. Тому важливо уникати написання JavaScript, що змушує браузер перераховувати макет. Це зупинить роботу прикладних програм і перешкодить взаємодії з користувачем.
До проаналізуйте це , зробіть запис часової шкали . Вам потрібно буде шукати тривалі події Scriptate Script. Якщо є, ви можете включити JS Profiler і повторно виконати запис, щоб отримати більш детальну інформацію про те, які функції JS було викликано, а також, як довго вони завантажувалися.
11. Знайдіть статус HTTP
Коли ви перебуваєте на панелі " Мережа ", щоб перевірити конфігурації заголовків, ви також можете перевірити, чи є якісь перенаправлення, перевіряючи їх статус HTTP. Це дає змогу побачити не тільки перенаправлення, але і тип перенаправлень і стан помилок.
12. Перевірте та видаліть файли cookie
Панель додатків дозволяє переглядати детальну інформацію про cookie, а також видаляти файли cookie.
Після того як ви відкриєте панель Cookies на панелі ліворуч, ви зможете переглядати та видаляти файли cookie , а також змінювати значення файлів cookie. Файли cookie будуть перераховані за доменами.
Джерело: Розробники Google
Існує кілька способів видалення файлів cookie, зокрема:
- Виберіть файл cookie і натисніть кнопку видалення, щоб видалити певну печиво.
- Натисніть кнопку очищення, щоб видалити всі файли cookie з групи.
- Клацніть правою кнопкою миші на значенні домену cookie, а потім виберіть "видалити все з" і видаліть файли cookie з вибраного домену.
13. Очистити сховище
Іноді найкращим вибором є просто видалити всі дані. Для цього перейдіть до панелі " Очистити сховище" на панелі програм . Це дозволяє скасувати реєстрацію сервісних працівників, зберігання та кеші. Якщо потрібно очистити дані, увімкніть поля поруч із категорією, яку потрібно очистити, і натисніть кнопку " очистити дані сайту. "
14. Перевірте анімацію
Джерело: Розробники Google
Ви можете скористатися інспектором аніматора Chrome DevTools для перевіряти та змінювати анімацію на веб-сайті. Щоб отримати доступ до цієї сторінки, перейдіть на панель " Стилі" на панелі " Елементи ", а потім натисніть кнопку " Анімації" . Після цього відкриється вкладка поруч із консольним ящиком, а потім може використовуватися з будь-якої панелі DevTools.
Далі, ви повинні захопити анімацію, запускаючи анімацію, поки сторінка інспектора відкрита. Після захоплення ви можете відтворити його, наведіть курсор на мініатюру на панелі " Огляд" або клацніть і перетягніть червону вертикальну смугу, щоб очистити анімацію вікна перегляду.
Перебуваючи на панелі огляду, клацніть на групі анімації. Панель деталей надасть кожній анімації свій рядок. Щоб виділити її в точку огляду, просто наведіть курсор миші на анімацію. Натисніть анімацію, щоб вибрати її на панелі " Елементи ".
Більш темний лівий розділ являє собою визначення анімації, тоді як зниклий правий розділ представляє ітерації.
Можна змінювати анімацію, використовуючи тривалість анімації, часові рамки ключових кадрів або час затримки початку.
15. Емулюйте датчики
Ви можете використовувати DevTools для емулювати геолокацію і датчики акселерометра . Щоб отримати доступ до елементів керування датчиків, перейдіть до пункту Додаткові інструменти, а потім Датчики.
Ви можете ввімкнути геолокацію, встановивши прапорець Емулювати координати геолокації . Це перевизначить значення позиції для "navigator.geolocation". Він також змоделює випадки, коли дані геолокації недоступні.
Якщо потрібно перевірити дані, що надходять з API орієнтації, встановіть прапорець Акселерометр в області датчиків. Це дозволить включити емулятор акселерометра. Можна керувати трьома параметрами орієнтації - обертанням навколо осі z, нахилу зліва направо і нахилу спереду назад.
Ці Chrome DevTools допоможуть вашому наступному SEO аудиту працювати набагато більш гладко!
Отже, як може DevTools допомогти SEO?