Faz algum tempo já que eu "trombei" com essa técnica por aí e ela faz todo o sentido do mundo! Bom, cards são essas belezinhas aqui:
O que todo mundo faz é jogar um CTA no final do card com o link para o artigo, certo? Igual tá aí no nosso exemplo. A nossa ideia aqui, no entanto, é colocar o link no título do card e então expandir esse link de forma que todo o card fique clicável no final. Legal, né?
Se você parar pra pensar 5 minutinhos vai ver que faz todo o sentido. Eu sei... não dáááááááááá!!! Tem que entregar esse site amanhããããã!!! CALMA CALABRESO!!! Faz tua entrega na moral aí, mas depois vem aprender como fazer essa graça e coloca em prática no teu próximo projeto.
Falar em "estratégia de SEO e UX" faz tudo isso parecer muito complexo, mas na verdade é exatamente o contrário! Essa técnica é muito simples e rápida de implementar! Depois que você entender, vai ficar natural sempre implementar teus cards desse jeito!
Quantos !!! né? Tô empolgado! Releve...
Mas... daí você me pergunta:
Os mecanismos de busca dão mais peso ao texto do link quando ele está em elementos importantes, como títulos. Isso ajuda a indicar o contexto e a relevância da página para onde o link está apontando. Pensa comigo: O que é mais importante? O título do card ou um botão xexelento lá no final? Pois é.
Além disso, se o card estiver bem estruturado semanticamente, ou seja, usando HTML certinho, com <h2> para o título, <p> para o texto e tudo o mais, isso também vai ajudar a melhorar a indexação pelos mecanismos de busca.
Ok, mas e...
Expandir a área de clique para todo o card melhora a experiência do usuário, especialmente em dispositivos móveis, onde os dedos ocupam mais espaço na tela (dedão de Shrek). Isso torna a navegação mais fácil e reduz a frustração de clicar em áreas pequenas.
Além disso, quando o card inteiro é clicável, os usuários entendem rapidamente que podem interagir com ele, o que melhora a usabilidade geral.
Tudo muito lindo, tudo muito legal, mas...
Primeiro de tudo, você vai precisar criar a estrutura dos cards. O básico é:
<div class="card">
<h2><a>Título lindão</a></h2>Claro, teu card vai ter muito mais coisas, mas o mínimo é isso aí. O importante é que o div.card seja o único "relative" dessa estrutura. Você pode usar outros elementos aí dentro pra fazer teu layout, só garanta que não sejam "relative". Você vai entender já já...
PS: Não use <a><h2> porque apesar de funcionar, dessa forma teu código não fica semanticamente correto.
Bom, o div.card precisa ser "relative", então você precisa definir no teu CSS:
.card {
position: relative;
}Agora nós temos um link dentro de um título dentro de um div. Poderíamos ter outros divs antes para formatar o card de alguma outra forma, aí depende do que você quer fazer, mas basicamente (e minimamente) é isso.
Temos que, de alguma forma, fazer esse link funcionar em todo o card, mesmo que agora ele só esteja funcionando dentro do título.
Pra fazer isso vamos usar CSS, mais nada. Olha que lindeza:
.card a::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}Vamos linha a linha, porque é importante entender todo esse código. É isso aqui que faz toda a mágica acontecer!
.card a::before {
Pra começar, selecionamos o pseudo-elemento ::before, que permite adicionar conteúdo ou estilos antes do conteúdo real do elemento.
content: '';
Aqui definimos o conteúdo do pseudo-elemento como vazio, ou seja, não vai aparecer nada na tela apesar dele estar lá.
position: absolute;
Define que o pseudo-elemento estará posicionado de forma absoluta em relação ao elemento pai que tiver position:relative (ou algo similar). Isso significa que você pode controlá-lo usando valores como top, right, bottom e left. Entendeu porque não podemos ter outros relative na estrutura?
inset: 0;
Isso aqui é só uma maneira curta de dizer que top, right, bottom e left é tudo zero! Na prática, vai fazer o pseudo-elemento ocupar todo o espaço do elemento pai, ou mais diretamente, o primeiro elemento pai que for relative. No nosso caso, o div.card lá do começo.
z-index: 1;
Define a ordem de sobreposição. Quanto maior o z-index, mais pra cima estará o elemento. A gente quer o pseudo-elemento por cima de tudo, então garanta que esse número seja o maior da sua estrutura. O valor padrão é 0, então como não especificamos nenhum valor para os outros elementos do card, o 1 já resolve o problema. Se estiver na dúvida, joga um 666 aí (e saia correndo).
Tá feito! É só isso mesmo! Use sem moderação.
Se tiver qualquer dúvida é só falar comigo ler de novo!
