Passo 1 de 5
Declarar a descrição no head
Adicione uma descrição à página e diferencie o papel dos atributos name e content.
Trilha de aprendizado · Nível 7 · Tutorial 3
Ao concluir, você será capaz de complementar o head de cada página com uma descrição adequada ao seu conteúdo e uma referência ao ícone do site.
Declarar a descrição no head
Adicione uma descrição à página e diferencie o papel dos atributos name e content. 2 min
Escrever um resumo específico da página
Escreva descrições fiéis, específicas e concisas para páginas com finalidades diferentes. 2 min
Referenciar o ícone do site
Associe cada página a um arquivo de ícone usando link, rel e href no head. 2 min
Entender o que pode aparecer no navegador e na busca
Distinguir os metadados declarados do que a busca e o navegador apresentam, considerando também o cache do ícone. 2 min
Aplicar e revisar os metadados do pequeno site
Complete os heads de duas páginas e revise a diferença entre os metadados declarados e sua apresentação. 3 min
Passo 1 de 5
Adicione uma descrição à página e diferencie o papel dos atributos name e content.
Para declarar a descrição da página, adicione um elemento meta dentro do head, mantendo as configurações que já estão lá:
<meta name="description" content="Conheça a Biblioteca do Bairro.">name="description" identifica o metadado como uma descrição.content="Conheça a Biblioteca do Bairro." fornece o valor dessa descrição.Essa declaração informa sobre a página, mas não cria um parágrafo visível no body.
Complete apenas as duas lacunas da última linha, sem alterar as declarações existentes.
Use este resumo em content: “Horários e atividades da Biblioteca do Bairro.”
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atividades | Biblioteca do Bairro</title>
<meta name="___" content="___">
</head>Digite o valor de name, sem aspas, para identificar o metadado de descrição.
Copie o resumo fornecido para o valor de content, sem as aspas.
Adicionar meta name="description" ao head faz o texto de content aparecer automaticamente como um parágrafo no body.
Passo 2 de 5
Escreva descrições fiéis, específicas e concisas para páginas com finalidades diferentes.
Ao escrever o valor de content, responda: o que esta página oferece ao visitante? Use um resumo claro do conteúdo, não uma lista de palavras-chave.
Exemplo
A página apresenta temas e horários das oficinas da Casa do Bairro.
Lista de palavras: “Oficinas, cultura, bairro, atividades.”
Resumo informativo: “Confira os temas e horários das oficinas culturais da Casa do Bairro.”
Dica
O HTML não exige uma quantidade fixa de caracteres para a descrição. Corte repetições e frases vazias, mas preserve o que identifica o conteúdo da página.
Uma página apresenta apenas temas e horários das oficinas, sem oferecer inscrição online.
A descrição “Inscreva-se online nas oficinas da Casa do Bairro” representa adequadamente essa página.
“Bem-vindo ao site da Casa do Bairro” poderia aparecer em qualquer página. Em vez de copiar esse texto genérico, destaque o conteúdo específico de cada uma.
Exemplo
Página Sobre, com história e projetos:
“Conheça a história da Casa do Bairro e os projetos que ela desenvolve.”
Página Contato, com endereço e telefone:
“Consulte o endereço e o telefone da Casa do Bairro.”
A página Biblioteca da Casa do Bairro apresenta:
Ela não oferece catálogo nem reserva online.
Escreva uma descrição curta e informativa. Digite apenas o texto, sem tags. Há várias redações possíveis.
Passo 3 de 5
Associe cada página a um arquivo de ícone usando link, rel e href no head.
Você recebeu o arquivo imagens/icone.png para usar como ícone do site. Para associá-lo à página index.html, acrescente um elemento link ao head existente.
<link rel="icon" href="imagens/icone.png">link é um elemento vazio: declara uma relação com um recurso e não tem tag de fechamento.rel="icon" identifica a relação: o recurso é um ícone da página.href indica o caminho do arquivo.Apesar do nome, link não cria um link clicável no conteúdo do body.
Na declaração <link rel="icon" href="imagens/icone.png">, associe cada parte à sua função.
Toque em um item e depois no par correspondente.
PNG e ICO são formatos comuns de arquivos de ícone. Use em href o caminho correspondente ao arquivo fornecido.
Várias páginas podem compartilhar o mesmo arquivo, mas inclua a referência no head de cada documento, com o caminho adequado à localização da página.
Neste site, as duas páginas e o ícone estão na mesma pasta. Por isso, ambas podem usar href="icone.ico".
site/
├── index.html
├── contato.html
└── icone.icoindex.html já referencia o ícone. O arquivo icone.ico está na mesma pasta de contato.html. Como associar também a página de contato a esse ícone, sem criar conteúdo clicável?
Passo 4 de 5
Distinguir os metadados declarados do que a busca e o navegador apresentam, considerando também o cache do ícone.
O mecanismo de busca pode usar a descrição declarada como trecho do resultado, mas não é obrigado a exibir esse texto. Ele também pode selecionar outro trecho do conteúdo da página.
Exemplo
Descrição declarada: “Encontre os canais de contato e os horários do Centro Cultural.”
Trecho presente na página: “A bilheteria atende de terça a domingo, das 9h às 18h.”
A busca pode mostrar o trecho sobre a bilheteria em vez da descrição.
Uma página de cursos tem uma descrição sobre sua programação, mas a busca exibe “Inscrições até sexta-feira”, frase presente no conteúdo. Essa diferença, por si só, comprova que a declaração da descrição está incorreta.
O navegador pode usar o ícone em locais como a aba da página. Onde e como ele aparece pode variar entre navegadores e dispositivos.
Exemplo
Cache é o armazenamento de uma cópia de um recurso para reutilização.
Você substitui o arquivo de ícone por uma imagem nova, mantendo o mesmo caminho. O navegador pode continuar usando a cópia antiga guardada no cache.
Atenção
Salvar os arquivos e atualizar a página não garante que o navegador renove o ícone naquele momento. Um ícone antigo, sozinho, não comprova erro na referência.
Você trocou a imagem do arquivo de ícone, salvou e atualizou a página. A aba ainda mostra o ícone anterior. O que é possível concluir?
Passo 5 de 5
Complete os heads de duas páginas e revise a diferença entre os metadados declarados e sua apresentação.
Neste exercício, index.html e oficinas.html ficam na mesma pasta. O arquivo de ícone fornecido fica em imagens/icone.png, a partir dessa pasta.
A página index.html apresenta o Espaço do Bairro, um local para encontros e atividades culturais da comunidade. Comece completando seu head. Não é preciso publicar o site nem consultar uma busca.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Espaço do Bairro</title>
</head>Copie e complete o head: mantenha as declarações existentes, escreva uma descrição concisa da página inicial e referencie o ícone fornecido.
A página oficinas.html apresenta as oficinas de desenho e fotografia do Espaço do Bairro, com seus dias e horários. Ela fica na mesma pasta de index.html e deve usar o mesmo arquivo imagens/icone.png.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oficinas — Espaço do Bairro</title>
</head>Reescreva o head preservando o que já existe. Adicione uma descrição específica das oficinas e a referência ao ícone compartilhado.
Em uma situação hipotética, a busca mostra um texto diferente da descrição declarada. O navegador também continua mostrando o ícone antigo após a troca do arquivo e a atualização da página. Isso, por si só, comprova que os metadados estão errados?
Resumo
Parabéns! Você concluiu: Adicionar descrição e ícone aos metadados da página
Você praticou como complementar os metadados de duas páginas, adaptar cada descrição e compartilhar um ícone sem prometer uma apresentação exata ou imediata.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
