Hai mai desiderato che il tuo sito Next.js venisse visualizzato come un oggetto ricco quando condiviso sui social media? In tal caso, è necessario 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, vorrai considerare esattamente quali informazioni includere nei tuoi tag.

Che 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 gli altri siti dovrebbero visualizzare i tuoi contenuti, assicurandoti che appaia bene e sia facile da leggere. Consente inoltre un maggiore controllo su come vengono visualizzati i collegamenti. Ciò semplifica il monitoraggio dei click-through e di altre metriche di coinvolgimento.

instagram viewer

Perché utilizzare il protocollo Open Graph?

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

Open Graph può aiutare a migliorare il coinvolgimento dei social media rendendo più facile per gli utenti condividere i tuoi contenuti. Specificando come i siti devono visualizzare i tuoi contenuti, puoi renderli visivamente più accattivanti e di facile lettura. Questo, a sua volta, può portare a più condivisioni e Mi piace, oltre a un aumento delle percentuali di clic.

2. Migliora la SEO

Anche Open Graph può aiutare migliora la tua SEO. Specificando il titolo, la descrizione e l'immagine di ogni contenuto, puoi controllare come appare nei risultati di ricerca. Questo può aiutare ad aumentare la percentuale di clic sul tuo sito web, oltre a migliorare la tua classifica 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. Questo, a sua volta, può portare a più visitatori del sito web e ad un aumento del traffico.

4. Migliora l'esperienza utente

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

Perché usare Next.js?

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

1. Migliorare la prestazione

Next.js può aiutare a migliorare le prestazioni suddividendo il codice dell'app e precaricando le risorse. Ciò può comportare un tempo di caricamento più rapido e una riduzione del carico del server.

2. Semplifica lo sviluppo

Next.js può anche semplificare lo sviluppo fornendo un modo semplice per creare app React con rendering del server. Ciò può rendere più semplice e veloce lo sviluppo e la distribuzione di app React.

Come implementare il protocollo Open Graph in Next.js

Ci sono due modi per implementare Open Graph Protocol in Next.js: usando il pacchetto next-seo o creando un custom _document.js file.

Metodo 1: utilizzo del pacchetto next-seo

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

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

npm installareprossimo-seo --Salva

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

importare { NextSeo } da 'next-seo';
cost DemoPage = () => (
<>
<SuccessivoSeo
 titolo="Il tuo titolo"
 descrizione="Questa è una descrizione demo"
 canonico="https://www.example.com"
 openGraph={{
 URL: 'https://www.example.com',
 titolo: 'Apri il titolo del grafico',
 descrizione: 'Aprire la descrizione del grafico',
 immagini: [
 {
 URL: 'https://www.example.com/og-image01.jpg',
 larghezza: 800,
 altezza: 600,
 alt: 'Og Immagine Alt',
 genere: 'immagine/jpeg',
 },
 {
 URL: 'https://www.example.com/og-image02.jpg',
 larghezza: 900,
 altezza: 800,
 alt: 'Og Immagine Alt Secondo',
 genere: 'immagine/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 nome del sito: 'Il tuo nomesito',
 }}
 twitter={{
 maneggiare: '@maneggiare',
 luogo: '@luogo',
 tipo di carta: 'sommario_immagine_grande',
 }}
 />
<p>Pagina demo</p>
</>
);
esportarepredefinito Pagina Demo;

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

Eseguire il comando seguente per avviare il server di sviluppo:

npm esegui dev

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

Metodo 2: utilizzo del file _document.js personalizzato

Un altro modo per implementare Open Graph Protocol in Next.js consiste nel creare un custom _document.js file. Questo file ti consentirà di specificare tu stesso i tag Open Graph e creare codice riutilizzabile per tutte le pagine.

Per impostare una personalizzazione _document.js file, crea un nuovo file nel tuo pagine directory con i seguenti contenuti:

importare Documento, { Html, Head, Main, NextScript } da 'prossimo/documento';
classeIl mio documentosi estendeDocumento{
staticoasincrono getInitialProps (ctx) {
cost puntelli iniziali = aspettare Document.getInitialProps (ctx);
Restituzione {... puntelli iniziali };
 }


render() {
Restituzione (
<HTML>
<Testa>
<metaproprietà="og: URL" contenuto="https://www.example.com" />
<metaproprietà="og: titolo" contenuto="Apri il titolo del grafico" />
<metaproprietà="og: descrizione" contenuto="Aprire la descrizione del grafico" />
<metaproprietà="og: immagine" contenuto="https://www.example.com/og-image.jpg" />
<metaproprietà="og: nome_sito" contenuto="Il tuo nomesito" />
<metanome="twitter: card" contenuto="sommario_immagine_grande" />
<metanome="twitter: sito" contenuto="@luogo" />
<metanome="twitter: creatore" contenuto="@maneggiare" />
</Head>
<corpo>
<Principale />
<NextScript />
</body>
</Html>
 );
 }
}
esportarepredefinito Il mio documento;

Aggiungi il contenuto seguente al tuo file index.js:

cost DemoPage = () => (
<>
<p>Pagina demo</p>
</>
);
esportarepredefinito Pagina Demo;

Questo codice importa il componente Document da next/document e crea un custom Il mio documento componente. 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 esegui dev

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

L'aggiunta di tag Open Graph al tuo sito web può darti un maggiore controllo su come appare nei post sui 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.

Ci sono 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 l'uso dei tag Open Graph è un modo semplice e veloce per iniziare.