Staň se Chrome DevTools SEO ninjou!


Hodně marketérů vůbec nezná hodnotu nástroje, ukrytého přímo uvnitř prohlížeče Chrome. Takzvané Chrome DevTools jsou integrovaném v každém tomto prohlížeči a přinášejí uživateli hromadu funkcionalit, které jim mohou ulehčit život.

Nejinak tomu je i v případě SEO specialistů, pro které jsme připravili několik tipů na funkcionality, které jim Chrome DevTools nabízí a které jim mohou zefektivnit práci:

#1 Screenshot stránky bez použití rozšíření

Hodně lidí si instaluje všelijaká rozšíření, která pořídí screenshot viditelné plochy stránky nebo stránky celé. Co ale mnoho lidí neví je, že tato rozšíření v drtivé většině případů nepotřebují, jelikož Chrome dokáže takovou fotku pořídit sám o sobě.

Vše, co je k tomu potřeba udělat je:

  • Otevřit DevTools pomocí F12 nebo kliknout kamkoli na stránce pravým tlačítkem a zvolit Prozkoumat
  • Stisknout CTRL+SHIFT+P
  • Napsat “screenshot”
  • Vybrat, zda chtějí screenshot pouze viditelné části nebo celého webu
Screenshot stránky s Devtools

Můžete si také nasimulovat zobrazení stránky z různých zařízení a udělat screenshot verze webu pro dané zařízení (mobily či tablety):

Screenshot mobilní verze stránky s Devtools

#2 Najdi a zobraz si odkaz

Občas přijde chvíle, kdy si linkbuilder potřebuje zkontrolovat odkaz nebo najít nějaký prvek na stránce, což je v případě rozsáhlého obsahu nebo mnoha komentářů často zdlouhavé. Nejjednodušším způsobem, jak si tuto práci ulehčit (místo ručního procházení) je si tento odkaz automaticky najít pomocí devtools:

  • Otevřit DevTools pomocí F12
  • Kliknout na záložku Elements
  • Stisknout CTRL+F a vložit fragment, pomocí kterého se identifikuje ve zdrojovém kódu odkaz nebo prvek
  • Pravým tlačítkem kliknout ve zdrojovém kódu na daný prvek a zvolit Scroll into view
Jak najít URL pomocí devtools

#3 Kontrola jak vypadá URL bez javascriptu

Pokud se chcete podívat, jak vypadá stránka pro uživatele bez javascriptu nebo některé roboty vyhledávačů, není nic jednoduššího, než používat právě devtools:

  • Otevřit DevTools pomocí F12
  • Kliknout na Settings nebo stisknout F1
  • Kliknout na Disable Javascript checkbox
  • Obnovit URL
Check how the URL looks without javascript

#4 Nalezení skrytého obsahu

Obsahuje stránka nějaký skrytý obsah? A je tomu tak správně? Zkontrolujte skrytý obsah ve zdrojovém kódu:

  • Otevřit DevTools pomocí F12
  • Klikněte na záložku Element
  • Stiskněte CTRL+F

Ve zdrojovém kódu zkuste hledat prvky, které obsahují fragment “hidden” nebo “display:none” a zkontrolujte jejich obsah

Hledání skrytého obsahu

#5 Emulace mobilní verze či verze pro tablety

Podívejte se, jak může váš web vypadat na mobilním zařízení či na tabletu. Vše co k tomu potřebujete je:

  • Otevřit DevTools pomocí F12
  • Kliknout na Toggle device bar nebo stisknout CTRL+SHIFT+M
  • Zvolit zařízení, které chcete emulovat
Emulace a validace mobilní verze webu

#6 Identifikace problémů s rychlostí načítání a návrhy na úpravy

Myslíte, že PageSpeed insight jsou jediným nástrojem od Google, který vám může pomoct při optimalizaci rychlost načítání stránky a její použitelnosti? Chyba. Google má mnoho nástrojů, které jdou na ruku vývojářům a jeden z nich je právě součástí Chrome devtools.

Tento nástroje se jmenuje Lighthouse a jedná se o skvělý nástroj pro webmastery, který se zaměřuje na rychlost a použitelnost webu. Jako výstup analýzy poté navrací skóre URL ze 4 různých pohledů:

  • Progressive Web App
  • Perfromance
  • Best practices
  • Accessibility
Identifikace problémů pomoci lighthouse od Google

Po vytvoření vlastní analýzy dostane webmaster report podobný tomu níže. Po kliknutí na jednotlivé sekce je uživateli vysvětleno, v čem v testu selhal a jak to napravit.

Výstup analýzy

A co vy? Používáte DevTools ve své práci ve vztahu k SEO? Podělte se s námi o své postupy v komentářích!

Líbí se ti článek? Sdílej s přáteli!     To se mi líbí Tweet Google +

Komentáře



Filip Podstavec

Marketing Miner byl původně nástrojem, který jsem používal pro zefektivnění své denní práce a důležitých podkladů pro své rozhodování. Touto cestou jej hodlám vést i do budoucna a pracovat na možnosti jednoduchého každodenního využívání dat mezi odborníky

Filip Podstavec


Podobné články

Jak se bude měnit SEO v roce 2017 a na čem by měly weby zapracovat?


 Filip Podstavec


  30 minut čtení
  18. 7. 2017.

Chci přečíst 

Analýza klíčových slov krok za krokem


 Filip Podstavec


  18 minut čtení
  26. 7. 2017.

Chci přečíst 

5 věcí, které Google potvrdil o sitemap v posledních týdnech


 Filip Podstavec


  6 minut čtení
  21. 8. 2017.

Chci přečíst 




Komentáře




Že ses ještě nerozhodl?

Nevadí, můžeš si nás zdarma a jednoduše otestovat.