Chtěli jste někdy, aby se váš web Next.js ukázal jako bohatý objekt při sdílení na sociálních sítích? Pokud ano, musíte implementovat protokol Open Graph.

Balíček next-seo usnadňuje přidávání značek Open Graph na váš web Next.js. Můžete také použít manuálnější přístup pro jemnější kontrolu nad konečným výsledkem.

Nakonec budete chtít přesně zvážit, jaké informace do značek zahrnout.

Co je otevřený graf?

Protokol Open Graph je otevřený standard, který umožňuje vývojářům řídit, jak sociální média zobrazují svůj obsah. Původně byl vyvinut společností Facebook, ale od té doby jej přijalo mnoho dalších platforem. Patří mezi ně Twitter, LinkedIn a Pinterest.

Open Graph vám umožňuje přesně určit, jak by ostatní weby měly zobrazovat váš obsah, a zajistit, aby vypadal dobře a byl snadno čitelný. Umožňuje také větší kontrolu nad vykreslováním odkazů. To usnadňuje sledování prokliků a dalších metrik zapojení.

Proč používat protokol Open Graph?

Open Graph by měl zlepšit tři hlavní oblasti: zapojení na sociálních sítích, SEO a návštěvnost webu.

instagram viewer

Open Graph může pomoci zlepšit zapojení sociálních médií tím, že uživatelům usnadní sdílení vašeho obsahu. Zadáním toho, jak by stránky měly zobrazovat váš obsah, jej můžete učinit vizuálně atraktivnějším a snadněji čitelným. To zase může vést k většímu sdílení a lajkům a také ke zvýšení míry prokliku.

2. Vylepšete SEO

Pomoci může i Open Graph zlepšit své SEO. Zadáním názvu, popisu a obrázku pro každou část obsahu můžete ovládat, jak se zobrazí ve výsledcích vyhledávání. To může pomoci zvýšit míru prokliku na váš web a také zlepšit vaše celkové hodnocení.

3. Zvyšte návštěvnost webových stránek

A konečně, Open Graph může pomoci zvýšit návštěvnost webu. Tím, že uživatelům usnadníte sdílení vašeho obsahu, můžete zvýšit počet lidí, kteří jej uvidí. To zase může vést k většímu počtu návštěvníků webu a zvýšení návštěvnosti.

4. Zlepšení uživatelské zkušenosti

Další výhodou použití protokolu Open Graph je to, že může zlepšit uživatelskou zkušenost na vašem webu. Zahrnutím metadat můžete usnadnit přístupnost a opětovné použití dat a zajistit, aby uživatelé viděli ty nejrelevantnější informace. To může vést k lepšímu celkovému dojmu z vašeho webu, což může vést k většímu počtu vracejících se návštěvníků.

Proč používat Next.js?

Existují dva hlavní důvody, proč používat Next.js: zlepšit výkon a usnadnit vývoj.

1. Zlepšení výkonu

Next.js může pomoci zlepšit výkon rozdělením kódu aplikace a předběžným načítáním zdrojů. To může vést k rychlejšímu načítání a snížení zatížení serveru.

2. Usnadněte si vývoj

Next.js může také usnadnit vývoj tím, že poskytuje jednoduchý způsob vytvářet aplikace React vykreslené na serveru. Díky tomu může být vývoj a nasazení aplikací React rychlejší a snazší.

Jak implementovat protokol Open Graph v Next.js

Existují dva způsoby, jak implementovat Open Graph Protocol v Next.js: pomocí balíčku next-seo nebo vytvoření vlastního _document.js soubor.

Metoda 1: Použití balíčku next-seo

Nejjednodušší způsob, jak implementovat Open Graph Protocol do Next.js, je použít balíček next-seo. Tento balíček vám automaticky vygeneruje potřebné značky.

Chcete-li nainstalovat balíček next-seo, spusťte následující příkaz:

npm Nainstalujtedalší- SEO --Uložit

Po instalaci balíčku jej můžete použít přidáním následujícího kódu do svého index.js soubor:

import { NextSeo } z 'next-seo';
konst DemoPage = () => (
<>
<DalšíSeo
 titul="Tvůj titul"
 popis ="Toto je demo popis"
 kanonický="https://www.example.com"
 openGraph={{
 url: 'https://www.example.com',
 titul: 'Otevřete název grafu',
 popis: 'Otevřete popis grafu',
 snímky: [
 {
 url: 'https://www.example.com/og-image01.jpg',
 šířka: 800,
 výška: 600,
 alt: 'Og Obrázek Alt',
 typ: 'obrázek/jpeg',
 },
 {
 url: 'https://www.example.com/og-image02.jpg',
 šířka: 900,
 výška: 800,
 alt: 'Og Obrázek Alt Druhý',
 typ: 'obrázek/jpeg',
 },
 { url: 'https://www.example.com/og-image03.jpg' },
 { url: 'https://www.example.com/og-image04.jpg' },
 ],
 jméno stránky: 'YourSiteName',
 }}
 twitter={{
 Rukojeť: '@Rukojeť',
 místo: '@stránka',
 Typ karty: 'souhrnný_velký_obrázek',
 }}
 />
<p>Ukázková stránka</str>
</>
);
vývoznívýchozí DemoPage;

Tento kód importuje komponentu NextSeo z balíčku next-seo a používá ji k určení názvu, popisu a obrázku stránky. Také určuje název webu a popisovač Twitteru.

Spusťte následující příkaz pro spuštění vývojového serveru:

npm spustit dev

OTEVŘENO http://localhost: 3000 ve vašem prohlížeči, abyste viděli ukázkovou stránku.

Metoda 2: Použití vlastního souboru _document.js

Dalším způsobem, jak implementovat Open Graph Protocol v Next.js, je vytvořit vlastní _document.js soubor. Tento soubor vám umožní určit značky Open Graph sami a vytvořit znovu použitelný kód pro všechny stránky.

Chcete-li nastavit vlastní _document.js soubor, vytvořte nový soubor ve vašem stránky adresář s následujícím obsahem:

import Dokument, { Html, Head, Main, NextScript } z 'další/dokument';
třídaMůj dokumentrozšiřujeDokument{
statickýasynchronní getInitialProps (ctx) {
konst initialProps = čekat Document.getInitialProps (ctx);
vrátit se { ...initialProps };
 }


poskytnout() {
vrátit se (
<Html>
<Hlava>
<meta vlastnost ="og: url" obsah ="https://www.example.com" />
<meta vlastnost ="og: titul" obsah ="Otevřete název grafu" />
<meta vlastnost ="og: popis" obsah ="Otevřete popis grafu" />
<meta vlastnost ="og: obrázek" obsah ="https://www.example.com/og-image.jpg" />
<meta vlastnost ="og: název_stránky" obsah ="YourSiteName" />
<meta jméno="twitter: karta" obsah ="souhrnný_velký_obrázek" />
<meta jméno="twitter: stránky" obsah ="@stránka" />
<meta jméno="twitter: tvůrce" obsah ="@Rukojeť" />
</Head>
<tělo>
<Hlavní />
<NextScript />
</body>
</Html>
 );
 }
}
vývoznívýchozí MůjDokument;

Přidejte níže uvedený obsah do svého souboru index.js:

konst DemoPage = () => (
<>
<p>Ukázková stránka</str>
</>
);
vývoznívýchozí DemoPage;

Tento kód importuje komponentu Document z next/document a vytvoří vlastní Můj dokument komponent. Určuje název, popis a obrázek naší stránky, stejně jako název webu a popisovač Twitteru.

Spusťte následující příkaz pro spuštění vývojového serveru:

npm spustit dev

OTEVŘENO http://localhost: 3000 ve vašem prohlížeči, abyste viděli ukázkovou stránku.

Přidání značek Open Graph na váš web vám může poskytnout větší kontrolu nad tím, jak se zobrazí v příspěvcích na sociálních sítích, a může pomoci zlepšit míru prokliku. Můžete také zlepšit způsob, jakým se vaše webové stránky zobrazují v SERP, což může v konečném důsledku vést ke zlepšení hodnocení webových stránek.

Existuje také mnoho dalších způsobů, jak zlepšit hodnocení stránek. Měli byste optimalizovat svůj web pro mobilní zařízení a používat názvy a popisy bohaté na klíčová slova. Ale používání značek Open Graph je rychlý a snadný způsob, jak začít.