Главная страница>Связанные с программированием>Другой исходный код
Скачать

Вы видели новый информационный бюллетень Next.js?

NextjsЕженедельный баннер

Полезные инструменты

  • dub недавно запустил полезный бесплатный конструктор UTM! Вы можете использовать его здесь

Следующее SEO

Next SEO — это плагин, который упрощает управление SEO в проектах Next.js.

Запросы на вытягивание очень приветствуются. Также обязательно ознакомьтесь с проблемами по запросам функций, если вы ищете вдохновение для добавления.

Хотите поддержать этот бесплатный плагин?

Поддержка проекта с открытым исходным кодом занимает много времени, поэтому любой небольшой вклад приветствуется.

Кофе подпитывает кодирование ☕️

next-seo.wallet (ERC20 и SOL)

Примечание о каталоге приложений

Это примечание актуально только при использовании каталога app .

Для стандартных метаданных (например, <title>) настоятельно рекомендуется использовать встроенный generateMetaData . Вы можете ознакомиться с документами здесь

Тогда для JSON-LD единственное необходимое изменение — это добавить useAppDir={true} к используемому компоненту JSON-LD. Вам следует добавить использование этого компонента в свой page.js , а НЕ в свой head.js 

 <ArticleJsonLd
  useAppDir={true}
  url="https://example.com/article"
  title="Article headline" <- required for app directory
  />

Если вы используете каталог pages , то NextSeo — это именно то, что вам нужно для ваших SEO-задач!

Оглавление

  • Использование
    • Настраивать
    • Добавить SEO на страницу
    • Конфигурация SEO по умолчанию
    • СледующийSeo Параметры
      • Шаблон заголовка
      • Название по умолчанию
      • Нет индекса
      • опасноSetAllPagesToNoIndex
      • Нет подписки
      • опасноSetAllPagesToNoFollow
      • роботыРеквизит
      • Твиттер
      • Фейсбук
      • Канонический URL-адрес
      • Альтернативный
      • Дополнительные метатеги
      • Дополнительные теги ссылок
  • Открыть график
    • Примеры открытых графиков
      • Базовый
      • Видео
      • Аудио
      • Статья
      • Книга
      • Профиль
  • JSON-LD
    • Безопасность JSON-LD
    • Обработка нескольких экземпляров
    • Статья
    • хлебные крошки
    • Блог
    • Палаточный лагерь
    • Рецепт
    • Окно поиска дополнительных ссылок
    • Курс
    • Набор данных
    • Корпоративный контакт
    • Страница часто задаваемых вопросов
    • Как сделать
    • Публикация вакансии
    • Местный бизнес
    • Логотип
    • Продукт
    • Социальный профиль
    • Новостная статья
    • Парк
    • Видео
    • Видеоигра
    • Событие
    • Вопросы и ответы
    • Страница коллекции
    • Страница профиля
    • Карусель
      • По умолчанию (сводный список)
      • Курс
      • Фильм
      • Рецепт
      • Обычай
    • Программное приложение
    • Организация
    • Бренд
    • Веб-страница
    • Метаданные изображения
  • Авторы

Использование

NextSeo работает, включая его на страницы, где вы хотите добавить атрибуты SEO. После включения на страницу вы передаете ему объект конфигурации со свойствами SEO страницы. Он может генерироваться динамически на уровне страницы или, в некоторых случаях, ваш API может возвращать объект SEO.

Настраивать

Сначала установите его: 

npm install next-seo

или 

yarn add next-seo

Добавить SEO на страницу

Используете каталог приложений Next.js, представленный в Next.js 13?

Если вы используете каталог приложения Next.js, настоятельно рекомендуется использовать встроенный generateMetaData . Вы можете ознакомиться с документами здесь

Если вы используете каталог pages , то NextSeo — это именно то, что вам нужно для ваших SEO-задач!

Затем вам нужно импортировать NextSeo и добавить нужные свойства. Это позволит отобразить теги в <head> для SEO. Как минимум, вам следует добавить заголовок и описание.

Пример только с названием и описанием: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Simple Usage Example"
      description = "A short description goes here."
    / >
    < p > Simple Usage < / p >
  < / >
) ;

export default Page ;

Но NextSeo дает вам гораздо больше возможностей, которые вы можете добавить. Ниже приведен типичный пример страницы.

Типичный пример страницы: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      title = "Using More of Config"
      description = "This example uses more of the available config options."
      canonical = "https://www.canonical.ie/"
      openGraph = { {
        url : 'https://www.url.ie/a' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image-01.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
            type : 'image/jpeg' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-02.jpg' ,
            width : 900 ,
            height : 800 ,
            alt : 'Og Image Alt Second' ,
            type : 'image/jpeg' ,
          } ,
          { url : 'https://www.example.ie/og-image-03.jpg' } ,
          { url : 'https://www.example.ie/og-image-04.jpg' } ,
        ] ,
        siteName : 'SiteName' ,
      } }
      twitter = { {
        handle : '@handle' ,
        site : '@site' ,
        cardType : 'summary_large_image' ,
      } }
    / >
    < p > SEO Added to Page < / p >
  < / >
) ;

export default Page ;

Заметка в Твиттере Теги

Реквизиты cardType , site , handle эквивалентны twitter:card , twitter:site , twitter:creator . Документацию можно найти здесь.

Twitter прочитает теги og:title , og:image и og:description для своей карточки. next-seo опускает twitter:title , twitter:image и twitter:description во избежание дублирования.

Некоторые инструменты могут сообщить об этом как об ошибке. См. выпуск № 14.

Конфигурация SEO по умолчанию

NextSeo позволяет вам установить некоторые свойства SEO по умолчанию, которые будут отображаться на всех страницах без необходимости что-либо включать в них. При необходимости вы также можете переопределить их для каждой страницы.

Для этого вам нужно будет создать собственный <App> . В каталоге страниц создайте новый файл _app.js . Дополнительную информацию о пользовательском <App> см. в документации Next.js здесь.

В этом файле вам нужно будет импортировать DefaultSeo из next-seo и передать ему реквизиты.

Вот типичный пример: 

 import App , { Container } from 'next/app' ;
import { DefaultSeo } from 'next-seo' ;

// import your default seo configuration
import SEO from '../next-seo.config' ;

export default class MyApp extends App {
  render ( ) {
    const { Component , pageProps } = this . props ;
    return (
      < Container >
        < DefaultSeo
          openGraph = { {
            type : 'website' ,
            locale : 'en_IE' ,
            url : 'https://www.url.ie/' ,
            siteName : 'SiteName' ,
          } }
          twitter = { {
            handle : '@handle' ,
            site : '@site' ,
            cardType : 'summary_large_image' ,
          } }
        / >
        < Component { ... pageProps } / >
      < / Container >
    ) ;
  }
}

Для правильной работы DefaultSeo следует размещать выше (перед) Component из-за поведения внутренних компонентов Next.js.

Альтернативно вы также можете создать файл конфигурации для хранения значений по умолчанию, например next-seo.config.js 

 export default {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;
или вот так, если вы используете TypeScript 

 import { DefaultSeoProps } from 'next-seo' ;

const config : DefaultSeoProps = {
  openGraph : {
    type : 'website' ,
    locale : 'en_IE' ,
    url : 'https://www.url.ie/' ,
    siteName : 'SiteName' ,
  } ,
  twitter : {
    handle : '@handle' ,
    site : '@site' ,
    cardType : 'summary_large_image' ,
  } ,
} ;

export default config ;

импортируйте вверху _app.js 

 import SEO from '../next-seo.config' ;

и вместо этого можно использовать компонент DefaultSeo 

 < DefaultSeo { ... SEO } / >

С этого момента ко всем вашим страницам будут применяться значения по умолчанию, указанные выше.

Обратите внимание, что Container устарел в Next.js v9.0.4, поэтому вам следует заменить этот компонент здесь на React.Fragment в этой версии и более поздних версиях — см. здесь.

СледующийSeo Параметры

Свойство Тип Описание
titleTemplate нить Позволяет вам установить шаблон заголовка по умолчанию, который будет добавлен к вашему заголовку. Подробнее
title нить Установите мета-заголовок страницы
defaultTitle нить Если на странице не задан заголовок, эта строка будет использоваться вместо пустого titleTemplate
noindex логическое значение (по умолчанию false) Устанавливает, должна ли страница индексироваться или нет. Подробнее
nofollow логическое значение (по умолчанию false) Устанавливает, следует ли подписываться на страницу или нет. Дополнительная информация
robotsProps Объект Установите дополнительную метаинформацию для X-Robots-Tag
description нить Установите мета-описание страницы
canonical нить Установите канонический URL-адрес страницы
mobileAlternate.media нить Установите размер экрана, с которого должен отображаться мобильный веб-сайт.
mobileAlternate.href нить Установите альтернативный URL-адрес мобильной страницы
languageAlternates множество Установите язык альтернативных URL-адресов. Ожидается массив объектов формы: { hrefLang: string, href: string }
themeColor нить Указывает предлагаемый цвет, который пользовательские агенты должны использовать для настройки отображения страницы или окружающего пользовательского интерфейса. Должен содержать действительный цвет CSS.
additionalMetaTags множество Позволяет добавить метатег, который здесь не описан. Дополнительная информация
additionalLinkTags множество Позволяет добавить тег ссылки, который здесь не описан. Дополнительная информация
twitter.cardType нить Тип карты: summary , summary_large_image , app или player
twitter.site нить @username для веб-сайта, используемого в нижнем колонтитуле карточки.
twitter.handle нить @username для создателя/автора контента (выводится как twitter:creator )
facebook.appId нить Используется для Facebook Insights. Для этого вам необходимо добавить идентификатор приложения Facebook на свою страницу. Дополнительная информация
openGraph.url нить Канонический URL-адрес вашего объекта, который будет использоваться в качестве его постоянного идентификатора в графе.
openGraph.type нить Тип вашего объекта. В зависимости от указанного типа могут потребоваться и другие свойства. Дополнительная информация
openGraph.title нить Заголовок открытого графика может отличаться от вашего мета-заголовка.
openGraph.description нить Описание открытого графика может отличаться от вашего мета-описания.
openGraph.images множество Массив изображений (объектов), которые будут использоваться платформами социальных сетей, Slack и т. д. в качестве предварительного просмотра. Если предоставлено несколько, вы можете выбрать один при совместном использовании. См. примеры
openGraph.videos множество Массив видео (объект)
openGraph.locale нить Языковой стандарт, в котором размечены теги открытого графа. Имеет формат Language_TERRITORY. По умолчанию — en_US.
openGraph.siteName нить Если ваш объект является частью более крупного веб-сайта, имя, которое должно отображаться для всего сайта.
openGraph.profile.firstName нить Имя человека.
openGraph.profile.lastName нить Фамилия человека.
openGraph.profile.username нить Имя пользователя человека.
openGraph.profile.gender нить Пол человека.
openGraph.book.authors нить[] Авторы статьи. См. примеры
openGraph.book.isbn нить ISBN
openGraph.book.releaseDate дата и время Дата выхода книги.
openGraph.book.tags нить[] Отметьте слова, связанные с этой книгой.
openGraph.article.publishedTime дата и время Когда статья была впервые опубликована. См. примеры
openGraph.article.modifiedTime дата и время Когда статья была изменена в последний раз.
openGraph.article.expirationTime дата и время Когда статья устарела после.
openGraph.article.authors нить[] Авторы статьи.
openGraph.article.section нить Имя раздела высокого уровня. Например, технологии
openGraph.article.tags нить[] Отметьте слова, связанные с этой статьей.

Шаблон заголовка

Заменяет %s строкой заголовка. 

 title = 'This is my title' ;
titleTemplate = 'Next SEO | %s' ;
// outputs: Next SEO | This is my title 
 title = 'This is my title' ;
titleTemplate = '%s | Next SEO' ;
// outputs: This is my title | Next SEO

Название по умолчанию 

 title = undefined ;
titleTemplate = 'Next SEO | %s' ;
defaultTitle = 'Next SEO' ;
// outputs: Next SEO

Нет индекса

Установка значения true приведет к установке noindex,follow (чтобы установить nofollow , обратитесь к nofollow ). Это работает постранично. Это свойство работает в тандеме со свойством nofollow и вместе они заполняют метатег robots .

Примечание. Свойства noindex и nofollow немного отличаются от всех остальных в том смысле, что установка их по умолчанию не работает должным образом. Это связано с тем, что Next SEO уже имеет index,follow потому что next-seo в конце концов — это плагин SEO. Поэтому, если вы хотите глобально использовать эти свойства, см. опасноSetAllPagesToNoIndex и опасноSetAllPagesToNoFollow.

Пример отсутствия указателя на одной странице:

Если у вас есть одна страница, которую вы не хотите индексировать, вы можете добиться этого следующим образом: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo noindex = { true } / >
    < p > This page is no indexed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="noindex,follow">
*/

опасноSetAllPagesToNoIndex

У него dangerously префикс, потому что он не будет noindex все страницы. Поскольку это плагин для SEO, это довольно опасное действие. Неплохо этим пользоваться. Просто убедитесь, что вы хотите noindex КАЖДОЙ страницы. Вы все равно можете переопределить это на уровне страницы, если у вас есть вариант использования для index страницы. Это можно сделать, установив noindex: false .

Единственный способ отключить это — удалить опору из DefaultSeo в вашем пользовательском <App> .

Нет подписки

Установка значения true приведет к установке index,nofollow (чтобы установить noindex , обратитесь к noindex ). Это работает постранично. Это свойство работает совместно со свойством noindex , и вместе они заполняют метатег robots .

Примечание. В отличие от других свойств, установка noindex и nofollow по умолчанию не работает должным образом. Это связано с тем, что Next SEO по умолчанию имеет значение index,follow , поскольку next-seo в конце концов является плагином SEO. Если вы хотите глобально разрешить эти свойства, см. опасноSetAllPagesToNoIndex и опасноSetAllPagesToNoFollow.

Пример No Follow на одной странице:

Если у вас есть одна страница, которую вы не хотите индексировать, вы можете добиться этого следующим образом: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo nofollow = { true } / >
    < p > This page is not followed < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,nofollow">
*/

опасноSetAllPagesToNoFollow

Он имеет префикс « dangerously , потому что он не будет nofollow всеми страницами. Поскольку это плагин для SEO, это довольно опасное действие. Неплохо этим пользоваться. Просто убедитесь, что вы хотите использовать nofollow на КАЖДОЙ странице. Вы все равно можете переопределить это на уровне страницы, если у вас есть вариант использования для follow на страницу. Это можно сделать, установив nofollow: false .

Единственный способ отключить это — удалить опору из DefaultSeo в вашем пользовательском <App> .

noindex nofollow meta robots
-- -- index,follow (по умолчанию)
ЛОЖЬ ЛОЖЬ index,follow
истинный -- noindex,follow
истинный ЛОЖЬ noindex,follow
-- истинный index,nofollow
ЛОЖЬ истинный index,nofollow
истинный истинный noindex,nofollow

роботыРеквизит

В дополнение к index, follow the robots принимает дополнительные свойства для более точного архивирования сканирования и предоставления более качественных фрагментов для SEO-ботов, сканирующих вашу страницу.

Пример: 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      robotsProps = { {
        nosnippet : true ,
        notranslate : true ,
        noimageindex : true ,
        noarchive : true ,
        maxSnippet : - 1 ,
        maxImagePreview : 'none' ,
        maxVideoPreview : - 1 ,
      } }
    / >
    < p > Additional robots props in Next-SEO!! < / p >
  < / >
) ;

export default Page ;

/*
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
*/

Доступные объекты недвижимости

Свойство Тип Описание
noarchive логическое значение Не показывать кэшированную ссылку в результатах поиска.
nosnippet логическое значение Не показывать фрагмент текста или предварительный просмотр видео в результатах поиска для этой страницы.
max-snippet число Используйте максимум [число] символов в качестве фрагмента текста для этого результата поиска. Читать далее
max-image-preview «нет», «стандартный», «большой» Установите максимальный размер предварительного просмотра изображения для этой страницы в результатах поиска.
max-video-preview число Используйте максимум [число] секунд в качестве фрагмента видео для видео на этой странице в результатах поиска. Читать далее
notranslate логическое значение Не предлагать перевод этой страницы в результатах поиска.
noimageindex логическое значение Не индексируйте изображения на этой странице.
unavailable_after нить Не показывать эту страницу в результатах поиска после указанной даты/времени. Дата/время должны быть указаны в широко распространенном формате, включая, помимо прочего, RFC 822, RFC 850 и ISO 8601.

Для получения дополнительной информации о X-Robots-Tag посетите Центр Google Search — Управление сканированием и индексированием.

Твиттер

Twitter будет читать теги og:title , og:image и og:description для своей карточки, поэтому next-seo опускает twitter:title , twitter:image и twitter:description , чтобы не дублировать.

Некоторые инструменты могут сообщить об этом как об ошибке. См. выпуск № 14.

Фейсбук 

 facebook = { {
  appId : '1234567890' ,
} }

Добавьте это в свою конфигурацию SEO, чтобы включить мета fb:app_id, если вам нужно включить статистику Facebook для вашего сайта. Информацию об этом можно найти в документации Facebook.

Канонический URL-адрес

Добавьте это для каждой страницы, если хотите объединить повторяющиеся URL-адреса. 

 canonical = 'https://www.canonical.ie/' ;

Альтернативный

Это отношение ссылки используется для обозначения связи между настольным компьютером и мобильным веб-сайтом для поисковых систем.

Пример: 

 mobileAlternate = { {
  media : 'only screen and (max-width: 640px)' ,
  href : 'https://m.canonical.ie' ,
} } 
 languageAlternates = { [ {
  hrefLang : 'de-AT' ,
  href : 'https://www.canonical.ie/de' ,
} ] }

Дополнительные метатеги

Это позволяет вам добавлять любые другие метатеги, которые не включены в config и должны использоваться вместо children свойств.

требуется content . Затем либо name , property , либо httpEquiv . (Только по одному на каждого)

Пример: 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  name : 'application-name' ,
  content : 'NextSeo'
} , {
  httpEquiv : 'x-ua-compatible' ,
  content : 'IE=edge; chrome=1'
} ] }

Неверные примеры:

Они недействительны, поскольку содержат более одного name , property и httpEquiv в одной записи. 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  name : 'dc:creator' ,
  content : 'Jane Doe'
} , {
  property : 'application-name' ,
  httpEquiv : 'application-name' ,
  content : 'NextSeo'
} ] }

Следует отметить, что в настоящее время он поддерживает только уникальные теги, если вы не используете свойство keyOverride для предоставления уникального ключа для каждого дополнительного метатега.

Поведение по умолчанию (без свойства keyOverride ) заключается в отображении одного тега для каждого уникального name / property / httpEquiv . Будет отображен последний определенный.

Например, если вы передаете 2 тега с одним и тем же property : 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs'
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe'
} ] }

это приведет к рендерингу: 

 < meta property =" dc:creator " content =" Jane Doe " />

Предоставление дополнительного свойства keyOverride следующим образом: 

 additionalMetaTags = { [ {
  property : 'dc:creator' ,
  content : 'Joe Bloggs' ,
  keyOverride : 'creator1' ,
} , {
  property : 'dc:creator' ,
  content : 'Jane Doe' ,
  keyOverride : 'creator2' ,
} ] }

приводит к отображению правильного HTML: 

 < meta property =" dc:creator " content =" Joe Bloggs " />
< meta property =" dc:creator " content =" Jane Doe " />

Дополнительные теги ссылок

Это позволяет вам добавлять любые другие теги ссылок, которые не включены в config .

rel и href обязательны.

Пример: 

 additionalLinkTags = { [
  {
    rel : 'icon' ,
    href : 'https://www.test.ie/favicon.ico' ,
  } ,
  {
    rel : 'apple-touch-icon' ,
    href : 'https://www.test.ie/touch-icon-ipad.jpg' ,
    sizes : '76x76'
  } ,
  {
    rel : 'manifest' ,
    href : '/manifest.json'
  } ,
  {
    rel : 'preload' ,
    href : 'https://www.test.ie/font/sample-font.woof2' ,
    as : 'font' ,
    type : 'font/woff2' ,
    crossOrigin : 'anonymous'
  }
] }

это приведет к рендерингу: 

 < link rel =" icon " href =" https://www.test.ie/favicon.ico " />
< link
  rel =" apple-touch-icon "
  href =" https://www.test.ie/touch-icon-ipad.jpg "
  sizes =" 76x76 "
/>
< link rel =" manifest " href =" /manifest.json " />
< link
  rel =" preload "
  href =" https://www.test.ie/font/sample-font.woof2 "
  as =" font "
  type =" font/woff2 "
  crossorigin =" anonymous "
/>

Открыть график

Полную спецификацию можно найти на http://ogp.me/.

Next SEO в настоящее время поддерживает:

  • базовый
  • видео
  • статья
  • книга
  • профиль

Примеры открытых графиков

Базовый 

 import { NextSeo } from 'next-seo' ;

const Page = ( ) => (
  < >
    < NextSeo
      openGraph = { {
        type : 'website' ,
        url : 'https://www.example.com/page' ,
        title : 'Open Graph Title' ,
        description : 'Open Graph Description' ,
        images : [
          {
            url : 'https://www.example.ie/og-image.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt' ,
          } ,
          {
            url : 'https://www.example.ie/og-image-2.jpg' ,
            width : 800 ,
            height : 600 ,
            alt : 'Og Image Alt 2' ,
          } ,
        ] ,
      } }
    / >
    < p > Basic < / p >
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все