Meta

Meta se utiliza para incluir y definir los metadatos de la página en el header. Existen varios tipos de meta que pueden ser interpretados por el navegador.

Un uso posible es definir que, al ser compartida la página web en alguna red social, el enlace se visualice con una descripción y alguna imagen predefinida; esto con la intención de que la vista sea más llamativa y brinde más información a los usuarios sobre el enlace de la página, proporcionando así una mejor experiencia.
Para lograr esto, muchas redes sociales crean sus propios protocolos de metadatos, los cuales es necesario incluir en etiquetas "meta" para lograr este efecto al ser compartidas.

Otros usos pueden ser: definir el autor de la página web, lo cual puede ser ventajoso por temas de contacto.
También puede ser utilizado para incluir una breve descripción del contenido de la página; es recomendable utilizar palabras clave, ya que esto puede ayudar a que la página se posicione de mejor manera en los buscadores.

Atributos

• name: Se utiliza para especificar el tipo de metadato del que se trata, es decir, el tipo de información que contiene.
• content: Especifica el contenido del metadato en sí.

Nota: Una etiqueta meta con el name="description" y un atributo content componen la descripción que se puede encontrar debajo del enlace de la página en las búsquedas de Google u otros buscadores.

Definir iconos personalizados para la página web

Para enriquecer el diseño de la web se usan los iconos personalizados, los cuales se usan en diversos contextos.

El más común de estos es el favicon; consiste en un icono predefinido que se mostrará en la parte del navegador que contiene las pestañas abiertas, y también se visualizará al guardar la página como favoritos.

Para implementarlo se necesita guardar la imagen del icono en el directorio del proyecto y añadir el siguiente código al "head". Un caso de uso real es crear varios favicons para que se apliquen uno u otro dependiendo del dispositivo desde el cual se visite el sitio.

Nota: Actualmente los navegadores soportan formatos como PNG o incluso GIF; sin embargo, el formato .ico garantiza funcionar incluso en versiones desactualizadas.

Nota: Si tu sitio web utiliza una política de seguridad de contenido (Content Security Policy o CSP) para mejorar la seguridad, esta afecta al favicon. Si te encuentras con problemas como que el favicon no carga, comprueba que la respuesta a Content-Security-Policy del header para la directriz img-src no impide el acceso a este.

Link

Se trata de una etiqueta de metadatos, por lo cual siempre debe estar ubicada en el head de la página. Esta etiqueta consta de varios usos, entre los cuales están:

• Contener las llamadas de archivos CSS: Al usarse de esta forma es necesario que se acompañe de dos de sus atributos con un valor en particular:
  • rel="stylesheet": Indica que se trata de la hoja de estilos del documento.
  • href: Debe contener la ruta al archivo CSS en cuestión.

  Dependiendo de la versión del lenguaje que se maneje, también puede ir acompañado de otros atributos complementarios como, por ejemplo, type="text/css".

Script

Esta viñeta se usa para introducir código JavaScript al documento, ya sea haciendo referencia a un archivo externo (para lo cual se usa el atributo "src" para definir la ruta del archivo) o incluyendo el código directamente en el interior de la etiqueta. En este último caso, no se utiliza ningún atributo en particular.

Definir un Idioma

Es muy recomendable indicar el idioma en el que está escrito el contenido del sitio web, esto con el fin de que los buscadores y servicios puedan ubicar y trabajar de mejor forma con nuestro proyecto en base a las preferencias lingüísticas del usuario.

Para esto es necesario incluir el atributo "lang" dentro de la etiqueta "html" del documento; el valor de este atributo debe ser un código ISO que define cuál es el lenguaje a utilizar.

En HTML5 el atributo lang es aplicable a cualquier elemento HTML, por lo que se puede definir un lenguaje en particular para un elemento en específico, e incluso aplicar más de un lenguaje en la página de la siguiente forma:

De esta forma los buscadores pueden entender perfectamente los lenguajes e incluso aplicar la pronunciación correcta en el caso de que se use alguna acción de lectura en la página.

En el caso de tener definido un lenguaje y necesitar aplicar otro en algún lugar, sería así:

Si se diese el caso de ser necesario usar tan solo algunas palabras en otro lenguaje, también se puede usar el elemento "span" con el atributo "lang" para definir el lenguaje de solo una fracción del texto de la siguiente manera:

Nota: Para saber el código de cada lenguaje basta con buscar "código ISO países" en Google.