Використання Chrome DevTools для усунення несправностей - підказки Semalt



Chrome DevTools - це не те, що чуже для більшості фахівців із SEO. З іншого боку, для С ентів це може бути однією з тих речей, яким ви ще не навчилися. Що ж, у Semalt частина нашого процесу обслуговування потреб клієнта в SEO залежить від нашого способу навчання вас про необхідні аспекти того, що потрібно вашому веб-сайту.

Chrome Dev Tools для SEO є важливим, оскільки ми використовуємо його для усунення несправностей. Щоб забезпечити просте спілкування між Semalt та нашими клієнтами, ми хотіли б показати вам, як ми використовуємо цей інструмент для вирішення проблем SEO на вашому веб-сайті.

За допомогою Chrome Dev Tools ми можемо знайти основні проблеми SEO, від сканування веб-сайту до його продуктивності. У цій статті ми виділимо три способи використання цих інструментів для кращого обслуговування наших клієнтів.

Що таке Chrome DevTools?

DevTools або Chrome DevTools повністю - це набір інструментів допомоги веб-розробникам, які вбудовані безпосередньо у браузер Chrome. Ми використовуємо ці інструменти для редагування сторінок на льоту та оперативно діагностуємо проблеми. Це допомагає нам створювати кращі веб-сайти для наших клієнтів, але ми можемо робити це швидше і гарантувати, що вони ідеальні.

Ми всі можемо погодитися з тим, що Google Chrome є одним з найважливіших наборів інструментів в арсеналі будь-якого SEO-професіонала. Незалежно від програмного забезпечення для SEO, яке ви використовуєте для автоматизації аудитів або діагностування проблем із SEO, Chrome DevTools залишається необхідним. Завдяки своїй здатності надавати найважливіші способи перевіряти проблеми SEO на льоту, багато фахівців із SEO, включаючи Semalt, раз за разом користуються цим.

Ми могли б витратити більше часу на обговорення багатьох способів, як Chrome DevTools може допомогти професіоналам та веб-розробникам, але наша увага приділяється дещо більш конкретному. Тут ми хочемо поділитися з вами кількома різними випадками, коли ми покладались на Chrome DevTools для виявлення та усунення проблеми.

Ось три ситуації, коли наявність Chrome DevTools не буде поганою ідеєю:

Налаштування Chrome DevTools для усунення несправностей

Швидше за все, ви ніколи не пробували використовувати Chrome DevTools. Ну, доступ до нього такий же простий, як натискання веб-сайту в SERP та натискання кнопки перевірки. Як професіонали SEO, ми повинні бути обережнішими, але ви маєте уявлення про те, як це використовується. У Semalt ми використовуємо як площину Element, яка дозволяє нам спостерігати DOM, так і CSS, що дозволяє кілька інших різних інструментів у шухляді консолі.

Ми проведемо вам покроковий процес використання цього інструменту для пошуку та усунення несправностей.

Для початку слід клацнути правою кнопкою миші, а потім вибрати перевірити. За замовчуванням ви побачите, як з'являється панель елементів, і це дає вам уявлення про DOM та характер таблиці стилів, яка використовується при побудові сторінки.

Маючи такий погляд, ми маємо багато речей, у які можна зануритися; однак ми надаємо можливість консольному ящику повною мірою скористатися набором інструментів.

Клацніть на крапки, що з’являються поруч із піктограмою налаштувань, і прокрутіть вниз, поки ми не зустрінемо опцію Показати шухляду консолі. Крім того, ми просто натискаємо клавішу втечі.

Якщо консоль і панель елементів увімкнені, користувачі можуть побачити код, який був відображений у DOM. Користувачі також побачать таблиці стилів, які використовувались для написання коду в браузері. А також кілька інших інструментів, до яких ви маєте доступ із шухляди консолі.

Для початківців шухляда консолі може не відображати саму консоль, але після того, як ви деякий час використовували Chrome DevTools, панель консолі починає відображати саму консоль. Панель консолі дозволяє переглядати зареєстровані повідомлення, а також запускати javascript. Сьогодні ми б не занурились у це.

Натомість ось три додаткові інструменти, які ми розглянемо:
Щоб знайти ці інструменти, виберіть більше інструментів і виберіть кожен із цих трьох елементів, щоб вони відображалися як вкладки у шухляді консолі. Після увімкнення цих трьох панелей ми можемо розпочати усунення несправностей.

Переключення агента користувача в DevTools

Переключення User-Agent - один із найбільш ігноруваних способів використання DevTools. Це простий тест, який допоміг нам розкрити кілька різних питань, оскільки він дає уявлення про те, як Googlebot бачить та обробляє інформаційні функції на сайті.

Для нашої команди спеціалістів із розслідувань SEO DevTools використовується як гідна і довірена лупа, що дозволяє нам Наближати проблеми на веб-сайті, щоб не тільки не допустити їх розвитку, а й виявити основні причини таких проблем.

Як ви можете перемкнути свого агента користувача на Chrome DevTools?

Під час перемикання вашого агента користувача в Chrome вам потрібно буде використовувати вкладку мережевих умов у панелі консолі. Для цього ви знімаєте прапорець Автоматично, що дозволяє переглядати вміст за допомогою смартфона Googlebot, Bingbot або ряду інших користувацьких агентів, щоб побачити, як доставляється ваш вміст.

У випадку, коли Google не відображає оновлений тег заголовка або метаопис в SERP, без сумніву, власник такого веб-сайту буде стурбований. Розуміння того, чому Google вирішив використовувати зовсім інший тег заголовка або не вдалося оновити тег, є важливим для забезпечення впровадження внесених вами змін.

Використання Chrom DevTool для випадку мобільного альтернативного сайту

У подібному випадку, після переключення агента користувача на смартфон Googlebot, ми виявили, що сайт все ще обслуговує альтернативний мобільний сайт для Googlebot. Але оскільки Google вже перейшов до індексації мобільних пристроїв, він обробив та проіндексував зміни на мобільному веб-сайті, але не зміг вловити оновлення, внесені до настільної версії Домену.

Можна припустити, що сайти для мобільних пристроїв - це якась реліквія, але вони справді все ще існують.

Використання Chrome DevTools для виявлення надмірного захисту сервера

В Інтернеті є багато людей зі зловмисними намірами. Багато хакерів і зловмисників намагаються використовувати Google проти веб-сайтів в Інтернеті. З цієї причини деякі серверні стеки CDN та інші провайдери хостингу можуть пропонувати певні вбудовані функції, які зупиняють підробки Googlebot, коли їх фактичний намір полягає у тому, щоб зупинити сканери, які не бажають отримати доступ до сайту. Завдяки надмірним зусиллям ці веб-сайти можуть в кінцевому підсумку заблокувати Googlebot доступ до сайту. Іноді користувачі бачать повідомлення із написом "Несанкціонований запит заблоковано".

Якщо ми зустрічаємо подібні повідомлення в SERP Google, ми відразу знаємо, що є фол, навіть якщо браузер завантажує вміст без проблем.

За допомогою функції перемикання User-Agent ми бачимо, що сайт подає це повідомлення, як тільки ми встановлюємо User-Agent на Googlebot Smartphone.

Діагностика основних веб-ресурсів у DevTools

Вкладка продуктивності є однією з найважливіших функцій DevTools. Він служить чудовим шлюзом для вирішення проблем, які впливають на швидкість і продуктивність сторінки. Загалом, DevTools може запропонувати деяку корисну інформацію, коли мова заходить про основні веб-важливі функції.

Показники, що формують основний веб-сервіс Google, вже деякий час є частиною звітів про швидкість та ефективність сторінок. Дуже важливо, щоб спеціалісти з SEO були знайомими з тим, як розбирати ці проблеми. Як веб-майстри, ми глибше усвідомили важливість основних життєво важливих веб-параметрів для ефективності пошуку.

Використовуючи вкладку продуктивності в DevTools, ми робимо крок ближче до кращого розуміння важливих веб-показників.

Перевірте заголовки HTTP і перегляньте невикористаний код

Ви коли-небудь чули про м'які 404-ки під час своїх аудитів SEO? Ну, м’які 404 - це коли браузер може показати сторінку 404, але вони повертають код відповіді 200 OK.
У деяких випадках вміст може завантажуватися в браузері точно так, як очікувалося; однак код відповіді HTTP може відображати помилку 404 або 302. Це також може бути загалом неправильним або не таким, як ви очікували. У будь-якому випадку корисно бачити код відповіді HTTP для кожної сторінки та ресурсу.

Хоча існує безліч дивовижних розширень Chrome, які надають вам цінну інформацію про коди відповідей за допомогою DevTools, що дозволяє вам безпосередньо перевіряти цю інформацію.

На цьому етапі DevTools показує всі окремі ресурси, які викликаються для компіляції сторінки. Це включає відповідні коди стану та візуалізацію водоспаду.

Висновок

За допомогою Chrome DevTools ви можете знаходити та вирішувати основні проблеми, які перешкоджають вашому веб-сайту досягти справжнього потенціалу. DevTools особливо корисні для ваших технічних перевірок. На додаток до цього, ви також насолоджуєтесь швидкістю, використовуючи DevTools. Не виходячи з веб-браузерів, наша команда Semalt може відчувати себе повноваженням виявляти проблеми, пов’язані із скануванням веб-сайту, наскільки добре він працює.

Семальт тут, щоб допомогти вам показати найкраще на вашому веб-сайті, і ми сподіваємось, що ви зв’яжетеся з нашою командою. Ми з нетерпінням чекаємо від вас.


mass gmail