Decidimos criar este artigo após nos depararmos com um erro de caracteres, logo após a criação da página inicial do site da Anima Station. Após a criação da página, e antes de corrigirmos o erro, veja como a mesma aparecia no motor de pesquisa Google:
Como se pode ver pela imagem, a palavra "informações" aparece com caracteres estranhos. Isso ocorreu porque não especificamos explicitamente o tipo de caracteres associados à página. Logo, o programa que usamos para criar a mesma, neste caso usamos o Dreamweaver - utilizou o tipo de caracteres predefinido (utf-8), sendo então a página, internamente, configurada para este formato.
No entanto, devido á falta de informação explicita do tipo de caracteres usado na página, o sistema de indexação de páginas do Google indexou a página com o formato "iso-8859-15". Uma vez que houve um conflito entre o formato interno do arquivo e o formato interpretado pelo motor de pesquisa da Google, o texto então é apresentado de maneira incorreta, como mostra a imagem acima.
Testes e resolução de problemas
Vamos fazer um teste para ver como o navegador se comporta ao omitirmos o sistema de caracteres presente na página. Neste caso, vamos utilizar o navegador Chrome, porém, efetuamos os mesmos testes no Firefox e obtivemos os mesmos resultados. Por isso, vamos apresentar apenas os resultados obtidos no Chrome.
Teste 1:
Primeiramente, criamos uma página simples em HTML e configuramos internamente - através das propriedades do documento - o seu tipo de caracteres. Neste caso escolhemos o formato de caracteres utf-8, modificando as propriedades do documento no Dreamweaver.
<html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>
Resultado:
Anima Station. Tecnologia, entretenimento e informação.
Neste teste nós desabilitamos a opção do Chrome que detecta automaticamente o sistema de caracteres da página, o que faz com que o navegador possa utilizar um sistema de caracteres diferente do sistema de caracteres da página. Neste caso, o Chrome interpreta a página como se estivesse configurada para "Europeu Ocidental (windows-1252)". Visto que a página está configurada para utf-8, ocorre um erro nos caracteres, tal como ocorreu no motor de pesquisa do Google.
Teste 2:
Agora, habilitamos o sistema de detecção automática do tipo de caracteres da página no Chrome e mantivemos a configuração de caracteres da página como utf-8. Neste teste, utilizaremos o mesmo código utilizado utilizado no teste 1.
<html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>
<head></head>
<body>Anima Station. Tecnologia, entretenimento informação.</body>
</html>
Resultado:
Anima Station. Tecnologia, entretenimento e informação.
Com a detecção automática, mesmo que não indicamos explicitamente o tipo de caracteres no código da página, o navegador identifica e interpreta corretamente o tipo de caracteres usados ao aceder às propriedades do documento.
Conclusão:
O problema de caracteres pode não ser causado devido a uma configuração do documento, mas sim, devido às configurações da aplicação que irá executar a página, neste caso o navegador Chrome. Sendo assim, é importante verificarmos se o navegador possui esta opção de detecção automática e se esta está habilitada. O Firefox, por exemplo, não vem com esta opção habilitada. Caso a detecção automática não esteja habilitada, o navegador poderá associar o documento a um tipo de caracteres diferente daquele na qual está foi configurado, gerando assim um erro nos caracteres. Por isso, é muito importante especificar explicitamente o tipo de caracteres da página, para que os navegadores possam apresentar corretamente o documento.
Isso pode ser feito da seguinte forma, com base no HTML5 e seguindo as normas da W3C:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>Anima Station. Tecnologia, entretenimento informaçãoo.</body>
</html>
<head>
<meta charset="UTF-8">
</head>
<body>Anima Station. Tecnologia, entretenimento informaçãoo.</body>
</html>
Nota: Também poderíamos ter usado a função header do php para a configuração do tipo de caracteres do documento. Vamos falar sobre esta função numa outra oportunidade.