Artigos relacionados

Mostre cartões de conteúdo relacionado dentro dos artigos e controle o método de saída, o layout dos cartões e o estilo visual.

Visão geral

Os Artigos relacionados mostram artigos adicionais com base no conteúdo indexado e nas relações de taxonomia. O objetivo é manter os visitantes a navegar pelo seu site depois de terminarem a página atual.

Caminho no painel de administração: Airygen SEO -> Definições -> Artigos relacionados.

Este módulo depende de Sugestões de Ligação, porque usa esse índice de conteúdo e mantém o seu âmbito de tipos de conteúdo sincronizado a partir daí.

Métodos de saída

Os Artigos relacionados suportam posicionamento manual e inserção automática no conteúdo.

Saída manual

Ative a saída manual quando quiser colocar os Artigos relacionados exatamente no ponto do template ou do conteúdo que preferir.

Use a Função de modelo quando quiser inserir a saída diretamente no template do tema.
Use o Shortcode quando quiser colocar os cartões dentro do conteúdo do artigo ou noutra área que aceite shortcodes.
Use o Bloco quando quiser inserir um bloco de shortcode no editor e controlar o posicionamento visualmente.

Função de modelo:

<?php if ( function_exists( 'airygen_the_related_posts' ) ) { airygen_the_related_posts(); } ?>

Shortcode:

[airygen_related_posts]

Bloco:

<!-- wp:shortcode -->
[airygen_related_posts]
<!-- /wp:shortcode -->

Injeção automática

Ative a inserção automática quando quiser que o Airygen SEO coloque os Artigos relacionados na área principal do conteúdo sem ter de adicionar snippets manualmente.

O campo Posição de inserção permite escolher Antes do conteúdo ou Após o conteúdo.
A inserção automática é melhor quando quer uma posição consistente em muitos artigos do mesmo tipo.
O posicionamento manual é melhor quando precisa de controlo exato dentro do tema, do template ou da estrutura do artigo.

Se ativar a saída manual e a inserção automática ao mesmo tempo, verifique a página publicada para confirmar que os cartões não aparecem em duplicado.

Configurações

A página está dividida em Definições, Layout e Pré-visualização.

Separador Definições

Use este separador para escolher como os Artigos relacionados são apresentados e onde podem ser mostrados.

Controlos de saída

A saída manual disponibiliza os snippets de Função de modelo, Shortcode e Bloco para colocar os cartões onde precisar.
A inserção automática coloca os cartões de Artigos relacionados nos artigos compatíveis sem ter de editar cada conteúdo individualmente.
O campo Posição de inserção decide se a saída automática aparece Antes do conteúdo ou Após o conteúdo.

Cabeçalho da secção

Esta área permite mostrar um título acima da lista de cartões.
O campo Texto define o texto mostrado acima da saída.
O campo Nível de cabeçalho define a hierarquia do título visível.

Âmbito

O campo Tipos de artigo a incluir é sincronizado a partir de Sugestões de Ligação.
O âmbito aparece aqui para referência, mas não pode ser editado no ecrã de Artigos relacionados.

Separador Layout

Use este separador para controlar a estrutura dos cartões e o estilo visual.

Grelha e organização dos cartões

Os presets 2 x 2, 3 x 2, 4 x 2, 4 x 1 e 1 x 4 definem a densidade da grelha.
O campo Modelo de cartão de artigo permite escolher entre Modelo 1 e Modelo 2.
Pode arrastar blocos visíveis entre áreas como Cabeçalho, Corpo, Barra lateral esquerda e a zona inferior do cartão.
O número de colunas do rodapé permite organizar melhor os elementos mostrados nessa área.
A área de blocos ocultos guarda os elementos que não quer mostrar.
Os blocos disponíveis incluem imagem destacada, título, excerto, autor e data.

Temas e estilo

Os temas predefinidos incluem Snow Slate, Honey Paper, Sky Breeze, Menta Calma, Rosa Rosado e Névoa de lavanda.
Os controlos da grelha permitem ajustar largura de borda, estilo do contorno, raio da borda, cor do contorno, cor de fundo, preenchimento e espaçamento.
Os controlos do contentor de artigo permitem ajustar largura de borda, estilo do contorno, raio da borda, cor do contorno, cor de fundo, preenchimento e espaçamento.
As definições da imagem destacada permitem ajustar o tamanho da imagem e o arredondamento dos cantos.
As definições do título permitem ajustar tamanho da fonte, cor do texto e ênfase, como negrito ou itálico.
As definições do excerto permitem ajustar tamanho da fonte, cor do texto, Máx. caracteres, máscara de desvanecimento, cor da máscara e altura da máscara.
As definições de autor e data permitem ajustar tamanho da fonte, cor do texto e ênfase.
Os controlos do cabeçalho da secção permitem estilizar o título acima dos cartões separadamente.

Separador Pré-visualização

Use este separador para rever a saída com uma amostra simplificada antes de testar a página real.

A pré-visualização mostra a saída em Portátil, Tablet e Telemóvel.
A amostra usa cartões de exemplo com o layout e o estilo que configurou.
O ecrã também mostra Exemplo HTML e CSS Injetado para referência visual e ajuste de estilos.

Pré-visualização e saída real

O separador Pré-visualização mostra uma representação simplificada dos Artigos relacionados com as definições atuais.

A pré-visualização ajuda a validar a grelha, o estilo dos cartões e a hierarquia visual do cabeçalho.
A pré-visualização usa cartões de exemplo e não depende do conteúdo relacionado real do artigo publicado.
A aparência final no frontend continua a poder ser afetada pelo tema ativo, pelo CSS personalizado e pela estrutura da página à volta do conteúdo.

A página publicada pode parecer diferente da pré-visualização.

O conteúdo relacionado real depende do índice de Sugestões de Ligação e dos artigos disponíveis dentro do âmbito permitido.
O tema pode alterar espaçamentos, larguras, cores, tamanhos de letra e comportamento responsivo.
Se combinar saída manual com inserção automática, a página real pode mostrar cartões repetidos mesmo que a pré-visualização pareça correta.

Depois de guardar, verifique um artigo real para confirmar a posição final, os cartões mostrados e o aspeto publicado depois de o CSS do tema ser carregado.

Como usar

Confirme primeiro que Sugestões de Ligação está ativo, porque os Artigos relacionados dependem desse módulo.
Abra Airygen SEO -> Definições -> Artigos relacionados.
No separador Definições, decida se quer usar saída manual, inserção automática ou apenas um desses métodos.
Se quiser posicionamento manual, copie a Função de modelo, o Shortcode ou o snippet de Bloco que melhor se adapta ao seu fluxo de trabalho.
Se quiser posicionamento automático, ative a inserção automática e escolha a Posição de inserção entre Antes do conteúdo e Após o conteúdo.
Ative o cabeçalho da secção se quiser um título visível acima da lista e defina o Texto e o Nível de cabeçalho.
Confirme em Âmbito se o tipo de conteúdo atual está incluído e, se precisar de o alterar, faça essa alteração em Sugestões de Ligação.
Abra Layout e escolha um preset de grelha e um Modelo de cartão de artigo.
Arraste os blocos visíveis para as áreas que quer mostrar, mova os que não precisa para a zona oculta e ajuste o número de colunas do rodapé dos cartões.
Ajuste o tema, os contornos, os fundos, o preenchimento, o espaçamento, a imagem destacada, o título, o excerto e o estilo de autor e data.
Abra Pré-visualização, alterne entre Portátil, Tablet e Telemóvel e confirme que a composição continua legível em ecrãs mais pequenos.
Guarde as definições do módulo e visite um artigo real para confirmar a posição final e o estilo publicado.

Depois de guardar, confirme estes pontos no site publicado:

O tipo de conteúdo atual está incluído no âmbito vindo de Sugestões de Ligação.
Os Artigos relacionados aparecem apenas uma vez na página.
Os cartões mostram conteúdo realmente relacionado com o artigo atual.
O layout publicado continua legível depois de o CSS do tema ser carregado.

Benefícios de SEO

As ligações para conteúdo relacionado ajudam os visitantes a continuar a explorar o site e dão aos motores de busca mais caminhos internos entre páginas semanticamente ligadas. Isso pode facilitar a descoberta de conteúdo importante e reforçar os percursos temáticos dentro do site.

Casos de uso

Publicações editoriais que querem melhorar a recirculação de conteúdo

Antes: Os leitores terminam um artigo e saem porque não existe um próximo passo claro dentro do mesmo tema.

Depois: Os Artigos relacionados mostram um conjunto visual de páginas ligadas ao assunto, o que facilita a continuação da leitura e mantém mais páginas do mesmo tema acessíveis.

Blogues grandes com muito conteúdo evergreen

Antes: Os artigos antigos ficam escondidos no arquivo e os editores teriam de acrescentar ligações manuais em cada novo conteúdo.

Depois: Os Artigos relacionados reutilizam o índice das Sugestões de Ligação para destacar opções de leitura adicionais no início ou no fim de cada artigo.

Perguntas frequentes

Porque é que os Artigos relacionados não aparecem na minha página?

Verifique se Sugestões de Ligação está ativo, se o tipo de conteúdo atual está incluído no âmbito e se escolheu saída manual, inserção automática ou ambos de forma correta.

Posso controlar onde cada elemento do cartão aparece?

Sim. O separador Layout permite reorganizar os blocos visíveis, mover elementos para a área oculta e ajustar a estrutura geral dos cartões.

Porque é que a pré-visualização pode ser diferente da página publicada?

A pré-visualização usa cartões de exemplo e uma representação simplificada do layout. A saída real continua a depender do tema ativo, do CSS carregado e do conteúdo relacionado realmente encontrado para esse artigo.