15 Google Chrome DevTools для SEO

  1. 1. Аналіз прадукцыйнасці сеткі
  2. 2. Праверка аптымізацыі мабільных вэб
  3. 3. Вызначыць робяць блакавання рэсурсаў
  4. 4. Праверце асноўныя элементы кантэнту , перайдзіце па спасылцы
  5. 5. Праверце малюнка ALT апісанне
  6. 6. Праблемы Fix памяці
  7. 7. Пошук CSS схаванае змест
  8. 8. Разуменне праблем бяспекі
  9. 9. Пацвердзіць Паскоранае Mobile Старонкі (AMP) ажыццяўленне
  10. 10. Аналіз прадукцыйнасці ць час выканання
  11. 11. Пашукайце статусу HTTP
  12. 12. Праверце і выдаліце печыва
  13. 13. Ачысціць сховішча
  14. 14. Праверце анімацыю
  15. 15. эмуляваць датчыкі

Адным з найбольш карысных інструментаў SEO з'яўляецца адзін, што мы нават не павінны плаціць. Гэты інструмент для Google Chrome DevTools , Гэты інструмент ўбудаваны ў Google Chrome, і дазваляе выправіць многія функцыі SEO на вэб-старонцы.

Каб атрымаць доступ да DevTools, проста націсніце на тры вертыкальныя кропкі на правым куце вашага браўзэра Google Chrome. Далей абярыце Дадатковыя інструменты> Інструменты распрацоўніка. У адваротным выпадку, ярлык, каб адкрыць гэтае меню з'яўляецца Ctrl + Shift + I.

DevTools мае дзевяць меню - меню прылады, элементы, кансоль, крыніцы, сеткі, тэрміны, профілі, прыкладання і бяспека. Усё гэта можа дапамагчы карыстальнікам аптымізаваць свае вэб-сайты.

Бо DevTools можа дапамагчы SEO? Вось 20 пісакі ўсіх , хто працуе ў SEO павінен ведаць і выкарыстоўваць:

1. Аналіз прадукцыйнасці сеткі

DevTool дазваляе аналізаваць час загрузкі старонкі вашага вэб-сайта у меню Network. Каб зрабіць гэта, вам трэба будзе ўключыць «захоп скрыншотаў», які становіцца сінім , калі уключаны. Гэта дазволіць скрыншоты быць прынята падчас загрузкі старонкі.

Пасля завяршэння гэтага і выбралі неабходныя настройкі, перазагрузіце старонку і перайсці да сеткавай панэлі, каб убачыць час загрузкі дадзенай старонкі, і разметка, дзе старонка была разабрана. Для ліквідацыі праблем са хуткасцю, перайдзіце да панэлі аўдыту і націсніце кнопку «Выканаць». Там, вы будзеце мець доступ да спісу рэсурсаў, якія выклікаюць праблему.

2. Праверка аптымізацыі мабільных вэб
Адным з найбольш карысных інструментаў SEO з'яўляецца адзін, што мы нават не павінны плаціць

крыніца: Google Developers

Кожны SEO работнік захоча пратэставаць мабільную аптымізацыю. Гэта таксама дазваляе тэставаць прадукцыйнасць сеткі для мабільных тэлефонаў. Каб зрабіць гэта, проста ўсталюеце сцяжок «адключыць кэш» сцяжок. У меню «няма дросселирования», абярыце Звычайную 2G. Гэта будзе ў стане эмуляваць мабільны прадукцыйнасць, на вашым ноўтбуку ці кампутары.

3. Вызначыць робяць блакавання рэсурсаў

Рэндэру-блакавальныя скрыпты і вялікія запыты часта будуць выклікаць ваш сайт, каб мець павольнае час загрузкі. Вы можаце вызначыць гэтыя рэсурсы пад панэллю сеткі. Гэта пакажа вам, якія JS і CSS рэсурсы загружаныя да DOM, які знаходзіцца ў ніжняй частцы панэлі Сеткі.

4. Праверце асноўныя элементы кантэнту , перайдзіце па спасылцы

Любы бізнэс з вэб-сайта будзе хацець, каб праверыць асноўныя элементы зместу свайго сайта, у тым ліку праз JavaScript аказваюцца элементаў. у той час як Google мае інструменты, якія скануюць і індэкс гэта змест, гэта не заўсёды ідэальна. У выніку, гэта важна ведаць, як праверыць гэта самастойна.

Каб убачыць DOM ў Devtools, перайдзіце на старонку элементаў. Гэта можа выкарыстоўвацца для прагляду элементаў старонкі, уключаючы назву, мета-апісання або зместу старонкі. Пасля гэтага вы будзеце мець магчымасць праверыць, калі ваш кантэнт будзе даступны для Google.

5. Праверце малюнка ALT апісанне

крыніца: Land Search Engine

Ўкладка Elements таксама дазваляе праверыць ваша апісанне малюнка ALT. Проста пстрыкніце правай кнопкай мышы на любы малюнак і вызначце «праверыць.» Кадаванне будзе адлюстроўвацца паказваючы апісанне ALT.

6. Праблемы Fix памяці

Вы заўсёды хочаце, каб засяродзіць увагу на карыстацкі досвед, які будзе значна паменшыць, калі ваш сайт мае праблемы з памяццю ,

Праблемы з памяццю, як правіла, выкліканыя уцечкай памяці, што прывядзе да вэб-сайт, каб паступова атрымаць горш звышурочна, або раздзіманне памяці, дзе вэб-сайт выкарыстоўвае занадта шмат памяці.

Для таго, каб кантраляваць выкарыстанне памяці, перайдзіце да Дадатковыя прылады , а затым дыспетчар задач, альбо націсніце Shift + Esc. Затым пстрыкніце правай кнопкай мышы на загаловак табліцы дыспетчара задач і ўключыць памяць JavaScript.

Затым пстрыкніце правай кнопкай мышы на загаловак табліцы дыспетчара задач і ўключыць памяць JavaScript

крыніца: Google Developers

Тут будуць дзве калоны. Слупок памяці ўяўляе сабой убудаваную памяць, у якой вузлы DOM захоўваецца. Значэнне будзе павялічвацца, калі становяцца створаны DOM вузлоў. Іншая калонка для памяці JavaScript. Вы будзеце зацікаўлены ў жывой нумар, які ўяўляе, колькі памяці дасягальныя аб'екты на вашай вэб-старонцы з дапамогай. Павелічэнне колькасці азначае аб'екты ствараюцца або ўжо існуючыя аб'екты растуць.

Вы можаце візуалізаваць ўцечкі памяці, перамясціўшыся на панэлі часовай шкалы, што дазваляе сцяжок памяці і зрабіць запіс.

7. Пошук CSS схаванае змест

Звычайны спосаб схаваць тэкст з'яўляецца выкарыстанне CSS з «дысплей: няма» або «бачнасць: схаваныя» ўласцівасці. Вельмі важна, каб праверыць гэтыя сайты для любой важнай інфармацыі, якая можа быць схаванай.

Каб праверыць гэта, проста перайдзіце ў Search скрыню, які можна атрымаць доступ, націснуўшы Ctrl + Shift + F , як толькі вы адкрываеце DevTool. Адкрыецца панэль пошуку, якая дазваляе шукаць «схаваныя» або «дысплей: няма» уласцівасцяў у кодзе старонкі. Праглядзіце код, каб убачыць тое, што ўтоена і прыняць адпаведныя меры ў выпадку неабходнасці.

8. Разуменне праблем бяспекі

крыніца: Google Developers

Бяспеку вэб-сайта з'яўляецца адным з самых важных рэчаў, якія пры запуску бізнесу ў Інтэрнэце. Ты можаш праверыць, ці з'яўляецца ваша старонка абаронена або неабаронены шляхам пераходу да панэлі бяспекі.

Агляд бяспекі кажа вам, ці з'яўляецца ваша старонка знаходзіцца ў бяспецы, і ці мае гэта абароненае злучэнне і рэсурсы. Пры націску на кнопку «Сертыфікат» дазваляе праглядзець сертыфікат сервера для асноўнага паходжання. Няўзброеныя старонка будзе чытаць паведамленне "гэтая старонка не з'яўляецца бяспечнай. Вы можаце таксама выкарыстоўваць левую панэль, каб праверыць асобнае абароненае або неахаванае паходжанне. Пры націску на любы небяспечныя спасылкі дасць вам інфармацыю, на якой быў пададзены запыт ад гэтага паходжання праз HTTP.

9. Пацвердзіць Паскоранае Mobile Старонкі (AMP) ажыццяўленне

Для тых, хто рэалізуе AMP, гэта важна, але і просты крок распачаць. Вы можаце праверыць, калі ёсць якія-небудзь праблемы з вашай старонкай, дадаўшы «# развіцця = 1» да вашага AMP URL. Затым праверце панэль кансолі. Пасля гэтага вы зможаце ўбачыць, калі ёсць якія-небудзь пытанні, памылкі або папярэджання. Ён скажа вам, якая лінія памылка адбылася, так што вы можаце прыняць неабходныя меры, каб выправіць гэта.

10. Аналіз прадукцыйнасці ць час выканання

Карыстальнікі чакаюць, што вэб-сайт, каб выконваць плаўна і лёгка. Бедны карыстацкі досвед прывядзе да высокай хуткасці адскоку і менш канверсіі. Таму вельмі важна, каб пазбегнуць напісання JavaScript, які прымушае браўзэр вырабіць пераразлік макета. Гэта будзе тармазіць прадукцыйнасць прыкладанняў і замінаць ўзаемадзеянню карыстальніка.

да прааналізаваць гэты , Зрабіце запіс часовай шкалы. Вы збіраецеся трэба шукаць доўга ацэньваць падзея сцэнара. Калі ёсць якія-небудзь, вы можаце ўключыць JS Profiler і паўторна зрабіць запіс, каб атрымаць больш падрабязную інфармацыю пра тое, якія былі названыя функцыі JS, а таксама як доўга яны ўзялі для загрузкі.

11. Пашукайце статусу HTTP

Калі вы знаходзіцеся ў сеткі панэлі , каб праверыць канфігурацыю загалоўкаў, вы можаце таксама праверыць, ці ёсць пераадрасоўвае па праверцы статусу HTTP. Гэта дазваляе ўбачыць не толькі тады, калі ён перанакіроўвае, але які тып перанакіроўвае гэта і любыя статуты памылак.

12. Праверце і выдаліце печыва

Панэль прыкладанняў дазваляе праглядаць падрабязную інфармацыю аб печыва, а таксама выдаліць печыва.

Пасля таго, як вы адкрыеце панэль Cookies ў левай панэлі, вы зможаце праглядаць і выдаляць печыва , А таксама змяняць значэння куков. Печыва будуць пералічаныя па дамене.

крыніца: Google Developers

Ёсць некалькі спосабаў выдалення печыва, у тым ліку:

  • Выберыце печыва і націсніце кнопку Выдаліць, каб выдаліць адзін канкрэтны печыва.
  • Націсніце кнопку Ачысціць, каб выдаліць усе печыва з групы.
  • Пстрыкніце правай кнопкай мышы на значэнні дамена з печыва, а затым выбраць «ачысціць усё, што ад» і выдаліць печыва з абранай вобласці.
13. Ачысціць сховішча

Часам лепшы выбар, каб проста сцерці ўсе дадзеныя. Каб зрабіць гэта, перайдзіце да панэлі Clear Storage ў панэлі прыкладанняў. Гэта дазваляе разрегистрировать работнік сэрвісу, захоўванне i кэш-памяць. Калі вы хочаце, каб ачысціць дадзеныя, уключыце сцяжкі побач з катэгорыяй, якую хочаце выдаліць, і націсніце кнопку « выразныя дадзеныя сайта. »

14. Праверце анімацыю

крыніца: Google Developers

Вы можаце выкарыстоўваць Chrome DevTools Аніматар інспектар па правяраць і змяняць анімацыю на вэб-сайце. Каб атрымаць доступ да гэтага, перайдзіце да панэлі Стылі ў панэлі элементаў, а затым націсніце кнопку Animations. Гэта дазволіць затым адкрыць ўкладку побач з кансоллю паліцы, а затым можа быць выкарыстана з любой панэлі Devtools.

Далей, вы павінны захапіць анімацыю запуску анімацыі, пакуль старонка інспектараў адкрыта. Пасля таго, як захапілі, вы можаце прайграць яго пры навядзенні на мініяцюру ў агляднай панэлі, або націсніце і перацягнуць чырвоную вертыкальную паласу , каб вычысціць краявідных анімацыі.

Хоць да гэтага часу ў вобласці Агляд націсніце на групу анімацыі. У вобласці звестак будзе даваць кожнай анімацыі сваю ўласную радок. Для таго, каб вылучыць яго ў пункце гледжання, проста навядзіце курсор мышы на анімацыю. Націсніце на анімацыю , каб выбраць яго ў панэлі элементаў.

Больш цёмная левая секцыя ўяўляе сабой вызначэнне анімацыі, у той час як згублена правая частка ўяўляе сабой ітэрацыю.

Вы можаце змяніць анімацыю, выкарыстоўваючы працягласць анімацыі, ключавы кадр таймінгі або пачаць часовую затрымку.

15. эмуляваць датчыкі

Вы можаце выкарыстоўваць DevTools для эмуляваць геоположение і акселерометр датчыкі , Для доступу да элементаў кіравання датчыкам, перайдзіце да Дадатковым інструментам, а затым датчыкі.

Вы можаце ўключыць геолокации, выбраўшы geolocations эмуляваць каардынаты сцяжок. Гэта анулюе значэнне пазіцый «navigator.geolocation». Яна таксама будзе імітаваць выпадкі, калі геолокации дадзеныя недаступныя.

Калі вам неабходна праверыць дадзеныя , якія паступаюць ад арыентацыі API, усталюйце сцяжок акселерометр ўнутры панэлі датчыкаў. Гэта дазволіць вам ўключыць акселерометр эмулятар. Вы можаце кіраваць трыма параметрамі арыентацыі - кручэнне вакол восі, злева направа і нахілу пярэдняй да задняй часткі нахілу.

Гэтыя Chrome DevTools дапаможа ваш наступны SEO аўдыт працаваць нашмат больш гладка!

Бо DevTools можа дапамагчы SEO?
Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости