Lección 10: Metas | Curso HTML

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

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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Escribe el primer comentario