Como criar uma caixa de sitelinks para seu Blogger

PorSoftDown -
0

 Vamos aprender de forma simples e didática como exibir nas postagens do nosso blog um bloco com links de conteúdo recomendado 

Conceitos se Seo e Navegação ( C: Freepik)



Ter um bloco de sitelinks entre nossas postagens pode ajudar em muito a aumentar o número de visualizações e a encontrar conteúdos relevantes que muitas vezes estão quase que escondidos , lembre que a única forma de algum visitante encontrar os conteúdo é através de links que o webmaster constrói...


Sites bem-sucedidos frequentemente levam os usuários a explorar mais conteúdo, e uma forma eficaz de fazer isso é através das caixas de sitelinks. 

Essas caixas não apenas melhoram a navegação do seu site, mas também oferecem um impulso significativo ao seu SEO, tornando-o mais visível e útil para os usuários.

O que são Caixas de Sitelinks?

As caixas de sitelinks são seções em uma página da web que fornecem links para outras páginas relevantes dentro do mesmo site. 

Elas funcionam como um guia, direcionando os visitantes para conteúdos relacionados ou populares que eles podem ter interesse em explorar.

 Imagine-as como um "sumário" visual que ajuda os usuários a se aprofundarem no seu site sem a necessidade de retornar à página inicial ou usar a barra de pesquisa.

Por que usar Caixas de Sitelinks?

O uso de caixas de sitelinks oferece diversas vantagens:
  •   Melhora a experiência do usuário: Facilita a navegação e permite que os usuários encontrem rapidamente o que procuram ou descubram novos conteúdos relevantes.

  •   Aumenta o tempo de permanência no site: Ao oferecer mais opções de conteúdo, os usuários tendem a passar mais tempo explorando seu site, o que é um sinal positivo para os mecanismos de busca..

  •  Benefícios de SEO: Caixas de sitelinks bem otimizadas podem melhorar o ranking do seu site nos resultados de pesquisa. Os mecanismos de busca valorizam sites que oferecem uma boa experiência ao usuário e links internos relevantes..

  •  Reduz a taxa de rejeição: Se os usuários encontram facilmente o que buscam ou conteúdos que os interessam, é menos provável que saiam do seu site rapidamente.
Como criar sua Caixa de Sitelinks
Implementar uma caixa de sitelinks é mais simples do que parece. 

Você pode criar uma usando HTML e CSS básicos, como o código que vou te fornecer a seguir.

 Este código cria uma caixa com um título e uma lista de links, que você pode personalizar de acordo com o conteúdo do seu blog ou site.

Confira o código abaixo se preferir faça o download via Google Drive:


<html lang="pt-BR">
<head>
    <style> <!-- Essa parte compõe o estilo.css
 do código e poder alterada-->
        .recommended-posts {
            background-color: #f9f9f9;
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

        .recommended-posts h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .recommended-posts ul {
            list-style-type: none;
            padding: 0;
        }

        .recommended-posts li {
            margin-bottom: 15px;
        }

        .recommended-posts a {
            text-decoration: none;
            color: #1e90ff;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .recommended-posts a:hover {
            color: #555;
        }
    </style>
</head>
<body> <!-- Você pode alterar conteúdo recomendado-->
    <div class="recommended-posts">
        <h3>Conteúdos Recomendados</h3>
        <ul>
            <li>
                <a href="https://seublogger.com/post" target="_blank">Postagem 1: Título da Postagem</a>
            </li>
            <li>
                <a href="https://seublogger.com/post2" target="_blank">Postagem 2: Título da Postagem</a>
            </li>
            <li>
                <a href="https://seublogger.com/post3" target="_blank">Postagem 3: Título da Postagem</a>
            </li>
        </ul>
    </div>
</body>
</html>
Baixar código

Para facilitar é possível baixar este conteúdo em TXT. Através do Google Drive e copiar , editar etc para seu uso , o código do Google Drive está puro não contém comentários.

Personalizando sua Caixa de Sitelinks

Com o código acima, você tem uma base sólida. Para personalizar, preste atenção aos seguintes pontos:


 * Links e Textos: Troque https://link do seu site/ e os títulos das postagens pelos links e nomes reais do seu conteúdo.

 * Estilo (CSS): As propriedades dentro da tag <style> controlam a aparência da caixa, lembre-se que o blogger é sensível a css e javascript então pode ser nescessário alguns ajustes no seu template 

Para alterar o tamanho do texto mude os comandos na linha

 [recommended-posts h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;] 

Em 
recommended-posts h3
( Mude o h3 entre h1 e h6 ) lembre se que h1 é o maior e h6 é o menor.

Feito isso você devera mudar também na entrada da lista 

 class="recommended-posts"
        <h3>Conteúdos Recomendados</h3>

Os demais códigos mudam o estilo e formato de texto , tamanho e estilo da lista e da caixa , sendo eles : 


    recommended-posts ul {
            list-style-type: none;
            padding: 0;
        }

        .recommended-posts li {
            margin-bottom: 15px;
        }

        .recommended-posts a {
            text-decoration: none;
            color: #1e90ff;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .recommended-posts a:hover {
            color: #555;

Agora confira no final do artigo como ficou a nossa caixa de site links 

Conteúdos Recomendados

Talvez você goste destas postagens

Postar um comentário

Postagem Anterior Próxima Postagem