Como Mostrar Pré-visualização ao Vivo de Links no WordPress

Já notou o quão incertos os leitores podem ficar ao clicar em links? As pré-visualizações de links resolvem isso, dando aos seus visitantes uma espiada no que os espera do outro lado 💡

Vimos essa técnica muito em sites com muito conteúdo, como wikis, onde as pré-visualizações visuais de links ajudam os leitores a navegar por artigos interconectados de forma mais eficiente.

Quando os leitores podem ver o que há dentro de um link antes de clicar, eles são mais propensos a explorar conteúdo relacionado que lhes interessa. Além disso, ajuda-os a evitar clicar em links que não são relevantes para as suas necessidades.

Muitos usuários do WordPress nos perguntam como adicionar belas pré-visualizações de links sem mexer no código. Após testar várias soluções, encontramos um método simples e sem código que funciona muito bem para iniciantes.

Quando Adicionar uma Pré-visualização ao Vivo de Links no Seu Site WordPress 🤔

Em um site WordPress típico, os links não mostram o que há dentro deles. Isso pode frustrar os visitantes quando eles clicam em um link e descobrem que não é o que esperavam. É aí que as pré-visualizações ao vivo de links são úteis.

As pré-visualizações ao vivo de links geralmente se parecem com tooltips. Este elemento de design do WordPress aparece quando alguém move o mouse sobre um link, mostrando uma prévia do conteúdo.

Para lojas online, isso significa que você pode ter seus links exibindo imagens de produtos ou detalhes curtos para aumentar as vendas.

Se você tem um blog WordPress, você pode mostrar imagens de pré-visualização de posts ou textos curtos para fazer os leitores quererem ver mais. E para links externos, essas pré-visualizações de tooltip ajudam as pessoas a decidir se querem sair do seu site.

No entanto, tenha cuidado ao usar pré-visualizações ao vivo. Muitas podem confundir os visitantes. É melhor usá-las apenas para links importantes onde elas ajudarão mais.

Com isso em mente, vamos ver uma maneira fácil de adicionar pré-visualizações de links ao vivo ao seu site WordPress. Este método funcionará se você estiver usando o editor de blocos Gutenberg, o editor clássico ou até mesmo um construtor de temas. Você pode usar os links rápidos abaixo para navegar por este tutorial:

• Passo 1: Instale o Plugin Bright Link Previews
• Passo 2: Personalize o Design da Pré-visualização do Tooltip do Link
• Passo 3: Configure as Definições de Pré-visualização ao Vivo do Link
• Passo 4: Veja a Pré-visualização do Tooltip do Seu Link em Ação
• Bonus Tip: Clean Up Your WordPress Link Previews With Schema Markup

Passo 1: Instale o Plugin Bright Link Previews

A maneira mais fácil de adicionar uma pré-visualização de tooltip a um link no WordPress é com o plugin Bright Link Previews. Quando ativado, este plugin de pré-visualização de links do WordPress adicionará automaticamente uma pré-visualização ao vivo de seus links internos e externos em seus posts e páginas.

Primeiro, prossiga e instale o plugin em sua área de administrador. Para instruções passo a passo, você pode ler nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Assim que terminar, vá para Configurações » Bright Links. É aqui que você poderá configurar as definições do plugin.

Passo 2: Personalize o Design da Pré-visualização da Dica de Ferramenta do Link

Primeiro, vamos configurar o design da pré-visualização ao vivo na aba Aparência.

Na parte superior, você pode escolher a cor de fundo (lado esquerdo) e a cor do texto (lado direito).

Basta clicar na caixa de cor e uma ferramenta de seleção de cores aparecerá.

Você também pode escolher as cores do hotspot de preço, que aparecerão automaticamente para links de eCommerce de sites WooCommerce, Amazon e Shopify.

Assim como com a tooltip, basta escolher a cor de fundo do hotspot à esquerda e a cor do texto à direita.

Abaixo disso está 'Escolher tamanho', onde você pode tornar a tooltip menor ou maior arrastando o ponto na barra redimensionadora.

Uma tooltip maior é mais fácil de ler, mas você vai querer ter certeza de que ela não se sobrepõe ou esconde partes importantes da sua página.

Recomendamos pré-visualizá-la em seu site para encontrar o tamanho perfeito que se encaixa no seu design.

Rolando para baixo, você pode alterar o estilo da tooltip em si. Existem 3 opções padrão, e você sempre pode alterá-las mais tarde.

Assim que estiver satisfeito com a aparência da tooltip, basta clicar em 'Salvar' na parte inferior.

Etapa 3: Configure as Configurações de Pré-visualização ao Vivo do Link

Agora, mude para a aba 'Configurações'.

É aqui que você pode configurar como as pré-visualizações ao vivo para links se comportam.

O Bright Links Preview permite que você aplique as pré-visualizações de tooltip a links em seus posts, páginas e até mesmo na seção de comentários.

Decidimos adicioná-los apenas para nossos posts e páginas porque adicioná-los em todos os lugares poderia prejudicar a experiência do nosso usuário.

Outra coisa que você poderia configurar é se deseja mostrar contadores de cliques. Mudar essa configuração de 'não' para 'sim' significa que a tooltip informará aos visitantes quantos usuários clicaram no link sobre o qual eles estão passando o mouse.

Isso pode ser útil para seus links internos porque atua como prova social. Quando os visitantes veem que um link é popular, isso os incentiva a explorar mais do seu conteúdo.

Dito isso, não recomendamos ativar este recurso se você também quiser adicionar pré-visualizações ao vivo para links externos. Isso pode ter o efeito contrário e fazer com que as pessoas saiam do seu site.

Falando nisso, você pode escolher se deseja adicionar as pré-visualizações ao vivo em links internos, links externos ou ambos.

A escolha depende do tipo de site que você está executando, mas geralmente sugerimos usar apenas links internos para aumentar suas visualizações de página e reduzir sua taxa de rejeição.

A escolha depende dos seus objetivos. Aqui está um breve resumo:

• Links Internos: Isso é ótimo para aumentar o engajamento. As pré-visualizações incentivam os usuários a descobrir mais do seu próprio conteúdo, o que pode aumentar suas visualizações de página e diminuir sua taxa de rejeição.
• Links Externos: Isso ajuda a construir confiança com seu público. Ao mostrar uma pré-visualização de um site externo, você tranquiliza os usuários de que o link é relevante e seguro, tornando-os mais confiantes em suas recomendações.

Geralmente sugerimos usar apenas links internos para aumentar suas visualizações de página e reduzir sua taxa de rejeição.

Em seguida, você pode optar por armazenar em cache as prévias para melhorar o desempenho do seu site. Recomendamos fortemente deixar isso ativado.

O cache salva uma cópia temporária das prévias de links, o que impede que seu site fique lento e garante uma experiência rápida para seus visitantes.

Se você exibir prévias para links externos, poderá forçar esses links a abrir em uma nova aba. Sugerimos ativar este recurso para que os usuários não saiam acidentalmente do seu site.

Finalmente, você pode optar por desativar a dica de ferramenta em dispositivos móveis, pois as dicas de ferramenta podem proporcionar uma experiência de usuário ruim em telas menores. Recomendamos testar este recurso e ver o que funciona melhor para o seu site.

Você pode conferir nosso guia sobre como visualizar seu site WordPress no celular via desktop para mais informações.

Quando estiver satisfeito com as configurações da pré-visualização ao vivo, clique em ‘Salvar’.

Passo 4: Veja a Pré-visualização do Tooltip do Seu Link em Ação

Nesta etapa, você pode prosseguir e pré-visualizar seu site para ver como a dica de ferramenta se parece.

Veja como o nosso fica sem o contador de cliques:

Se você optar por adicionar um contador de cliques, haverá uma pequena nota que mostra o número de cliques que o link recebeu até agora.

Essa opção ficará assim:

O ótimo do Bright Links Preview é que ele possui um recurso de análise gratuito para mostrar quantos usuários clicaram ou até mesmo passaram o mouse sobre seus links.

Isso pode ser útil para ver em quais posts a maioria dos usuários está interessada ou para decidir quais novos posts destacar.

Para ver esses números, basta ir em Configurações » Bright Links no seu painel do WordPress e mudar para a aba ‘Estatísticas’.

Dica Bônus: Limpe as Pré-visualizações de Links do WordPress com Schema Markup

Quando alguém compartilha seu conteúdo, o WordPress geralmente puxa o título da página, a descrição e a imagem para mostrar uma pré-visualização. Mas se essas informações não estiverem configuradas corretamente, o resultado pode parecer pouco profissional ou quebrado.

O plugin Bright Links Preview ajuda gerando automaticamente pré-visualizações de links ricas usando metadados de suas páginas.

Para controlar esses metadados e fazer suas prévias brilharem, recomendamos o uso do All in One SEO.

Ele facilita a configuração de meta tags Open Graph (usadas pelo Facebook, LinkedIn, etc.) e permite até mesmo definir uma imagem padrão do Open Graph, personalizar tags de título e descrição, e adicionar marcação schema para melhor SEO e contexto.

Ao combinar o Bright Links Preview com o AIOSEO, você não apenas melhora o SEO do seu WordPress, mas também garante que seus links pareçam limpos e clicáveis em toda a web.

👉 Para saber mais, confira nossos guias:

• Como Adicionar Marcação Schema no WordPress
• Como Adicionar Corretamente Schema de ‘Como Fazer’ Amigável para SEO no WordPress
• Como Adicionar Metadados Open Graph do Facebook no WordPress

Descubra Mais Recursos de Design para WordPress

Quer tornar o design do seu site WordPress ainda mais interessante? Confira estes guias úteis:

• Use notas de rodapé simples e elegantes em seus posts de blog para adicionar informações extras
• Exiba links de navegação de breadcrumb para ajudar os visitantes a entenderem onde estão em seu site
• Crie um ticker de notícias em rolagem para compartilhar atualizações importantes com seus visitantes
• Use um widget de contador regressivo para criar expectativa para eventos especiais
• Adicione uma barra de progresso de leitura aos seus posts para manter os leitores engajados
• Crie divisores de forma personalizados para tornar o design do seu site mais interessante

Esperamos que este artigo tenha ajudado você a aprender como mostrar prévias ao vivo de seus links no WordPress. Você também pode querer conferir nossa lista dos melhores construtores de página arrastar e soltar no WordPress e nosso guia sobre como editar um site WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.