HTML - Etiquetas Meta
Ejemplos y fragmentos de código
Consejo: Ejemplo básico de etiquetas Meta
<!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>Esto muestra una estructura HTML básica con las etiquetas meta charset, viewport, author, description y keywords en la sección <head>.
Consejo: Ejemplo de etiquetas Meta para redes sociales
<!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>Esto muestra cómo usar las etiquetas meta de Open Graph y Twitter Card para optimizar una página web para compartir en redes sociales. Las etiquetas meta proporcionan información sobre el título, la descripción, la imagen y la URL de la página web, que se mostrarán cuando la página se comparta en plataformas como Facebook y Twitter.
Consejo: Ejemplo de encabezados HTTP y etiquetas Meta de robots
<!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>Esto muestra cómo usar las etiquetas meta de encabezado HTTP para controlar el tipo de contenido, la codificación de caracteres y la expiración de una página web. La etiqueta meta Content-Type especifica el tipo de contenido y la codificación de caracteres, mientras que la etiqueta meta expires establece una fecha de expiración para la página web. También se usa la etiqueta meta robots para permitir que los motores de búsqueda indexen la página web y sigan sus enlaces.
Estos fragmentos de código muestran cómo usar varios tipos de etiquetas meta en un documento HTML para proporcionar información sobre la página web, controlar su comportamiento y optimizarla para motores de búsqueda y compartir en redes sociales.