pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Guia de Extração XPath Screaming Frog

Este artigo explica como podemos usar o recurso de extração personalizado do Screaming Frog SEO para extrair informações de um site. O recurso de extração personalizado permite que você extraia praticamente qualquer conteúdo do código fonte HTML.

Como exemplo apresento diversas extração personalizadas. Você pode copiar os exemplos e modificar as expressões para se adaptarem ao seu cenário.

Por que usar a extração personalizada? Screaming Frog, por padrão, coleta muitas informações relevantes que auxilia a análise de SEO, como: títulos de página, elementos H1 e h2, tags canônicas etc. Mas e se você quiser extrair algumas informações como H3 e H4, ou contar o número de ocorrência de um determinado elemento. Isso pode se necessário para lhe ajudar na reestruturação da arquitetura da informações do site, por exemplo.

O que é o XPath?

Linguagem de consulta utilizada para localizar e processar itens em documentos XML. As expressões XPath podem ser usadas em HTML também, já que possui uma estrutura hierárquica semelhante ao XML. É uma ferramenta versátil para navegar pelos elementos e atributos de um documento HTML e extrair seu conteúdo.

Além do XPath temos no Screaming Frog as opções de CSSPath e Regex. Eu particularmente tenho preferência em usar o XPath e uso com mais frequência que os outros métodos de extração.

Como usar a extração personalizada do Screaming Frog

Para acessar o recurso Extração personalizada Clique em Configuration > Custom > Extraction.

Acessando as opções de extração - screaming frog

Acessando as opções de extração

Temos 10 campos que podem ser personalizados para extrair informações de páginas HTML. Abaixo apresento parte dessa janela onde configuramos as regras de extração:

A janela abaixo pode variar de acordo com a versão do seu programa

Configurando extração personalizada

Janela de extração screaming frog

  • Nome da extração: Você pode digitar um nome para a pesquisa. Nome que aparecerá nas extrações personalizadas e no arquivo de exportação do Excel;
  • Método de extração: Escolha a opção XPath;
  • Regra: Inserir a sintaxe XPath. Screaming Frog incluir um indicador de validação de sintaxe. Um X vermelho indica que a sintaxe é inválida, Já um V verde significa que está correto;
  • Tipo de extração: Escolha Extract Inner HTML (Extrair HTML interno), Extract HTML Element (Extrair elemento do HTML), Extract Text (Extrair texto) ou Function Value (valor da função).

Tipos de extração

  • Extract Inner HTML: o conteúdo HTML interno do elemento selecionado. Caso o elemento selecionado tenha outros elementos HTML, eles serão incluídos na extração;
  • Extract HTML Element: o elemento selecionado e seu conteúdo HTML interno são extraídos;
  • Extract Text: o conteúdo do elemento alvo na regra XPath e o texto de qualquer elemento interno;
  • Function Value: utilizado para uma escrever uma função de extração.
Perceba que cada opção extrai diferentes partes do HTML. Use a opção que atenda melhor sua necessidade.

Exemplos extração

Tabela 1: Exemplo com os diferentes tipos de extração
XPath Resultado Extração
Opções de extração Screaming Frog
/descendant::h1[1] KADUNEW Extract Text
/descendant::h1[1] <h1><a href=”https://www.kadunew.com/blog/” title=”KADUNEW”>KADUNEW</a></h1> Extract HTML Element
/descendant::h1[1] <a href=”https://www.kadunew.com/blog/” title=”KADUNEW”>KADUNEW</a> Extract Inner HTML

Sintaxe Básica de Extração

Tabela 2: Sintaxe básica XPath
Exemplo Descrição
Extrações básicas para XPath screaming frog
// Pesquise em qualquer lugar do documento
/ Pesquisar na raiz
@ Selecione um atributo específico de um elemento
* Curinga, usado para selecionar qualquer elemento
[ ] Encontre um elemento específico
. Especifica o elemento atual
.. Especifica o elemento pai

Exemplo de extração personalizada

Nas tabelas abaixo, você pode copiar a sintaxe na coluna exemplo e colá-la no Screaming Frog para executar a extração descrita na coluna descrição. Atente-se para ajustar a sintaxe como desejar, personalizando a extração de acordo com suas necessidades.

Extração de Elementos HTML

Tabela 3: Exemplos de extrações personalizadas para elementos HTML
Exemplo Descrição
Extração de elementos HTML Screaming Frog
//h1 Extrair todas tags H1 
//h2[1] Extrair a primeira tag H2
//h3[2] Extrair a segunda tag H3
//div/p Extrair qualquer <p> que seja filho de <div>
//div[@class=”author”] Extrair qualquer <div> com class “author”
//p[@class=”bio”] Extrair qualquer <p> com class “bio”
//*[@class=”bio”] Extrair qualquer elemento HTML com class “bio”
//ul/li[last()] Extrair o último <li> de um <ul>
//ol[@class=”cat”]/li[1] Extrair o primeiro <li> de um <ol> com a class “cat”
count(//h2) Conta o número de H2’s (definir filtro Extrairion para “Function Value”)
//a[contains(.,”SEO”)]/@href Extrair todos links com o texto texto âncora “SEO”
//a[contains(translate(., ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’, ‘abcdefghijklmnopqrstuvwxyz’),’seo spider’)]/@href Extrair todos links com o texto texto âncora “SEO”. Por ser Case-sensitive a regra converte tudo para minúsculo
//a[starts-with(@title,”Written by”)] Extrair qualquer link com atributo title iniciando com “Written by”
//p[contains(text() ,”your search query here”)] Extrair um texto específico dentro de um parágrafo
/descendant::h3[1] Extrai o conteúdo do primeiro H3 rastreado
/descendant::h3[position() >= 0 and position() <= 10] Extrai os 10 primeiros H3s rastreados
//h3[contains(text(), “exemplo”)] Extrai conteúdo “exemplo” de qualquer H3

Extração de Atributos HTML

Tabela 4: Exemplos de extrações personalizadas para atributos HTML
Exemplo Descrição
Extraindo conteúdo de atributo HTML Screaming Frog
//@href Extrair todos links
//a[starts-with(@href,”mailto”)]/@href Extrair link que iniciam “mailto” (endereço de e-mail)
//img/@src Extrair URLs de todas imagens
//img[contains(@class,”aligncenter”)]/@src Extrair URLs das imagens contendo a classe de nome “aligncenter”
//link[@rel=”alternate”] Extrair conteúdo de elementos contendo o atributo “alternate”
//@hreflang Extrair todos valores de hreflang
//head/link[@rel=”amphtml”]/@href Extrair URL AMP de uma página
//head/link[@rel=”alternate”]/@href Extrair URL do valor alternate
//link[contains(@media, ‘640’) and @href]/@href Estrai href contendo media no elemento
//*[@hreflang]/@hreflang Extrai o valor do hreflang
//iframe/@src Extrai URL do iframe
//iframe[contains(@src ,’www.youtube.com/embed/’)] Extrai URL de vídeos do Youtube incorporado à página
//iframe[not(contains(@src, ‘https://www.googletagmanager.com/’))]/@src Extrai URL que não seja iframe específico
//meta[@name=’news_keywords’]/@content Extrai conteúdo meta “news_keywords”
(//iframe/@src)[1] Extrai URL da primeira ocorrência de iframe
//div[@class=”posts”]//a Extrai o texto âncora dentro de uma div de classe posts. Usar “Extract Inner HTML”
//div[@class=”posts”]//a/@href Extrai o URL dentro de uma div de classe posts. Usar “Extract Inner HTML”
//div[@class=”posts”]//a Extrai código completo do link dentro de uma div com a classe posts. Usar Extract HTML Element
//html /@lang Extrai o idioma da página declarado no elemento HTML

Extrair as tags de media social de texto como Open Graph ou Twitter Cards

Tabela 5: Extração de tags media social
Exemplo Descrição
Exemplos para extração de tags media social Screaming Frog
//meta[starts-with(@property, “og:title”)][1]/@content Extrair título
//meta[starts-with(@property, “og:description”)][1]/@content Extrair a descrição
//meta[starts-with(@property, “og:type”)][1]/@content Extrair o tipo do Open Graph ou Twitter Cards,
//meta[starts-with(@property, “og:site_name”)][1]/@content Extrair o valor do nome do site
//meta[starts-with(@property, “og:locale”)][1]/@content Extrair valor da localidade
//meta[starts-with(@property, “og:image”)][1]/@content Extrair URL da imagem

Resultado da Extração

Para acessar o conteúdo extraído pelo Screaming Frog, acesse a aba Custom ou no painel à direita acesse Extraction dentro da seção Custom.

Conteúdo extraído Screaming Frog

Visualizando o resultado da extração Screaming Frog

Copiando XPath pelo Navegador

O navegador Google Chrome tem um recurso que facilita a escrita da regra XPath. Você pode usar o recurso através da ferramenta dev Tools para gerar expressões XPath:

  • Abra a Dev tools pressionando a tecla F12 (ou botão direito > inspecionar);
  • Clique com o botão direito do mouse sobre o elemento desejado;
  • Vá em copy > copy XPath;
  • Talvez seja necessário adaptar a expressão XPath que Chrome oferece antes de usar no Screaming Frog. Porém, você já tem uma ideia inicial da regra;
  • Exemplo de uma regra XPath copiada //*[@id=”post-4158″]/header/h2 (exemplo abaixo).
extração XPath Chrome

Exemplo de extração XPath pelo Google Chrome

Categorias: SEO |

Comentários desativados.

Topo