Използване на Chrome DevTools за отстраняване на неизправности - Semalt Prompts



Chrome DevTools не е нещо, което е чуждо за повечето SEO специалисти. От друга страна, за Ñ lients, това може да е едно от нещата, които тепърва ще научите. Е, в 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, който позволява няколко други различни инструмента в чекмеджето на конзолата.

Ще ви отведем стъпка по стъпка как този инструмент се използва при отстраняване на неизправности при SEO.

За да започнете, трябва да щракнете с десния бутон и след това да изберете проверка. По подразбиране ще видите как се появява панелът с елементи и това ви дава представа за 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 може да предложи информация за действие, когато става въпрос за основни жизненоважни уеб параметри.

Показателите, които формират Core Web Vitals на Google, са част от отчетите за скоростта на страницата и ефективността от известно време. Много е важно SEO специалистите да са запознати с начина на дисекция на тези проблеми. Като уебмастъри, ние осъзнахме по-добре значението на основните жизненоважни уеб елементи за ефективността на търсенето.

Когато използваме раздела за ефективност в DevTools, правим крачка по-близо до разбирането на важни уеб показатели.

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

Чували ли сте някога за меки 404s при вашите SEO одити? Е, меките 404 са, когато браузърът може да покаже страница 404, но те връщат код за отговор 200 OK.
В някои случаи съдържанието може да се зареди точно както се очаква в браузъра; HTTP кодът за отговор обаче може да показва грешка 404 или 302. Също така може да бъде погрешно или не това, което сте очаквали. Така или иначе е полезно да видите HTTP кода за отговор за всяка страница и ресурс.

Въпреки че има множество невероятни разширения на Chrome, които ви дават ценна информация за кодовете за отговор, използвайки DevTools, можете да ви позволи да проверите тази информация директно.

В този момент DevTools показва всички отделни ресурси, извикани за компилиране на страницата. Това включва съответните кодове на състоянието и визуализация на водопада.

Заключение

С Chrome DevTools имате възможността да намирате и решавате основните проблеми, които спират уебсайта Ви да достигне истинския си потенциал. DevTools са особено полезни при технически одити. В допълнение към тях, вие също се радвате на скорост, когато използвате DevTools. Без да напускаме нашите уеб браузъри, нашият екип в Semalt може да се почувства овластен да забелязва проблеми при проверка от обхождането на уебсайт до това колко добре се представя.

Семалт е тук, за да ви помогне да изведете най-доброто от вашия уебсайт и се надяваме да се свържете с нашия екип. Очакваме да се чуем.