O valor da Redação SEO está em saber quais argumentos semânticos da linguagem de marcação HTML colocar em um texto. E isso só é possível conhecendo essas marcações. Por isso, quando usamos itálico, ficamos na dúvida se a marcação certa é o <i> ou o <em>. Aqui mora a diferença entre um redator SEO e um produtor de conteúdo.
Ambos os argumentos podem ser usados para gerar esse mesmo efeito, de inclinar as letras e provocar um efeito de sentido na leitura, bem como um efeito semântico no conteúdo. Agora, por quê esses dois códigos se expressam da mesma forma? E o que significa o uso de cada um? É isso que exploramos abaixo.
(E use o seu leitor de código e veja qual foi usado em cada trecho do parágrafo acima).
Qual a função da tag <i>
A tag HTML <i> é usada para algo comum em redações jornalísticas e em artigos de opinião: marcar o dialogismo. Seja para marcar uma expressão coloquial, uma fala de terceiros, um ditado popular ou um termo em outra língua, o uso do <i> é para separar esses conteúdos mais líricos do restante do conteúdo.
Esse é seu uso corrente, e o mais aceito na nossa cultura de linguagem.
O uso do <i> em “Eu quero comer queijo <i>fromage</i>” tem esse efeito: marcar uma palavra dita em língua estrangeira, que não a corrente do leitor. Orienta que quem lê, leia esse trecho com uma entonação diferente.
E apesar de ter essa função no conteúdo, o <i> tem uma função gráfica: itálico. E é devido a essa função gráfica que eles causam tanta confusão.
<i>: elemento de estilo
O elemento HTML
Mozilla<i>representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo “itálico”.
Qual a função do <em>
O argumento <em>, por outro lado, é usado para marcar semânticamente a ênfase. Esse é o motivo de ser desse argumento. A tag <em> marca um conteúdo que merece ser lido com ênfase pelo leitor de tela, e não só pelo usuário. Seria como escrever “Eu quero comer queijo FROMAGE”.
Para nós, leitores, a caixa alta significa, depois de anos de cultura de uso, o grito. O volume alto.
Entretanto, os leitores de tela não entendem a caixa alta como um argumento de ênfase. Para isso é que existe o argumento <em>. E aqui o nó é completo, porque o <em> se expressa de um mesmo jeito gráfico: em itálico.
<em>: O elemento de ênfase
O elemento HTML
Mozilla<em>marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase.
Por que há duas funções para o itálico?
A explicação para essa pergunta mergulha um pouco na história da linguagem HTML e CSS. Ficar na dúvida entre as tags i ou em só ocorre pois ambas se expressam graficamente da mesma forma, mas possuem funções diferentes.
Historicamente, a tag <i> apareceu antes da tag <em>. Na época em que foi criada, a linguagem HTML tinha artifícios gráficos rudimentares, que simulavam efeitos já criados fisicamente. O negrito, o sublinhado e o itálico aparecem como funções HTML nesse contexto.
Entretanto, quando a W3C começou a pensar em padrões cada vez mais aceitos, o <i> e o <em> conflitaram.
Por um lado, jornalistas e escritores gostavam de usar o itálico para marcar trechos, idiomas estrangeiros ou citações.
Por outro, o uso do itálico poderia fazer referência a trechos de grande valor semântico, mudanças de entonação propostas no trecho etc. Por isso, criaram-se diferenciações para ambos os casos.
Interações entre usuários
Para entendermos a complicação entre o uso das tags i ou em, precisamos entender também que falamos aqui de uma relação em três partes: plataforma low-code, redator, código.
- Plataforma Low-Code
- WordPress
- Wix
- Redatores
- Programadores
- Não-programadores
- Redatores SEO
- Código
- HTML
- CSS
A interação entre esses três atores gerou uma complicação no uso do i ou em. Isso ocorre porque as plataformas low-code usadas para publicar artigos usam por padrão o em, marcando todo conteúdo em itálico como importante.
Por exemplo, se estiver usando um editor de sites Wix ou WordPress, apertar a tecla ctrl+i irá sinalizar que você quer usar o estilo itálico. Mas isso nem sempre significa que você quer que aquele trecho seja lido com mais ênfase pelo buscador.
Por que sites Wix e WordPress usam <em> como padrão
Na hora de criar um padrão para suas publicações, as plataformas low-code precisavam fazer valer o seu nome. Afinal, é sendo low-code que elas são utilizadas: quando se quer economizar com desenvolvedores.
Logo, na hora de criar suas definições default, as plataformas observaram que seria mais interessante marcar o conteúdo como importante do que como estiloso. É uma herança da época em que técnicas de black hat como o keyword stuffing imperavam.
Hoje, o uso incorreto de tags como i ou em pesa negativamente para os buscadores. Atualizações como o HCU buscam esses contextos semânticos. E penalizam seu mal uso.
Como saber se estou usando a tag certa
Lembre-se: essas tags são estilísticas E semânticas. Por isso, antes de estudar se a tag i ou em faz sentido para o seu texto, analise as seguintes proposições:
- Esse trecho é relevante para o entendimento do texto?
- Esse trecho traz informações contextuais?
- Você está buscando uma posição nas SERP para aquele termo?
- O termo em itálico é uma das palavras-chave ou um sinônimo da sua palavra-chave?
Se a sua resposta foi sim para alguma dessas perguntas, parabéns, o uso da tag <em> é a ideal, e você não precisa de mais nenhuma linha de código: basta usar o clássico ctrl+i. Agora, avalie essas outras proposições:
- O trecho é uma fala de alguém?
- O trecho é uma palavra ou frase em outro idioma?
- O trecho é uma frase idiomática ou marcada por oralidade?
- O trecho faz parte do seu CTA?
Agora, se a sua resposta for sim, prepare-se para mudar as configurações de fábrica e adotar o <i> como seu padrão, pois ele é o único que atende a essas exigências.
Se eu responder sim nas duas?
Nesse caso, use o <em>.
Como alterar a tag i ou em
Para saber se a sua redação SEO está usando a tag certa, você pode usar alguns mecanismos.
Caso esteja escrevendo diretamente no editor de blocos do Wix ou WordPress, clique em “visualizar como HTML” no editor de blocos.
Ao clicar em “editar como HTML” você terá o bloco aparecendo para você no seguinte formato:
Essa é a diagramação padrão para códigos HTML aparecerem na sua tela.Logo na sequência, veja como fica o mesmo trecho em texto corrido com itálico automático e em HTML:
Eu vou ao toilet
Eu vou ao <em>toilet</em>A menos que o seu texto seja sobre a importância do toilet, não há porque usar a marcação <em> nesse contexto. Ao invés disso, opte por entrar no “editar como html” e fazer a seguinte alteração:
E pronto! Você fez a alteração necessária.
