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.
¿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.
- 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
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios