Как реализовать протокол Open Graph в Next.js
Open Graph — это легкая победа в SEO, и, к счастью, вы можете добавить его на свой сайт Next.js с помощью любого из этих двух простых методов.
Вы когда-нибудь хотели, чтобы ваш сайт Next.js отображался как полнофункциональный объект при публикации в социальных сетях? Если да, то вам необходимо реализовать протокол Open Graph.
Пакет next-seo позволяет легко добавлять теги Open Graph на ваш сайт Next.js. Вы также можете использовать более ручной подход для более точного контроля над готовым результатом.
Наконец, вам нужно подумать, какую именно информацию включать в ваши теги.
Что такое открытый граф?
Протокол Open Graph — это открытый стандарт, который позволяет разработчикам контролировать, как социальные сети отображают их контент. Первоначально он был разработан Facebook, но с тех пор этот протокол приняли многие другие платформы. К ним относятся Twitter, LinkedIn и Pinterest.
Open Graph позволяет вам точно указать, как другие сайты должны отображать ваш контент, гарантируя, что он будет хорошо выглядеть и легко читаться. Это также позволяет лучше контролировать отображение ссылок. Это упрощает отслеживание кликов и других показателей взаимодействия.
Зачем использовать протокол Open Graph?
Open Graph следует улучшить в трех основных областях: вовлечение в социальные сети, SEO и посещаемость веб-сайта.
1. Улучшите взаимодействие в социальных сетях
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 в Next.js: использовать пакет next-seo или создать собственный файл _document.js.
Способ 1: использование пакета next-seo
Самый простой способ реализовать протокол Open Graph в Next.js — использовать пакет next-seo. Этот пакет автоматически сгенерирует для вас необходимые теги.
Чтобы установить пакет next-seo, выполните следующую команду:
npm install next-seo --saveПосле установки пакета вы можете использовать его, добавив следующий код в файл 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;
Этот код импортирует компонент NextSeo из пакета next-seo и использует его для указания заголовка, описания и изображения страницы. Он также указывает имя сайта и дескриптор Twitter.
Выполните следующую команду, чтобы запустить сервер разработки:
npm run devОткройте http://localhost:3000 в своем браузере, чтобы увидеть демонстрационную страницу.
Способ 2: использование пользовательского файла _document.js
Другой способ реализовать протокол Open Graph в Next.js — создать собственный файл _document.js. Этот файл позволит вам самостоятельно указать теги Open Graph и создать повторно используемый код для всех страниц.
Чтобы настроить собственный файл _document.js, создайте новый файл в каталоге pages со следующим содержимым:
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;
Добавьте приведенное ниже содержимое в файл index.js:
const DemoPage = () => (
<>
<p>Demo Page</p>
</>
);
export default DemoPage;Этот код импортирует компонент Document из next/document и создает пользовательский компонент MyDocument. Он определяет заголовок, описание и изображение нашей страницы, а также имя сайта и дескриптор Twitter.
Выполните следующую команду, чтобы запустить сервер разработки:
npm run devОткройте http://localhost:3000 в своем браузере, чтобы увидеть демонстрационную страницу.
Улучшите рейтинг веб-сайта с помощью тегов OG
Добавление тегов Open Graph на ваш веб-сайт может дать вам больше контроля над тем, как он будет отображаться в сообщениях в социальных сетях, и поможет повысить рейтинг кликов. Вы также можете улучшить внешний вид вашего веб-сайта в результатах поиска, что в конечном итоге может привести к улучшению рейтинга веб-сайта.
Есть также много других способов улучшить рейтинг сайта. Вам следует оптимизировать свой веб-сайт для мобильных устройств и использовать заголовки и описания, насыщенные ключевыми словами. Но использование тегов Open Graph — это быстрый и простой способ начать работу.