HTML: SEO y etiquetas meta

SEO

¿Alguna vez te has preguntado en qué se basa Google para mostrar unos resultado de búsqueda antes que otros?

La respuesta no es algo sencillo, el algoritmo de Google es complejo y tienen en cuenta muchas variables distintas para tratar de ofrecer al usuario los resultados más relevantes posibles.

Pero en general, Google busca satisfacer las necesidades de búsqueda de los usuarios lo mejor posible, por lo que si te centras en resolver esa necesidad de búsqueda de los usuarios de la mejor manera posible, a Google le interesará que tu web salga en los primeros resultados.

Pero para que Google pueda entender que intenciones de búsqueda puede resolver tu web, hay una seria de meta información que debes añadir a tu web para facilitarle la tarea.

Etiqueta meta title

La etiqueta title es la etiqueta más importante de tu web, es la que se muestra en los resultados de búsqueda de Google y es la que se muestra en la pestaña del navegador.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
  </head>
</html>

Etiqueta meta description

La etiqueta description es la que se muestra en los resultados de búsqueda de Google justo debajo del título.

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
  </head>
</html>

Etiqueta meta keywords

La etiqueta keywords es una lista de palabras clave que describen el contenido de tu web.

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta name="keywords" content="palabra1, palabra2, palabra3" />
  </head>
</html>

👉

Antiguamente, Google utilizaba la etiqueta keywords para entender el contenido de tu sitio y mostrarlo en los resultados de búsqueda de Google, pero actualmente el algoritmo es mucho más avanzado, y extraerá las keywords del contenido de tu web de forma automática. Por lo que esta etiqueta ha perdido mucha importancia.

Etiqueta meta viewport

La etiqueta viewport ayuda a establecer el nivel de zoom de la página correcto en dispositivos móviles. Que tu web sea accesible en dispositivos móviles es un factor muy importante para Google.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
  </head>
</html>

Open Graph

Te has fijado que cuando compartes un sitio web en las redes sociales, a veces se muestra una imagen, un título y una descripción de la web?

Esto es posible gracias a las etiquetas Open Graph.

Open Graph es un protocolo que permite a cualquier página web convertirse en un objeto social, es decir, que se pueda compartir en redes sociales como Facebook, Twitter, LinkedIn, etc.

Para añadir etiquetas Open Graph a tu web, debes añadir las siguientes etiquetas en la sección head de tu web.

Etiqueta og:title

Esta etiqueta define el título que se mostrará al compartir tu web en las redes sociales.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
  </head>
</html>

Etiqueta og:description

Esta etiqueta define la descripción que se mostrará al compartir tu web en las redes sociales.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
  </head>
</html>

Etiqueta og:image

Esta etiqueta define la imagen que se mostrará al compartir tu web en las redes sociales.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
  </head>
</html>

Etiqueta og:url

Esta etiqueta define la URL que se mostrará al compartir tu web en las redes sociales.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
  </head>
</html>

Etiqueta og:type

Esta etiqueta define el tipo de contenido de tu sitio web, por ejemplo, si es un blog, una página web, un producto, etc.

Algunos valores posibles son website, article, product

Esto ayudará a Google a entender mejor el contenido de tu web.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
    <meta property="og:type" content="website" />
  </head>
</html>

Twitter Cards

Twitter Cards es un protocolo similar a Open Graph, pero específico para Twitter.

Para añadir etiquetas Twitter Cards a tu web, debes añadir las siguientes etiquetas en la sección head de tu web.

Etiqueta twitter:card

Esta etiqueta define el tipo de tarjeta que se mostrará al compartir tu web en Twitter.

Algunos valores posibles son summary, summary_large_image, app, player

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
  </head>
</html>

Etiqueta twitter:title

Esta etiqueta define el título que se mostrará al compartir tu web en Twitter.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Título de mi web para Twitter" />
  </head>
</html>

Etiqueta twitter:description

Esta etiqueta define la descripción que se mostrará al compartir tu web en Twitter.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Título de mi web para Twitter" />
    <meta
      name="twitter:description"
      content="Descripción de mi web para Twitter"
    />
  </head>
</html>

Etiqueta twitter:image

Esta etiqueta define la imagen que se mostrará al compartir tu web en Twitter.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Este es el título de mi web</title>
    <meta name="description" content="Esta es la descripción de mi web" />
    <meta property="og:title" content="Título de mi web para redes sociales" />
    <meta
      property="og:description"
      content="Descripción de mi web para redes sociales"
    />
    <meta property="og:image" content="https://miweb.com/imagen.jpg" />
    <meta property="og:url" content="https://miweb.com" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Título de mi web para Twitter" />
    <meta
      name="twitter:description"
      content="Descripción de mi web para Twitter"
    />
    <meta name="twitter:image" content="https://miweb.com/imagen.jpg" />
  </head>
</html>

Favicon

El favicon es el icono que se muestra en la pestaña del navegador y en la lista de favoritos.

Para añadir un favicon a tu web, debes añadir la siguiente etiqueta en la sección head de tu web.

<head>
  <link rel="icon" href="favicon.ico" />
</head>

Compruébalo tú mismo

Inspecciona las meta tags de cualquier sitio web

En el siguiente capítulo

En el siguiente capítulo tendrás tu primer laboratorio, donde podrás poner en práctica todo lo que has aprendido hasta ahora.