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">

Bloquea el zoom en Smartphones.

Obligatorio si realizamos un diseño adaptable (responsive design).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, 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="Clojure">

(Opcional) Palabras claves

Antes era importante para el posicionamiento, hoy en día es opcional ya que las arañas de los motores de busqueda buscan contextos no palabras determinadas. Además de ser más destacado el propio contenido de la página.

<meta name="keywords" content="html, css, javascript">

(Opcional) Open Graph y Twitter card

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

<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 name="twitter:card" content="summary">
<meta name="twitter:site" content="@cuenta">
<meta name="twitter:creator" content="@cuenta">
<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">

(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

¿Te ha gustado?

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario