Вы когда-нибудь хотели, чтобы ваш сайт Next.js отображался как богатый объект при публикации в социальных сетях? Если да, то вам необходимо реализовать протокол Open Graph.
Пакет next-seo упрощает добавление тегов Open Graph на ваш сайт Next.js. Вы также можете использовать более ручной подход для более точного контроля над конечным результатом.
Наконец, вы должны решить, какую именно информацию включать в теги.
Что такое открытый график?
Протокол Open Graph — это открытый стандарт, который позволяет разработчикам контролировать то, как социальные сети отображают их контент. Первоначально он был разработан Facebook, но многие другие платформы с тех пор приняли протокол. К ним относятся Twitter, LinkedIn и Pinterest.
Open Graph позволяет точно указать, как другие сайты должны отображать ваш контент, гарантируя, что он хорошо выглядит и легко читается. Это также позволяет лучше контролировать отображение ссылок. Это упрощает отслеживание кликов и других показателей вовлеченности.
Зачем использовать протокол Open Graph?
Есть три основные области, которые следует улучшить 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 в Next.js — использовать пакет next-seo. Этот пакет автоматически сгенерирует для вас необходимые теги.
Чтобы установить пакет next-seo, выполните следующую команду:
нпм установитьследующий-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',
тип: 'изображение/jpeg',
},
{
URL: 'https://www.example.com/og-image02.jpg',
ширина: 900,
высота: 800,
альтернатива: 'Og Image Альтернативная секунда',
тип: 'изображение/jpeg',
},
{ URL: 'https://www.example.com/og-image03.jpg' },
{ URL: 'https://www.example.com/og-image04.jpg' },
],
Название сайта: 'Имя вашего сайта',
}}
твиттер={{
справиться: '@справиться',
сайт: '@сайт',
тип карты: 'сводка_большое_изображение',
}}
/>
<п>Демонстрационная страница</п>
</>
);
экспортдефолт демо-страница;
Этот код импортирует компонент NextSeo из пакета next-seo и использует его для указания заголовка, описания и изображения страницы. Он также указывает имя сайта и дескриптор Twitter.
Выполните следующую команду, чтобы запустить сервер разработки:
нпм запустить разработчикОткрытым http://localhost: 3000 в браузере, чтобы увидеть демо-страницу.
Способ 2: использование пользовательского файла _document.js
Еще один способ реализовать протокол Open Graph в Next.js — создать собственный _document.js файл. Этот файл позволит вам самостоятельно указать теги Open Graph и создать повторно используемый код для всех страниц.
Чтобы настроить пользовательский _document.js файл, создайте новый файл в страницы каталог со следующим содержимым:
импорт Документ, {Html, Head, Main, NextScript} из 'следующий/документ';учебный классМойДокументрасширяетДокумент{
статическийасинхронный getInitialProps (ctx) {
константа начальные свойства = Ждите Документ.getInitialProps(ctx);
возвращаться {...инициалпропс};
}оказывать() {
возвращаться (
<HTML>
<Глава>
<мета свойство ="ОГ: URL" содержание ="https://www.example.com" />
<мета свойство ="о: название" содержание ="Название открытого графика" />
<мета свойство ="ОГ: описание" содержание ="Описание открытого графика" />
<мета свойство ="о: изображение" содержание ="https://www.example.com/og-image.jpg" />
<мета свойство ="og: имя_сайта" содержание ="Имя вашего сайта" />
<мета имя ="твиттер: открытка" содержание ="сводка_большое_изображение" />
<мета имя ="твиттер: сайт" содержание ="@сайт" />
<мета имя ="твиттер: создатель" содержание ="@справиться" />
</Head>
<тело>
<Главный />
<СледующийСкрипт />
</body>
</Html>
);
}
}
экспортдефолт МойДокумент;
Добавьте приведенный ниже контент в файл index.js:
константа Демо-страница = () => (
<>
<п>Демонстрационная страница</п>
</>
);
экспортдефолт демо-страница;
Этот код импортирует компонент Document из next/document и создает пользовательский МойДокумент составная часть. Он определяет заголовок, описание и изображение для нашей страницы, а также имя сайта и дескриптор Twitter.
Выполните следующую команду, чтобы запустить сервер разработки:
нпм запустить разработчикОткрытым http://localhost: 3000 в браузере, чтобы увидеть демо-страницу.
Добавление тегов Open Graph на ваш веб-сайт может дать вам больше контроля над тем, как он отображается в сообщениях в социальных сетях, и может помочь повысить рейтинг кликов. Вы также можете улучшить отображение своего сайта в поисковой выдаче, что в конечном итоге может привести к повышению рейтинга сайта.
Есть также много других способов улучшить ранжирование сайта. Вы должны оптимизировать свой веб-сайт для мобильных устройств и использовать заголовки и описания, богатые ключевыми словами. Но использование тегов Open Graph — это быстрый и простой способ начать работу.