Adicione microdados ao módulo breadcrumbs (mod_breadcrumbs). “Breadcrumbs”: micromarcação e seu impacto nos snippets de páginas Micromarcação de breadcrumbs esquema org

Saudações, amigos. Hoje é a postagem do 400º aniversário no meu blog. Por ocasião dessa data, eu queria muito disponibilizar algum conteúdo realmente útil para que fosse interessante, útil e relevante. E o tema desse artigo surgiu do nada - eu queria entender a formação de belos trechos na pesquisa, mas ao mesmo tempo me aprofundei em mais dois tópicos:

• instalar breadcrumbs no seu blog WordPress (eu queria sem plugin para não carregar o site),
• e configurar micro marcação (sem ela, migalhas de pão são de pouca utilidade).

Elemento de navegação

Já ouço e leio sobre breadcrumbs há muito tempo, mas simplesmente não conseguia entender para que serviam um blog normal com uma estrutura simples e compreensível. Julgue por si mesmo, tenho uma página principal, todos os posts são divididos em categorias e pronto. Ou seja, o caminho máximo da página inicial até o artigo final é de 2 cliques. Cada artigo possui um link para a categoria a que pertence, portanto simplesmente não há lugar para o visitante se perder.

Outra questão é se o site é complexo e sua estrutura é tal que você pode andar em círculos por meia hora e não encontrar o que procura. Se você tem algum tipo de loja online com dezenas de categorias, cada uma delas dividida em títulos filhos, esses, por sua vez, e depois outro, e então cada produto é dividido em cores - aqui eu entendo a importância das migalhas de pão - o o usuário precisa deles como um elemento de navegação e .

Aliás, o nome “breadcrumbs” surgiu daí; inicialmente era apenas navegação no site. Lembre-se do conto de fadas “João e Maria”, onde as crianças jogavam pedaços de pão pelo caminho para depois encontrarem o caminho de volta. No conto de fadas, esse método não os ajudou muito, mas para sites foi útil.

Aparência do snippet nos resultados da pesquisa

Então, eu não vi sentido em tal gadget para meu blog até que me deparei com o segundo significado das migalhas - acontece que elas são vistas não apenas pelas pessoas, mas também pelos mecanismos de pesquisa. E os motores de busca os veem não apenas como links internos que influenciam a vinculação e distribuição do peso da página, mas também como um importante elemento de navegação. Yandex e Google usam este elemento para criar um snippet. Não quero dizer por muito tempo como é, é melhor ver uma vez com seus próprios olhos:

Um snippet é a exibição de um site nos resultados de pesquisa.

Quanto mais atraente for o snippet, maior será sua taxa de cliques, o que imediatamente produz um efeito duplo:

• Mais cliques significam mais tráfego para o site,
• A taxa de cliques de um snippet refere-se a fatores comportamentais, e quanto maior for, mais fácil será para um recurso subir ao TOPO para as consultas necessárias.

O único ponto que não ficou claro para mim é que esses links são migalhas de pão, e não outra coisa. Concordo, a página de qualquer artigo do blog contém outros links para a categoria e para a página principal (menu superior, categorias na barra lateral, link para a categoria no bloco com metadados do artigo).

Não é uma pessoa, ele não consegue olhar a página e entender - esse link é do menu, isso é do texto do artigo, e isso é uma migalha de pão.

Tive que percorrer fóruns e ler muitos blogs. Na maioria dos casos, eles apenas escrevem sobre o fato de que migalhas são necessárias e melhoram a usabilidade e o snippet, e então escrevem instruções para configurar o plugin Breadcrumb NavXT (Breadcrumb é migalhas de pão em inglês) ou fornecem código de implementação sem um plugin - e isso é tudo. Tenho a impressão de que a maioria dos webmasters não tem ideia de como trabalhar adequadamente com esse elemento e o percebe apenas como um elemento de linkagem interna de páginas.

Os resultados do Google mostram que não mais que 10% dos sites possuem a localização atual correta em seu arsenal, o restante funciona à moda antiga, exibindo o URL da página no snippet.

Micromarcação de migalhas de pão

Não tive preguiça, entrei na busca, analisei como o Breadcrumb era feito em diferentes sites e como esses sites aparecem na busca. Minha teoria acabou se revelando correta:

• Há migalhas no site - sem micromarcação - um snippet normal com um URL.

• Existem migalhas - existe micro marcação - um trecho aprimorado.

Desenterrei tudo que precisava e hoje vou falar sobre migalhas de pão de A a Z. Tecnicamente, colocá-las no site não é nem metade da batalha – são 10%. A principal característica que trará benefícios reais é a micro marcação.

O principal benefício não está na localização atual, mas na micromarcação correta para o snippet.

Conheci o conceito de micromarcação há apenas alguns meses. Não entendi muito, mas tentei montar os elementos básicos para artigos e comentários. Alguns blogueiros escreveram que este é quase um botão mágico que leva os sites ao TOPO (principalmente alunos da escola de blogueiros de Alexander Borisov) - não sei por que eles decidiram isso. Isso me pareceu duvidoso imediatamente, mas agora posso dizer com certeza: em 2 meses de micromarcação em meu site, não notei nenhum movimento perceptível nos resultados da pesquisa para consultas promovidas.

No caso da marcação de breadcrumbs, a situação deverá ser diferente; não esperaremos nenhuma movimentação nos resultados da busca orgânica, mas contaremos com o que falei acima - uma melhoria na clicabilidade dos snippets e dos pães correspondentes (crescimento devido ao fatores comportamentais).

Breadcrumbs no WordPress sem plugin

Assim, passamos de conversas “por que e para quê” para conversas “como fazer”. Descartei imediatamente o plugin Breadcrumb NavXT, pois não faz sentido “exigir modificação com um arquivo” e ele não pode fazer micromarcação sozinho. Existe outra opção - o plugin SEO para WordPress SEO da Yoast, ele também pode fazer migalhas de pão, mas não desejo alterá-lo. A única opção que resta é usar um script ou função.

Se você decidir instalar breadcrumbs no WordPress, faça-o sem plug-ins - o site ficará menos carregado e haverá mais oportunidades para adaptar o código.

Etapa 1. Função wp_zhilin_krohi

Desde que comecei a aprender o básico de PHP, fiquei interessado em criar eu mesmo uma função que exibisse trilhas de navegação em meu blog. Intuitivamente, vi que não deve haver problemas, pois todos os elementos migalhas já estão exibidos no template, basta pegá-los e organizar os links necessários conforme o esperado.

Olhando para o futuro, direi que consegui criar a função mais compacta (leve leve e rápida) que já encontrei em outros sites.

A primeira versão do código saiu rápido, mas não levei em consideração um ponto - o código não deveria apenas exibir links para o site, mas também conter micromarcações, mas houve uma emboscada com ele - meu código repetiu os erros de muitos webmasters - devido à implementação de saída padrão, distribuir links para elementos para incorporação de marcação não funcionou.

Tive que começar de novo, contando com funções PHP mais simples do WordPress (mas aprendi algo novo). Como resultado, o resultado foi a função wp_zhilin_krohi (a primeira vez que nomeei uma função com meu próprio nome - legal), que exibe trilhas de navegação em páginas com artigos e em páginas de categoria. Todas as categorias pai (não importa quantas existam) são automaticamente levadas em consideração e cada elemento é envolvido em micromarcação.

Para artigos, as migalhas ficam assim:

Home > Título pai (se houver) > Categoria > Artigo

Home > Categoria pai (se houver) > Categoria >

Tenho medo de que o título do artigo na localização atual leve ao envio de spam para a página com palavras-chave. Fiz um pedido sobre isso ao suporte técnico do Yandex, em resposta eles escreveram que se o objetivo não é enganar os motores de busca, então não deveria haver sanções, mas elas são levadas em consideração. Aqui está a resposta:

Então, se você acha que a repetição desnecessária do título do artigo vai te incomodar, exclua as linhas 17 a 20.

Aqui está a função em si, você precisa adicioná-la ao arquivo functions.php do seu tema, antes de fechar?> (isso é feito diretamente através do painel de administração, você nem precisa de um cliente FTP):

/*** Migalhas com micro marcação ***/ function wp_zhilin_krohi() ( if (!is_home()) ( echo "Home" "; ) if (is_category() || is_single()) ( $cats = get_the_category() ; foreach ($cats as $cat) ( echo "term_id)."" >" .$cat->name." " " ) ) if(is_single()) ( the_title(); ) );

A micromarcação é imediatamente inserida no código de função e exibida automaticamente junto com cada link.

Passo 2: Exibindo a função nas páginas

Para que a cadeia de links que criamos apareça nas páginas, você precisa abrir o arquivo do seu tema WordPress, que é responsável pelo tipo de página correspondente, e inserir nele o código que chama a função:

No mínimo, você precisa de um arquivo single.php (exibe posts) - quase sempre chamado da mesma forma, e então depende do modelo, em algum lugar as páginas da categoria são exibidas através de archive.php, em algum lugar através de index.php - você encontrará o aquele que você precisa.

Neste arquivo você precisa encontrar o local onde gostaria de ver as migalhas. Geralmente são colocados no topo do site (antes do título do post) como elemento de navegação. Procure este trecho de código - php the_title, e insira a saída da função na frente dele (veja o design onde ele se encaixa).

A localização atual nem sempre é colocada no topo da página, há exceções; Digamos que você só precise deles para exibir um snippet, então você pode colocá-los no porão - os mecanismos de pesquisa verão a micromarcação lá. Esta opção foi implementada no blog de Sergei Sosnovsky - ele tem um bloco separado na parte superior para usuários, mas não possui micromarcação, e migalhas de pão com micromarcação são exibidas no rodapé (eu realmente não entendo por que, embora ):

Etapa 3. Projeto

A aparência de qualquer elemento da página deve estar em harmonia com o design do seu site, portanto, não existe uma solução única para cada blog.

Configurei o mesmo em meus recursos - reduzi a fonte da localização atual em comparação com o conteúdo principal. Para fazer isso, eu nem criei estilos separados no arquivo style.css, mas coloquei a função em um contêiner div e especifiquei um único parâmetro nele - o tamanho da fonte (você deve ter notado na imagem acima):

Todas as outras características da localização atual são herdadas dos estilos de tema. Para fazer pequenas adições (alterar fonte, cor do texto, etc.), especifique as propriedades necessárias no mesmo contêiner.

Se você quiser alterar radicalmente o design da cadeia de links exibida (fazer algumas imagens ou botões), atribua a eles uma classe especial, por exemplo, assim - então, para esta classe, crie um bloco separado em style.css e especifique todos os parâmetros necessários.

É aqui que seu conhecimento de folhas de estilo CSS em cascata e talento de design serão úteis (se você mesmo fizer o design).

Verificando a micro marcação de migalhas de pão

Depois de fazer tudo, certifique-se de verificar o correto funcionamento da micromarcação em validadores especiais do Yandex e Google, nunca se sabe, alguns bugs irão aparecer:

webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 votos, média: 4,7 de 5)

Olá a todos, hoje definiremos o conjunto mínimo e exemplos de implementação de micromarcação de breadcrumbs, artigos e produtos para sites comerciais e informativos. A tecnologia em si não é mais nova, mas a variedade de seus atributos pode ser confusa e, portanto, neste artigo tentarei destacar várias soluções típicas e comprovadas que podem ser implementadas imediatamente com segurança.

Todo o tópico sobre microformatos não pode ser abordado em um artigo e, portanto, como é discutido em outros materiais, irei me referir a eles. Além disso, você sempre pode se aprofundar no Construtor de micromarcação do Google.

Micromarcação de migalhas de pão

Pois bem, este é um clássico do gênero, que deve estar presente em todos os sites. Por exemplo, para uma página fica assim:

//1º nível: página principal

Blog de SEO Pingo

//nível 2: categoria

Para iniciantes

//nível 3: material final
Tipos de consultas de pesquisa

Então, o que vemos aqui? Em primeiro lugar, cada nível de breadcrumbs é um elemento separado, um nível, e apenas a sua ordem desempenha um papel aqui. Em segundo lugar, cada elemento (exceto o último) é aninhado triplamente:

Declaração de item: itemscope itemtype="http://data-vocabulary.org/Breadcrumb"

Definindo o valor do atributo link: itemprop="url"

Definindo o valor do atributo name: itemprop="title"

O último elemento também pode ter um atributo url, mas na minha opinião não é necessário - por que a página apontaria para si mesma na localização atual?

Os atributos podem ser usados ​​em conjunto com quaisquer tags - apenas a ordem e o nível de aninhamento são importantes. Por exemplo:

Para iniciantes

A introdução de migalhas de micromarcação no site ajuda os mecanismos de pesquisa a exibir migalhas “legíveis” no snippet (o que não é ruim) e também simplesmente a entender melhor a estrutura do site.

Marcação de artigo

Este tipo de micromarcação destina-se a artigos e quaisquer outros materiais informativos, tanto em sites comerciais como regulares. Por exemplo, a página que você está lendo tem a seguinte estrutura:

//Declara o nome do elemento

//Definição do atributo “Data de publicação”
Competitividade das consultas de pesquisa
//Definindo o atributo “Nome da Publicação”
Conteúdo do artigo. //Definição do atributo “Conteúdo do Artigo”

Estimativa da média aritmética
Valor máximo de classificação
Valor mínimo de classificação
Número de avaliações

Tudo aqui é igual às migalhas de pão, exceto o seguinte:

• O atributo Data de Publicação deve ser especificado no formato ISO-8601 no formato AAAA-MM-DDTHH:MM, onde T é apenas um caractere, AAAA é o ano, MM é o mês, DD é a data, HH é a hora , e MM é o minuto.
• Ao definir os atributos “Categoria da Publicação” e “Nome da Publicação”, não é nada assustador que o link também caia na área de valor - o robô extrairá apenas os dados correspondentes ao valor esperado para o atributo.

A introdução da marcação de artigos ajuda o robô de busca a compreender e classificar melhor o conteúdo do material informativo. Além disso, se a informação for única, eventualmente será adicionada ao banco de dados do Google.

Micro tamanho de bens (produto ou serviço)

Este tipo de microformato é indispensável para páginas que descrevem bens e serviços:

//Declara o elemento
Elefante rosa //Determinar o nome do produto ou serviço
Belo elefante. //Definindo a descrição do produto ou serviço

//Declara o subtipo “Oferta”
//Determinar o custo do produto ou serviço
//Especifique a moeda do preço do produto ou serviço

Estimativa da média aritmética
Valor máximo de classificação
Valor mínimo de classificação
Número de avaliações

A mesma coisa - o robô de busca vê imediatamente o que está localizado na página e onde está localizado e por que é necessário. O resultado visual pode ser um aumento na atratividade do snippet na SERP.

Breadcrumbs (breadcrumbs ou breadcrumbs) são um elemento da interface do site, cujo objetivo principal é indicar o caminho da página principal até onde o usuário está localizado no momento. É claro que isso é feito principalmente para facilitar a permanência do usuário no site, facilitando assim a compreensão da estrutura virtual. A preocupação com o conforto do usuário é uma das missões secretas que ocupam centenas de mentes de usabilidade: todos querem tornar a interface mais conveniente e os motores de busca não são exceção. Vamos falar sobre a micromarcação breadcrumb para visualizar links nos resultados de pesquisa do Google.

Para maior clareza, aqui estão exemplos visuais de emissão de resultados de pesquisa sem e com micromarcação:

1. Na primeira entrada, o link abaixo do título é exibido da maneira usual e, via de regra, não é totalmente legível para o usuário médio.
2. Na segunda entrada tudo é diferente, o link não está visível ali, mas existem aquelas mesmas migalhas que mostram a estrutura lógica da localização do elemento encontrado. A segunda opção parece mais construtiva, vamos ver como colocar isso no seu site.

Este milagre é alcançado através do uso de microdados na localização atual. Vamos imaginar que temos essa estrutura no site:
Home – Sistemas operacionais – FreeBSD

Cada item possui seu próprio caminho e está presente na cadeia de navegação como um link. Além disso, o link é colocado em uma tag, por exemplo, uma div, os atributos da tag são definidos:

Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"

Você receberá um bloco para o item:

...

Este bloco contém o link e o nome do elemento. Para um link, o atributo itemprop=”url” é definido, o título também é colocado em uma tag span separada e o atributo itemprop=”title” é definido. Como resultado, um elemento separado da cadeia será passado assim:

Visualizações