Czy kiedykolwiek chciałeś, aby Twoja witryna Next.js wyświetlała się jako bogaty obiekt podczas udostępniania w mediach społecznościowych? Jeśli tak, to musisz zaimplementować protokół Open Graph.

Pakiet next-seo ułatwia dodawanie tagów Open Graph do witryny Next.js. Możesz również użyć bardziej ręcznego podejścia, aby uzyskać dokładniejszą kontrolę nad końcowym wynikiem.

Na koniec warto zastanowić się, jakie informacje należy umieścić w tagach.

Co to jest otwarty wykres?

Protokół Open Graph to otwarty standard, który pozwala programistom kontrolować sposób, w jaki media społecznościowe wyświetlają swoje treści. Został pierwotnie opracowany przez Facebooka, ale od tego czasu wiele innych platform przyjęło ten protokół. Należą do nich Twitter, LinkedIn i Pinterest.

Open Graph pozwala dokładnie określić, w jaki sposób inne witryny powinny wyświetlać Twoje treści, zapewniając, że wyglądają dobrze i są łatwe do odczytania. Pozwala także na większą kontrolę nad sposobem renderowania linków. Ułatwia to śledzenie kliknięć i innych wskaźników zaangażowania.

instagram viewer

Dlaczego warto korzystać z protokołu Open Graph?

Istnieją trzy główne obszary, które Open Graph powinien poprawić: zaangażowanie w mediach społecznościowych, SEO i ruch w witrynie.

Open Graph może pomóc zwiększyć zaangażowanie w mediach społecznościowych, ułatwiając użytkownikom udostępnianie Twoich treści. Określając, w jaki sposób witryny powinny wyświetlać Twoje treści, możesz sprawić, że będą one bardziej atrakcyjne wizualnie i łatwiejsze do odczytania. To z kolei może prowadzić do większej liczby udostępnień i polubień, a także zwiększenia współczynników klikalności.

2. Popraw SEO

Open Graph też może pomóc popraw swoje SEO. Określając tytuł, opis i obraz dla każdego elementu treści, możesz kontrolować sposób jego wyświetlania w wynikach wyszukiwania. Może to pomóc w zwiększeniu współczynnika klikalności w Twojej witrynie, a także w poprawie ogólnego rankingu.

3. Zwiększ ruch w witrynie

Wreszcie, Open Graph może pomóc w zwiększeniu ruchu w witrynie. Ułatwiając użytkownikom udostępnianie treści, możesz zwiększyć liczbę osób, które je oglądają. To z kolei może prowadzić do większej liczby odwiedzających witrynę i zwiększonego ruchu.

4. Popraw doświadczenie użytkownika

Kolejną zaletą korzystania z protokołu Open Graph jest to, że może on poprawić wrażenia użytkownika w Twojej witrynie. Dołączając metadane, możesz zwiększyć dostępność i ponownie wykorzystać dane, zapewniając użytkownikom dostęp do najistotniejszych informacji. Może to poprawić ogólne wrażenia w Twojej witrynie, co może prowadzić do większej liczby powracających użytkowników.

Dlaczego warto korzystać z Next.js?

Istnieją dwa główne powody używania Next.js: aby poprawić wydajność i ułatwić programowanie.

1. Ulepszyć wydajność

Next.js może pomóc poprawić wydajność, dzieląc kod aplikacji i wstępnie pobierając zasoby. Może to prowadzić do skrócenia czasu ładowania i zmniejszenia obciążenia serwera.

2. Ułatw rozwój

Next.js może również ułatwić programowanie, zapewniając prosty sposób na: tworzyć serwerowe aplikacje React. Dzięki temu tworzenie i wdrażanie aplikacji React może być szybsze i łatwiejsze.

Jak zaimplementować protokół Open Graph w Next.js

Istnieją dwa sposoby na zaimplementowanie protokołu Open Graph w Next.js: użycie pakietu next-seo lub utworzenie niestandardowego _dokument.js plik.

Metoda 1: Korzystanie z pakietu Next-Seo

Najłatwiejszym sposobem na zaimplementowanie protokołu Open Graph w Next.js jest użycie pakietu next-seo. Ten pakiet automatycznie wygeneruje dla Ciebie niezbędne tagi.

Aby zainstalować następny pakiet seo, uruchom następujące polecenie:

npm zainstalowaćnastępny-Seo --ratować

Po zainstalowaniu pakietu możesz go używać, dodając następujący kod do swojego index.js plik:

import { NextSeo } z „następny SEO”;
stały Strona demonstracyjna = () => (
<>
<NastępnySeo
 tytuł="Twój tytuł"
 opis="To jest opis demonstracyjny"
 kanoniczny="https://www.example.com"
 openGraph={{
 adres URL: 'https://www.example.com',
 tytuł: 'Otwórz tytuł wykresu',
 opis: 'Otwórz opis wykresu',
 obrazy: [
 {
 adres URL: 'https://www.example.com/og-image01.jpg',
 szerokość: 800,
 wysokość: 600,
 alt: 'Og Obraz Alt',
 rodzaj: 'obraz/jpeg',
 },
 {
 adres URL: 'https://www.example.com/og-image02.jpg',
 szerokość: 900,
 wzrost: 800,
 alt: 'Og Obraz Alt Sekunda',
 rodzaj: 'obraz/jpeg',
 },
 { adres URL: 'https://www.example.com/og-image03.jpg' },
 { adres URL: 'https://www.example.com/og-image04.jpg' },
 ],
 Nazwa strony: 'TwojaNazwaWitryny',
 }}
 twitter={{
 uchwyt: '@uchwyt',
 strona: '@strona',
 typ karty: 'podsumowanie_dużego_obrazu',
 }}
 />
<p>Strona demonstracyjna</p>
</>
);
eksportdomyślna Strona demonstracyjna;

Ten kod importuje składnik NextSeo z pakietu next-seo i używa go do określenia tytułu, opisu i obrazu strony. Określa również nazwę witryny i uchwyt Twittera.

Uruchom następujące polecenie, aby uruchomić serwer deweloperski:

npm uruchom dev

otwarty http://localhost: 3000 w przeglądarce, aby zobaczyć stronę demonstracyjną.

Metoda 2: Użycie niestandardowego pliku _document.js

Innym sposobem na zaimplementowanie protokołu Open Graph w Next.js jest utworzenie niestandardowego _dokument.js plik. Ten plik pozwoli Ci samodzielnie określić tagi Open Graph i utwórz kod wielokrotnego użytku dla wszystkich stron.

Aby skonfigurować niestandardowe _dokument.js plik, utwórz nowy plik w swoim strony katalog o następującej zawartości:

import Dokument, { Html, Head, Main, NextScript } z 'następny/dokument';
klasaMój dokumentrozciąga sięDokument{
statycznyasynchroniczny pobierzWzorcePoczątkowe (ctx) {
stały początkoweProps = czekać na Document.getInitialProps (ctx);
zwrócić { ...wstępne rekwizyty };
 }


renderowanie() {
zwrócić (
<HTML>
<Głowa>
<meta właściwość="og: url" zawartość="https://www.example.com" />
<meta właściwość="og: tytuł" zawartość="Otwórz tytuł wykresu" />
<meta właściwość="og: opis" zawartość="Otwórz opis wykresu" />
<meta właściwość="og: obraz" zawartość="https://www.example.com/og-image.jpg" />
<meta właściwość="og: nazwa_witryny" zawartość="TwojaNazwaWitryny" />
<nazwa meta="Twitter: karta" zawartość="podsumowanie_dużego_obrazu" />
<nazwa meta="Twitter: strona" zawartość="@strona" />
<nazwa meta="twitter: twórca" zawartość="@uchwyt" />
</Head>
<ciało>
<Główny />
<NastępnySkrypt />
</body>
</Html>
 );
 }
}
eksportdomyślna Mój dokument;

Dodaj poniższą treść do pliku index.js:

stały Strona demonstracyjna = () => (
<>
<p>Strona demonstracyjna</p>
</>
);
eksportdomyślna Strona demonstracyjna;

Ten kod importuje komponent Dokument z następnego/dokumentu i tworzy niestandardowy Mój dokument składnik. Określa tytuł, opis i obraz naszej strony, a także nazwę witryny i uchwyt na Twitterze.

Uruchom następujące polecenie, aby uruchomić serwer deweloperski:

npm uruchom dev

otwarty http://localhost: 3000 w przeglądarce, aby zobaczyć stronę demonstracyjną.

Dodanie tagów Open Graph do swojej witryny daje większą kontrolę nad tym, jak wygląda ona w postach w mediach społecznościowych i może poprawić współczynniki klikalności. Możesz także poprawić sposób, w jaki Twoja witryna pojawia się w SERPach, co ostatecznie może prowadzić do poprawy rankingu witryny.

Istnieje również wiele innych sposobów na poprawienie rankingu witryny. Powinieneś zoptymalizować swoją witrynę pod kątem urządzeń mobilnych i używać tytułów i opisów bogatych w słowa kluczowe. Jednak korzystanie z tagów Open Graph to szybki i łatwy sposób na rozpoczęcie pracy.