Lección 10: Metas

Dentro de la etiqueta <head> se aloja los llamados meta etiquetas, o etiquetas de configuración. Están orientadas a dar una serie de directrices a las máquinas: navegadores, buscadores, redes sociales.

Deben situarse dentro de la etiqueta <head>.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
    </head>
</html

A continuación verás las más utilizadas a nivel profesional.

Codificación

Permite carácteres extraños del alfabeto americano: ñ, á, é…

<meta charset="utf-8">

Título que aparecerá en la pestaña

La estructura será: nombre de la página actual + separador + Descripción del sitio.

<title>Inicio | Mi gran compañía</title>

Favicon

Icono que acompañará al title. También será el icono que se guardará a la hora de que hagan un marcador. Se recomienda un tamaño de 32x32 y en formato PNG.

<link rel="icon" type="image/png" href="favicon.png">

Restablecer el zoom en Smartphones

Obligatorio si realizamos un diseño adaptable (responsive design). En muchas ocasiones el visitante posee un zoom activo de otro lugar, y puede causar una mala experiencia de entrada.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Autor

Declara quien es el autor. Sin utilidad práctica

<meta name="author" content="Tu nombre">

Descripción

Declara la descripción de la web. Es utilizado por los motores de busqueda para la previa.

<meta name="description" content="Descripcion de tu web">

(Opcional) Color de navegador

Sugiere un color al navegador para personalizar la ventana. Actualmente es compatible con Android.

<meta name="theme-color" content="#3c790a">

(Opcional) Generador

Indica con que tecnologias se ha generado el HTML

<meta name="generator" content="Django">

(Opcional) Open Graph, X (Twitter) card y Mastodon

Declara como se mostrará la previa del enlace si es compartida por Facebook, Twitter u alguna otra red social.

<!-- Open Graph -->
<meta property="og:image" content="img/miniatura.png">
<meta property="og:title" content="The Rock">
<!-- Opciones: website, video, audio, article, book o profile -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="A shiny red apple with a bite taken out">
<!-- X (Twitter) card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@cuenta">
<meta name="twitter:creator" content="@cuenta">
<!-- Mastodon -->
<link href="https://mastodon.social/@miperfil" rel="me">

(Opcional) Normalizador

Equilibra los estilos entre los Navegadores. El más famoso es Normalize.css.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

(Opcional) Enlazas archivos CSS

<link rel="stylesheet" type="text/css" href="css/main.css">

Puedes ver la plantilla completa de HTML5 en castellano

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario