Користење на Chrome DevTools за смена на проблеми - Упатства за Семалт



Chrome DevTools не е нешто што е туѓо за повеќето професионалци за оптимизација. Одговор, од друга страна, тоа може да биде една од оние работи што допрва ќе ги научите. Па, кај „Семалт“, дел од нашиот процес во служба на потребите за оптимизација на нашиот клиент се потпира на нашиот начин на едукација за потребните аспекти на потребите на вашата веб-страница.

Алатките за развој на Chrome за оптимизација е важна бидејќи ја користиме за смена на проблеми. За да овозможиме лесна комуникација помеѓу Семалт и нашите клиенти, ние би сакале да ви покажеме како ја користиме оваа алатка за да ги решиме проблемите со оптимизација за веб-страницата.

Со Chrome Dev Tools, можеме да ги лоцираме основните проблеми со оптимизација, кои се движат од полжавоста на веб-страницата до нејзините перформанси. Во оваа статија, ќе истакнеме три начини на кои ги користиме овие алатки за подобро да им служиме на нашите клиенти.

Што е Chrome DevTools?

DevTools или Chrome DevTools во целост е збир на алатки за помош на веб-развивачи кои се вградени директно во прелистувачот Chrome. Ние ги користиме овие алатки при уредување на страниците во моментот и навремено ги дијагностицираме проблемите. Тоа ни помага да градиме подобри веб-страници за нашите клиенти, но можеме да го сториме тоа побрзо и да осигуриме дека тие се совршени.

Сите можеме да се согласиме во голема мера дека Google Chrome е една од најважните пакет алатки во арсеналот на кој било SEO професионалец. Без оглед на софтверот за оптимизација што го користите за автоматизација на ревизии или дијагностицирање на проблеми со оптимизација за обем, Chrome DevTools останува што мора да се има. Благодарение на неговата способност да обезбеди клучни начини за проверка на проблемите со оптимизација, многу професионалци за оптимизација, вклучувајќи го и Семалт, го користеа тоа одново и време.

Може да поминеме повеќе време дискутирајќи за многу начини на кои Chrome DevTools може да им помогне на професионалците и веб-развивачите, но нашето внимание е насочено кон нешто што е поконкретно. Еве, ние сакаме да споделиме со вас неколку различни случаи кога се потпиравме на Chrome DevTools за да откриеме и поправиме проблем.

Еве три ситуации дека ако имате Chrome DevTools не би било лоша идеја:

Поставување на Chrome DevTools за смена на проблеми

Шансите се дека никогаш не сте пробале да користите Chrome DevTools. Па, пристапот до него е едноставен како кликнување на веб-страница на SERP и кликнување на копче за преглед. Како професионалци за оптимизација, мора да бидеме повнимателни од тоа, но имате идеја за тоа како се користи. На „Семалт“, ние ја користиме и рамнината „Елемент“, што ни овозможува да го набудуваме ДОМ и ЦСС, што овозможува неколку други различни алатки во фиоката на конзолата.

Youе ве водиме чекор по чекор процес за тоа како се користи оваа алатка при решавање проблеми на СЕО.

За да започнете, треба да кликнете со десното копче на глувчето и потоа изберете преглед. Стандардно, ќе видите како се појавува панелот со елементи, и ова ви дава преглед на ДОМ и природата на листот за стил што се користи при конструирање на страницата.

Имањето на овој поглед ни нуди многу работи во кои треба да се нурнеме; сепак, ние им овозможуваме на фиоката на конзолата целосно да го искористи пакетот со алатки.

Кликнете на точките што се појавуваат веднаш до иконата за поставки и движете се надолу се додека не наидеме на опцијата Show конзола за фиоки. Алтернативно, едноставно кликнуваме на копчето за бегство.

Со овозможена конзола и панел со елементи, корисниците можат да добијат увид во кодот што е даден во ДОМ. Корисниците исто така ќе ги видат листовите со стилови што биле користени за сликање на кодот во прелистувачот. Како и неколку други алатки до кои имате пристап од фиоката на конзолата.

За почетниците, фиоката на конзолата можеби не ја покажува самата конзола, но откако ќе го користите Chrome DevTools некое време, фиоката на конзолата почнува да ја покажува самата конзола. Вашиот панел за конзоли ви овозможува да прегледувате најавени пораки, како и да извршувате JavaScript. Не би нурнале во тоа денес.

Наместо тоа, еве три дополнителни алатки што ќе ги разгледаме:
За да ги пронајдете овие алатки, изберете повеќе алатки и изберете ја секоја од овие три ставки, така што тие ќе се појават како јазичиња во фиоката на конзолата. Откако ќе ги овозможиме овие три панели, можеме да започнеме со смена на проблеми.

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

Префрлувањето на кориснички агент е еден од најнезабележаните начини на употреба на DevTools. Ова е едноставен тест што ни помогна да откриеме неколку различни проблеми бидејќи обезбедува увид во тоа како Гуглбот ги гледа и обработува информатичките карактеристики на една страница.

За нашиот тим од истражувачки професионалци за оптимизација, DevTools се користи како достоен и доверлив лупа, овозможувајќи ни да зумираме прашања за веб-страница, не само што не дозволуваме развој на вакви проблеми, туку и за откривање на основните причини за ваквите проблеми.

Како можете да го вклучите вашиот кориснички агент на Chrome DevTools?

Кога го менувате вашиот кориснички агент во Chrome, ќе треба да го користите табулаторот за мрежни услови во фиоката на конзолата. За да го направите ова, отштиклирајте одберете автоматски, што ви овозможува да ја прегледувате содржината користејќи смартфон Googlebot, Bingbot или голем број други кориснички агенти за да видите како се доставува вашата содржина.

Во случај кога Google не ја прикажува ажурираната ознака на насловот или мета-описот во SERP, без сомнение сопственикот на таквата веб-страница ќе биде загрижен. Разбирањето зошто Google избра да користи сосема друга ознака за наслов или не ја ажурираше ознаката е важно за да се осигура дека промените што сте ги направиле се имплементирани.

Користење на Chrom DevTool за случај на мобилна алтернативна страница

Во сличен случај, откако го сменивме корисничкиот агент на паметен телефон Googlebot, откривме дека страницата сè уште служи алтернативна мобилна страница на Googlebot. Но, бидејќи Гугл веќе се префрли на индексирање на првиот мобилен телефон, тој ги обработи и индексираше промените на мобилната страница, но не успеа да ги фати ажурирањата направени на десктоп верзијата на доменот.

Можеби претпоставувате дека мобилните страници се некои остатоци, но тие навистина сè уште постојат.

Користење на Chrome DevTools при забележување на прекумерна заштита на серверот

Постојат многу лица со злонамерни намери на мрежата. Многу хакери и злонамерни злосторници се обидуваат да го користат Google против веб-страниците на Интернет. Поради оваа причина, некои сервери стакнуваат CDN и други даватели на хостинг може да понудат одредени вградени карактеристики што ги запираат измамите на Googlebot кога нивната вистинска намера е да ги спречат несаканите роботи за влечење пристап до страницата. Во преголем напор, овие страници може да го блокираат Googlebot да добие пристап до страницата. Понекогаш, корисниците гледаат пораки на кои пишува „Неовластено барање е блокирано“.

Ако се сретнеме со такви пораки на SERP на Google, веднаш знаеме дека е фаул и покрај тоа што прелистувачот ја вчитува содржината без проблеми.

Со користење на функцијата прекинувач Корисник-агент, можеме да видиме дека страницата ја сервира таа порака веднаш штом го поставиме Корисникот-агент на паметен телефон Googlebot.

Дијагностицирање на основните мрежни мрежи во DevTools

Табулаторот за перформанси е една од најважните карактеристики на DevTools. Служи како одлична порта за решавање проблеми, кои влијаат на брзината и перформансите на страницата. На општа забелешка, DevTools може да понуди некои применливи информации кога станува збор за основни веб-витали.

Мерилата што ги формираат Core Web Vital на Google веќе подолго време се дел од извештаите за брзина и перформанси на страницата. Многу е важно професионалците за оптимизација да знаат како да ги расчленат овие проблеми. Како веб-администратори, станавме поакутно свесни за важноста на основните веб-витали за ефикасноста на пребарувањето.

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

Повторно проверете ги заглавјата на HTTP и прегледајте го неискористениот код

Дали некогаш сте слушнале за меките 404 во вашата ревизија на СЕО? Па, меки 404-ти се кога прелистувачот може да прикаже 404 страница, но тие враќаат 200 код за одговор на ОК.
Во некои случаи, содржината може да се вчита точно како што се очекуваше на прелистувачот; сепак, кодот за одговор на HTTP може да покаже грешка 404 или 302. Исто така може да биде генерално неточно или не она што го очекувавте. Во секој случај, корисно е да го видите кодот за одговор на HTTP за секоја страница и ресурс.

Иако има мноштво неверојатни екстензии на Chrome кои ви даваат вредни информации за кодовите за одговор со помош на DevTools, ви овозможуваат директно да ги проверите овие информации.

Во овој момент, DevTools ги покажува сите индивидуални ресурси кои се повикуваат да ја соберат страницата. Тоа ги вклучува соодветните статусни кодови и визуелизацијата на водопадот.

Заклучок

Со Chrome DevTools, имате можност да ги пронајдете и да ги решите основните проблеми што ја спречуваат вашата веб-страница да ги достигне своите вистински потенцијали. DevTools се специфично корисни во вашите технички ревизии. Покрај овие, уживате и во брзина кога користите DevTools. Без да ги напуштиме нашите веб-прелистувачи, нашиот тим во Семалт може да се почувствува овластен да забележи проблеми со проверка од индексирање на веб-страница до тоа колку таа добро функционира.

Семалт е тука за да ви помогне да го извадите најдоброто на вашата веб-страница и се надеваме дека ќе стапите во контакт со нашиот тим. Ние со нетрпение очекуваме да слушнеме од тебе.