Искали ли сте някога вашият сайт Next.js да се показва като богат обект, когато се споделя в социалните медии? Ако е така, тогава трябва да внедрите протокола Open Graph.

Пакетът next-seo улеснява добавянето на етикети Open Graph към вашия сайт Next.js. Можете също да използвате по-ръчен подход за по-фин контрол върху крайния резултат.

И накрая, ще искате да обмислите точно каква информация да включите във вашите тагове.

Какво е Open Graph?

Протоколът Open Graph е отворен стандарт, който позволява на разработчиците да контролират как социалните медии показват тяхното съдържание. Първоначално е разработен от Facebook, но оттогава много други платформи са приели протокола. Те включват Twitter, LinkedIn и Pinterest.

Open Graph ви позволява да посочите точно как други сайтове трябва да показват вашето съдържание, като гарантира, че то изглежда добре и е лесно за четене. Той също така позволява по-голям контрол върху това как се изобразяват връзките. Това улеснява проследяването на кликванията и други показатели за ангажираност.

instagram viewer

Защо да използвате Open Graph Protocol?

Има три основни области, които Open Graph трябва да подобри: ангажираност в социалните медии, SEO и трафик на уебсайта.

Open Graph може да помогне за подобряване на ангажираността в социалните медии, като улесни потребителите да споделят вашето съдържание. Като посочите как сайтовете трябва да показват вашето съдържание, можете да го направите по-привлекателно и лесно за четене. Това от своя страна може да доведе до повече споделяния и харесвания, както и до повишени честоти на кликване.

2. Подобрете SEO

Open Graph също може да помогне подобрете вашето SEO. Като посочите заглавието, описанието и изображението за всяка част от съдържанието, можете да контролирате как се показва в резултатите от търсенето. Това може да помогне за увеличаване на честотата на кликване към вашия уебсайт, както и да подобри цялостното ви класиране.

3. Увеличете трафика на уебсайта

И накрая, Open Graph може да помогне за увеличаване на трафика на уебсайта. Като улеснявате потребителите да споделят вашето съдържание, можете да увеличите броя на хората, които го виждат. Това от своя страна може да доведе до повече посетители на уебсайта и увеличен трафик.

4. Подобрете потребителското изживяване

Друго предимство от използването на протокола Open Graph е, че той може да подобри потребителското изживяване на вашия уебсайт. Като включите метаданни, можете да подпомогнете достъпността и да използвате повторно данните, като гарантирате, че потребителите виждат най-подходящата информация. Това може да доведе до по-добро цялостно изживяване на вашия сайт, което може да доведе до повече завърнали се посетители.

Защо да използвате Next.js?

Има две основни причини да използвате Next.js: да подобрите производителността и да улесните разработката.

1. Подобряване на производителността

Next.js може да помогне за подобряване на производителността чрез разделяне на кода на вашето приложение и предварително извличане на ресурси. Това може да доведе до по-бързо време за зареждане и намалено натоварване на сървъра.

2. Направете развитието по-лесно

Next.js може също да улесни разработката, като предостави лесен начин за създаване на рендирани от сървър React приложения. Това може да направи по-бързо и по-лесно разработването и внедряването на React приложения.

Как да внедрим протокола Open Graph в Next.js

Има два начина за прилагане на Open Graph Protocol в Next.js: използване на пакета next-seo или създаване на персонализиран _document.js файл.

Метод 1: Използване на пакета next-seo

Най-лесният начин да внедрите Open Graph Protocol в Next.js е да използвате пакета next-seo. Този пакет автоматично ще генерира необходимите тагове за вас.

За да инсталирате пакета next-seo, изпълнете следната команда:

npm Инсталирайследващия-seo --спести

След като инсталирате пакета, можете да го използвате, като добавите следния код към вашия index.js файл:

импортиране { NextSeo } от 'следващ-seo';
конст Демостраница = () => (
<>
<NextSeo
 заглавие="Твоето заглавие"
 описание="Това е демо описание"
 каноничен="https://www.example.com"
 openGraph={{
 URL адрес: 'https://www.example.com',
 заглавие: 'Отворете заглавието на графиката',
 описание: 'Отворете описанието на графиката',
 изображения: [
 {
 URL адрес: 'https://www.example.com/og-image01.jpg',
 ширина: 800,
 височина: 600,
 алт: 'Og Alt на изображението',
 Тип: 'изображение/jpeg',
 },
 {
 URL адрес: 'https://www.example.com/og-image02.jpg',
 ширина: 900,
 височина: 800,
 алт: 'Og Изображение Alt Второ',
 Тип: 'изображение/jpeg',
 },
 { URL адрес: 'https://www.example.com/og-image03.jpg' },
 { URL адрес: 'https://www.example.com/og-image04.jpg' },
 ],
 име_на_сайт: 'Името на вашия сайт',
 }}
 twitter={{
 дръжка: '@дръжка',
 сайт: '@сайт',
 вид на карта: 'резюме_голямо_изображение',
 }}
 />
<стр>Демо страница</стр>
</>
);
износпо подразбиране Демостраница;

Този код импортира компонента NextSeo от пакета next-seo и го използва, за да посочи заглавието, описанието и изображението за страницата. Той също така определя името на сайта и Twitter манипулатора.

Изпълнете следната команда, за да стартирате сървъра за разработка:

npm стартиране dev

Отворете http://localhost: 3000 във вашия браузър, за да видите демонстрационната страница.

Метод 2: Използване на персонализирания файл _document.js

Друг начин за прилагане на Open Graph Protocol в Next.js е да създадете персонализиран _document.js файл. Този файл ще ви позволи сами да посочите таговете Open Graph и създайте код за многократна употреба за всички страници.

За да настроите персонализиран _document.js файл, създайте нов файл във вашия страници директория със следното съдържание:

импортиране Документ, { Html, Head, Main, NextScript } от 'следващия/документ';
класMyDocumentсе простираДокумент{
статиченасинхронен getInitialProps (ctx) {
конст initialProps = изчакайте Document.getInitialProps (ctx);
връщане { ...initialProps };
 }


рендер() {
връщане (
<Html>
<Глава>
<мета свойство="og: url" съдържание="https://www.example.com" />
<мета свойство="og: заглавие" съдържание="Отворете заглавието на графиката" />
<мета свойство="og: описание" съдържание="Отворете описанието на графиката" />
<мета свойство="og: изображение" съдържание="https://www.example.com/og-image.jpg" />
<мета свойство="og: име_на_сайт" съдържание="Името на вашия сайт" />
<мета име="twitter: карта" съдържание="резюме_голямо_изображение" />
<мета име="twitter: сайт" съдържание="@сайт" />
<мета име="twitter: създател" съдържание="@дръжка" />
</Head>
<тяло>
<Основен />
<NextScript />
</body>
</Html>
 );
 }
}
износпо подразбиране MyDocument;

Добавете съдържанието по-долу към вашия файл index.js:

конст Демостраница = () => (
<>
<стр>Демо страница</стр>
</>
);
износпо подразбиране Демостраница;

Този код импортира компонента Document от next/document и създава персонализиран MyDocument компонент. Той определя заглавието, описанието и изображението за нашата страница, както и името на сайта и Twitter манипулатора.

Изпълнете следната команда, за да стартирате сървъра за разработка:

npm стартиране dev

Отворете http://localhost: 3000 във вашия браузър, за да видите демонстрационната страница.

Добавянето на етикети Open Graph към вашия уебсайт може да ви даде повече контрол върху начина, по който той се показва в публикациите в социалните медии и може да помогне за подобряване на честотата на кликване. Можете също така да подобрите начина, по който уебсайтът ви се показва в SERP, което в крайна сметка може да доведе до подобрено класиране на уебсайта.

Има и много други начини за подобряване на класирането на сайта. Трябва да оптимизирате уебсайта си за мобилни устройства и да използвате богати на ключови думи заглавия и описания. Но използването на тагове Open Graph е бърз и лесен начин да започнете.