Opengraph en NextJS

Opengraph es una herramienta para mejorar el SEO de tu website y lo puedes implementar de manera muy fácil a hacerlo con NextJS, acá te voy a mostrar dos formas sencillas de hacerlo

Si en algún momento has querido que tu website que montaste con NextJS tenga mayor alcance en las redes sociales? Pues para ésto te va a servir el Protocolo Open Graph.

NextJS tiene un paquete que se llama next-seoque permite agregar tags de manera muy sencilla a tu website. También se puede hacer de forma manual, te voy a mostrar los dos y al final tu decides cual implementar en tu proyecto.

Pero primero,

¿Que es Open Graph?

Es un estandar abierto que permite a los desarrolladores controlar cómo mostrar contenido en las diferentes redes sociales. Este fue desarrollado originalmente por Facebook, pero desde entonces otras plataformas como Twitter, LinkedIn, Pinterest lo han venido adoptando.

Open Graph te permite especificar cómo los otros sitios deben mostrar tu contenido, asegurando que se vea bien y sea fácil de leer. Además que también permite un mayor control sobre cómo se presentan los elances, ésto facilita mucho el seguimiento de los clics y las diferentes métricas.

¿Por qué deberías usar Open Graph Protocol?

Hay 3 razones principales por las que deberías tener implementado Open Graph en tu website:

1. Mejora el Engagement en Redes Sociales

Te puede ayudar a mejorar el Engagement en tus redes sociales y facilita que los usuarios compartan tu contenido. Al especificar cómo los sitios deben mostrar tu información y eres tú quien decide qué y cómo se verá, de manera atractiva y fácil de leer.

1. ** Mejora el SEO **

Al especificar el título, la descripción y la imagen de cada contenido, puede controlar cómo aparece en los resultados de búsqueda. Esto puede ayudar a aumentar la tasa de clics en tu website, así como mejorar la clasificación general y el posicionamiento en motores de búsqueda.

1. Incrementa el tráfico a tu Website

Open Graph te ayuda a incrementar el tráfico hacia tu sitio web, puesto que hace mucho más fácil para los usuarios compartir el contenido que publicas, así podrás incrementar el número de personas que ven tus publicaciones.

1. Mejorar la Experiencia de Usuario

Otro de los beneficios que tiene el protocolo Open Graph es que claramente mejora la Experiencia de Usuario(UX) en tu website. Al incluir metadata, podrás asegurar que tus usuarios vean la información más relevante, esto sin duda hace mejor la experiencia en tu sitio, lo que puede hacer que tus usuarios regresen.

Ahora, sin más carreta, vamos a ver cómo implementar Open Graph Protocol en NextJS

Como te dije antes, hay dos formas de hacerlo, la primera es utilizando next-seo package o puedes editar directamente el archivo _document.ts

1. Utilizando next-seo

Ejecutas el comando npm install next-seo --save

Luego de instalar, vamos a editar el archivo pages/index.tsx que es tu pantalla principal, debe quedar así:

import { NextSeo } from 'next-seo';

const DemoPage = () => (
  <>
    <NextSeo
      title="Your Title"
      description="This is a demo description"
      canonical="https://www.example.com"
      openGraph={{
        url: 'https://www.example.com',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        images: [
          {
            url: 'https://www.example.com/og-image01.jpg',
            width: 800,
            height: 600,
            alt: 'Og Image Alt',
            type: 'image/jpeg',
          },
          {
            url: 'https://www.example.com/og-image02.jpg',
            width: 900,
            height: 800,
            alt: 'Og Image Alt Second',
            type: 'image/jpeg',
          },
          { url: 'https://www.example.com/og-image03.jpg' },
          { url: 'https://www.example.com/og-image04.jpg' },
        ],
        site_name: 'YourSiteName',
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
      }}
    />
    <p>Demo Page</p>
  </>
);

export default DemoPage;

Este código lo que hace es importar el componente NextSeo desde el paquete next-seo y luego se especifica los valores que quieres mostrar en la Card en redes sociales como Twitter, por ejemplo.

1. La segunda forma es editando directamente el archivo _document.ts. En éste archivo se puede especificar cuales son los tags que quieres agregar con Open Graph

Entonces, crea el archivo pages/_document.ts

import { Head, Html, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html className="h-full antialiased" lang="en">
      <Head>
        <meta
          name="description"
          content="Víctor Meza | frontend, dev, Software Engineer, IT Consultant"
        />
        <meta property="og:title" content="viistorrr.com"></meta>
        <meta property="og:url" content="https://www.viistorrr.com" />
        <meta property="og:type" content="website" />

        <meta
          property="og:description"
          content="Víctor Meza | frontend, dev, Software Engineer"
        />
        <meta
          property="og:image"
          content="https://www.viistorrr.com/assets/imgs/webdevpath/working.jpg"
        />

        <meta name="twitter:card" content="summary_large_image" />
        <meta property="twitter:domain" content="www.viistorrr.com" />
        <meta property="twitter:url" content="https://www.viistorrr.com" />
        <meta name="twitter:title" content="https://www.viistorrr.com" />
        <meta
          name="twitter:description"
          content="Víctor Meza | frontend, dev, Software Engineer"
        />
        <meta
          name="twitter:image"
          content="https://www.viistorrr.com/assets/imgs/webdevpath/working.jpg"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Hecho ésto, ya estas casi listo, ahora solo debes correr tu proyecto y verificar los tags en el navegador, así

npm run dev

Al inspeccionar el código fuente de tu website deberás poder ver algo como ésto: