Elemento meta en HTML

El elemento meta se usa para indicar metadatos dentro del documento html, este no posee etiqueta de cierre y debe ir dentro del elemento head.

Propiedades principales

name: aquí se indica el nombre del metadatos
content: aquí se indica el valor asociado al nombre del metadato
http-equiv: esta propiedad sirve para indicar nombres similares a encabezado HTTP
charset: indica el encoding de los caracteres en el documento HTML

Este elemento es importante conocer si se desea crear páginas con un excelente SEO.

Tipos comunes de metadatos

La codificación de caracteres suele ser obligatorio, se usa de la siguiente manera

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTL-8" />
    <title>Mi Página</title>
    <link rel="stylesheet" href="estilos.css" type="text/css">
  </head>
  <body>
    <!-- Contenido de la página -->
  </body>
</html>

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En SEO es requerido que indicar una descripción y palabras claves.

<meta name="description" content="Tienda online de productos ecológicos y sostenibles con envío a toda España">

<meta name="keywords" content="ecológico, sostenible, productos naturales, comercio justo">

Cuando escribes un articulo y desees agregar autor

<meta name="author" content="Ana Martínez">

Para indicar si una página web debe ser o no indexada mediante robots

<meta name="robots" content="index, follow">  <!-- Valor por defecto -->

<meta name="robots" content="noindex, nofollow">  <!-- Para no indexar -->

Para URL canonical

Cuando posees contenido con similitud, por ejemplo un articulo de blog con una version en español y una en ingles, y estas se diferencian mediante la URL, por ejemplo:

Español: /mi-articulo
Ingles: /en/mi-articulo

Es importante señalar cual es la página más importante, estando en la url /en/mi-articulo se puede tener como canonical lo siguiente:

<link rel="canonical" href="https://www.tudominio.com//mi-articulo">

Open Graph (metadatos para redes sociales)

Open Graph es un estandar para que las redes sociales puedan obtener metadatos de las páginas web y así crear miniaturas de forma sencilla:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Cursos online de programación web con HTML5, CSS3 y JavaScript. Aprende desde cero con proyectos prácticos.">
    <meta name="keywords" content="curso html, aprender css, javascript desde cero, programación web">
    <meta name="author" content="Academia Web">
    <meta name="robots" content="index, follow">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://tupaginaweb/cursos/">
    <meta property="og:title" content="Cursos de Programación Web | Academia Web">
    <meta property="og:description" content="Aprende desarrollo web con nuestros cursos prácticos desde cero">
    <meta property="og:image" content="https://tupaginaweb/img/og-cursos.jpg">
    
  
    <title>Cursos de Programación Web | Academia Web</title>
    <link rel="canonical" href="https://tupaginaweb/cursos/">
</head>
<body>
    <!-- Contenido de la página -->
</body>
</html>

Elemento link en HTML

El elemento link sirve para indicar una conexión entre el do...

Elemento script en HTML

El elemento <script> en HTML se utiliza para insertar código...

Referencias

W3Schools. HTML <meta> Tag. https://www.w3schools.com/tags/tag_meta.asp

MDN developers. Elemento meta. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta

Elemento meta en HTML