logoNext.js
DocumentaciónBlogAprender

Metadatos

Los metadatos son el resumen del contenido de un sitio web y se utilizan para adjuntar un título, una descripción y una imagen al sitio.

Título

La etiqueta de título es uno de los elementos más importantes para el SEO por dos razones principales:

En primer lugar, es lo que los usuarios ven cuando hacen clic para ingresar a su sitio web desde los resultados de búsqueda.

En segundo lugar, es uno de los principales elementos que Google utiliza para entender de qué trata su página. Se recomienda usar palabras clave en el título porque generalmente conduce a mejores posiciones en los motores de búsqueda.

Aquí hay un ejemplo:

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

Esta página contiene todas las palabras clave principales y también resulta atractiva para los usuarios al mostrar una propuesta de valor clara: ¡Descuentos!

Descripción

La metaetiqueta de descripción es otro elemento importante para el SEO, aunque menos que el título. Según Google, este elemento no se tiene en cuenta para el posicionamiento, pero puede afectar su tasa de clics en los resultados de búsqueda.

Use la metaetiqueta de descripción para complementar la información en su título. Incluya más palabras clave aquí si hay algunas que no cabían en el título. Estas palabras clave aparecerán en negrita si la búsqueda de un usuario las contiene.

Un ejemplo de una metaetiqueta de descripción en HTML:

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

Así es como se ve en la página cuando es parte de la página de resultados del motor de búsqueda (SERP):

Ejemplo de un fragmento SERP con Título y Descripción

Ejemplo de un fragmento SERP con Título y Descripción

En Next.js, establecemos el título y la descripción en el componente Head. Así es como podrían verse las metaetiquetas de título y descripción en Next.js:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}
 
export default IndexPage;

El componente Head se puede usar en cualquier página de su aplicación para describir o proporcionar información sobre el contenido de la página.

Open Graph

El protocolo Open Graph, desarrollado originalmente por Facebook, estandariza cómo se usan los metadatos en cualquier página web. Puede proporcionar tanta o tan poca información como desee, pero todas las piezas de Open Graph encajan para crear una representación del sitio al que está adjunto.

Otras empresas de redes sociales (como Pinterest, Twitter, LinkedIn, etc.) también pueden usar Open Graph para mostrar tarjetas enriquecidas al compartir una URL. Twitter también tiene etiquetas de sus Twitter Cards.

Aunque estas etiquetas Open Graph tienen muchas similitudes con las etiquetas relacionadas con el SEO, no ofrecen ningún beneficio para el posicionamiento en motores de búsqueda, pero aún así se recomienda su uso ya que las personas pueden compartir su contenido en redes sociales o herramientas de mensajería privada como WhatsApp o Telegram.

Puede agregar etiquetas Open Graph definiendo el atributo property en las metaetiquetas dentro del componente Head. Por ejemplo:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Cool Page</h1>
      <p>This is a cool page. It has lots of cool content!</p>
    </div>
  );
}
 
export default IndexPage;

Tener un enlace compartible que ofrezca una descripción y un título, junto con una imagen que represente el contenido de la página, no tiene un efecto directo en el posicionamiento SEO, pero indirectamente aumenta la capacidad de clic del enlace, lo que finalmente conducirá a más visitantes a su sitio.

Datos estructurados y JSON-LD

Los datos estructurados facilitan la comprensión de sus páginas a los motores de búsqueda. A lo largo de los años, ha habido varios vocabularios, pero actualmente el principal es schema.org.

Según el sitio web, schema.org es una "actividad colaborativa de la comunidad con la misión de crear, mantener y promover esquemas para datos estructurados en Internet, en páginas web, en mensajes de correo electrónico y más allá".

El vocabulario de Schema.org se puede usar con muchas codificaciones diferentes, incluyendo RDFa, Microdata y JSON-LD.

Diferentes motores de búsqueda pueden adaptar diferentes vocabularios dentro de schema.org, y ningún motor de búsqueda cubre todos los casos de uso descritos en el vocabulario del sitio web. Asegúrese de verificar qué vocabularios se aceptan en cada caso.

Un ejemplo de cómo podría verse una página de producto al agregar los datos de esquema de producto JSON-LD:

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}
 
export default ProductPage;

En este ejemplo, los datos están codificados como una cadena, pero puede pasar fácilmente los datos al método addProductJsonLd para hacerlos completamente dinámicos.

Lecturas adicionales

Estructura de URLs

Previous Page

SEO en la página

Next Page

On this page