Come implementare il protocollo Open Graph in Next.js

Open Graph è un facile vantaggio SEO e, fortunatamente, puoi aggiungerlo al tuo sito Next.js con uno di questi due semplici metodi.

Hai mai desiderato che il tuo sito Next.js si presentasse come un oggetto ricco quando condiviso sui social media? Se è così, allora devi implementare il protocollo Open Graph.

Il pacchetto next-seo semplifica l'aggiunta di tag Open Graph al tuo sito Next.js. Puoi anche utilizzare un approccio più manuale per un controllo più preciso sul risultato finale.

Infine, ti consigliamo di considerare esattamente quali informazioni includere nei tag.

Cos'è il grafico aperto?

Il protocollo Open Graph è uno standard aperto che consente agli sviluppatori di controllare il modo in cui i social media visualizzano i propri contenuti. È stato originariamente sviluppato da Facebook ma da allora molte altre piattaforme hanno adottato il protocollo. Questi includono Twitter, LinkedIn e Pinterest.

Open Graph ti consente di specificare esattamente come altri siti dovrebbero visualizzare i tuoi contenuti, assicurandoti che abbiano un bell'aspetto e siano facili da leggere. Consente inoltre un maggiore controllo sul modo in cui vengono visualizzati i collegamenti. Ciò semplifica il monitoraggio dei clic e di altri parametri di coinvolgimento.

Perché utilizzare il protocollo Open Graph?

Ci sono tre aree principali che Open Graph dovrebbe migliorare: coinvolgimento sui social media, SEO e traffico sul sito web.

1. Migliora il coinvolgimento sui social media

Open Graph può aiutare a migliorare il coinvolgimento sui social media rendendo più semplice per gli utenti condividere i tuoi contenuti. Specificando il modo in cui i siti devono visualizzare i tuoi contenuti, puoi renderli visivamente più accattivanti e facili da leggere. Ciò, a sua volta, può portare a più condivisioni e Mi piace, nonché a un aumento della percentuale di clic.

2. Migliora la SEO

Open Graph può anche aiutarti a migliorare il tuo SEO. Specificando il titolo, la descrizione e l'immagine per ciascun contenuto, puoi controllare il modo in cui appare nei risultati di ricerca. Ciò può aiutarti ad aumentare la percentuale di clic sul tuo sito web, nonché a migliorare il tuo posizionamento generale.

3. Aumenta il traffico del sito web

Infine, Open Graph può aiutare ad aumentare il traffico del sito web. Semplificando la condivisione dei tuoi contenuti da parte degli utenti, puoi aumentare il numero di persone che li vedono. Ciò, a sua volta, può portare a più visitatori del sito Web e ad un aumento del traffico.

4. Migliora l'esperienza dell'utente

Un altro vantaggio dell'utilizzo del protocollo Open Graph è che può migliorare l'esperienza dell'utente sul tuo sito web. Includendo i metadati, puoi favorire l'accessibilità e riutilizzare i dati, garantendo che gli utenti visualizzino le informazioni più pertinenti. Ciò può portare a una migliore esperienza complessiva sul tuo sito, che può portare a più visitatori di ritorno.

Perché utilizzare Next.js?

Ci sono due ragioni principali per utilizzare Next.js: migliorare le prestazioni e semplificare lo sviluppo.

1. Migliora le prestazioni

Next.js può contribuire a migliorare le prestazioni suddividendo il codice dell'app e precaricando le risorse. Ciò può portare a tempi di caricamento più rapidi e a un carico ridotto del server.

2. Semplifica lo sviluppo

Next.js può anche semplificare lo sviluppo fornendo un modo semplice per creare app React renderizzate sul server. Ciò può rendere più semplice e veloce lo sviluppo e la distribuzione delle app React.

Come implementare il protocollo Open Graph in Next.js

Esistono due modi per implementare il protocollo Open Graph in Next.js: utilizzando il pacchetto next-seo o creando un file _document.js personalizzato.

Metodo 1: utilizzare il pacchetto next-seo

Il modo più semplice per implementare il protocollo Open Graph in Next.js è utilizzare il pacchetto next-seo. Questo pacchetto genererà automaticamente i tag necessari per te.

Per installare il pacchetto next-seo, esegui il comando seguente:

npm install next-seo --save

Dopo aver installato il pacchetto, puoi utilizzarlo aggiungendo il seguente codice al tuo file index.js:

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;

Questo codice importa il componente NextSeo dal pacchetto next-seo e lo utilizza per specificare il titolo, la descrizione e l'immagine per la pagina. Specifica inoltre il nome del sito e l'handle di Twitter.

Eseguire il comando seguente per avviare il server di sviluppo:

npm run dev

Apri http://localhost:3000 nel tuo browser per vedere la pagina demo.

Metodo 2: utilizzo del file _document.js personalizzato

Un altro modo per implementare il protocollo Open Graph in Next.js è creare un file _document.js personalizzato. Questo file ti consentirà di specificare tu stesso i tag Open Graph e di creare codice riutilizzabile per tutte le pagine.

Per impostare un file _document.js personalizzato, crea un nuovo file nella directory pages con i seguenti contenuti:

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
 
  render() {
    return (
      <Html>
        <Head>
          <meta property="og:url" content="https://www.example.com" />
          <meta property="og:title" content="Open Graph Title" />
          <meta property="og:description" content="Open Graph Description" />
          <meta property="og:image" content="https://www.example.com/og-image.jpg" />
          <meta property="og:site_name" content="YourSiteName" />
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:site" content="@site" />
          <meta name="twitter:creator" content="@handle" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Aggiungi il contenuto seguente al tuo file index.js:

const DemoPage = () => (
  <>
    <p>Demo Page</p>
  </>
);
 
export default DemoPage;

Questo codice importa il componente Documento da next/document e crea un componente MyDocument personalizzato. Specifica il titolo, la descrizione e l'immagine della nostra pagina, nonché il nome del sito e l'handle di Twitter.

Eseguire il comando seguente per avviare il server di sviluppo:

npm run dev

Apri http://localhost:3000 nel tuo browser per vedere la pagina demo.

Migliora il posizionamento del sito web con i tag OG

L'aggiunta di tag Open Graph al tuo sito web può darti un maggiore controllo su come appare nei post dei social media e può aiutarti a migliorare le percentuali di clic. Puoi anche migliorare il modo in cui il tuo sito web appare nelle SERP, il che alla fine può portare a un migliore posizionamento del sito web.

Esistono anche molti altri modi per migliorare il posizionamento del sito. Dovresti ottimizzare il tuo sito web per i dispositivi mobili e utilizzare titoli e descrizioni ricchi di parole chiave. Ma usare i tag Open Graph è un modo semplice e veloce per iniziare.