HTML - Metadados
Exemplos e Trechos de Código
Exemplo Básico de Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="John Doe">
<meta name="description" content="A sample webpage showing meta tags in HTML.">
<meta name="keywords" content="HTML, meta tags, example">
<title>Meta Tags Example</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is an example of how to use meta tags in an HTML document.</p>
</body>
</html>Isso mostra uma estrutura HTML básica com as meta tags charset, viewport, author, description e keywords na seção <head>.
Exemplo de Meta Tags para Redes Sociais
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Meta Tags Example</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="My Webpage Title">
<meta property="og:description" content="A brief description of my webpage.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Webpage Title">
<meta name="twitter:description" content="A brief description of my webpage.">
<meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
<h1>Social Media Meta Tags Example</h1>
<p>This webpage is optimized for sharing on social media platforms.</p>
</body>
</html>Isso mostra como usar as meta tags Open Graph e Twitter Card para otimizar uma página da web para compartilhamento em redes sociais. As meta tags fornecem informações sobre o título, descrição, imagem e URL da página, que serão exibidas quando a página for compartilhada em plataformas como Facebook e Twitter.
Exemplo de Cabeçalhos HTTP e Meta Tags de Robôs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTTP Headers and Robots Meta Tags Example</title>
<!-- HTTP Header Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">
<!-- Robots Meta Tag -->
<meta name="robots" content="index, follow">
</head>
<body>
<h1>HTTP Headers and Robots Meta Tags Example</h1>
<p>This webpage uses HTTP header meta tags to control content type and expiration, and the robots meta tag to allow search engine indexing and link following.</p>
</body>
</html>Isso mostra como usar meta tags de cabeçalho HTTP para controlar o tipo de conteúdo, codificação de caracteres e expiração de uma página da web. A meta tag Content-Type especifica o tipo de conteúdo e a codificação de caracteres, enquanto a meta tag expires define uma data de expiração para a página. A meta tag robots também é usada para permitir que os mecanismos de busca indexem a página e sigam seus links.
Esses trechos de código mostram como usar vários tipos de meta tags em um documento HTML para fornecer informações sobre a página, controlar seu comportamento e otimizá-la para mecanismos de busca e compartilhamento em redes sociais.