next seo
v6.6.0
新しい Next.js ニュースレターをご覧になりましたか?
便利なツール
Next SEO は、Next.js プロジェクトでの SEO の管理を簡単にするプラグインです。
プルリクエストは大歓迎です。また、何を追加するかについてのインスピレーションを探している場合は、機能リクエストの問題も必ずチェックしてください。
この無料プラグインをサポートしてみませんか?
オープンソース プロジェクトの維持には多大な時間がかかるため、どんな小さな貢献でも大歓迎です。
コーヒー燃料のコーディング ☕️
next-seo.wallet (ERC20 & SOL)
アプリディレクトリに関する注意事項
このメモは、 appディレクトリを使用する場合にのみ関係します。
標準メタデータ (<title> など) の場合は、組み込みのgenerateMetaDataメソッドを使用することを強くお勧めします。ここでドキュメントをチェックアウトできます
JSON-LD の場合、必要な変更は、使用中の JSON-LD コンポーネントにuseAppDir={true}を追加することだけです。 head.jsではなく、 page.jsにこのコンポーネントの使用を追加する必要があります。
<ArticleJsonLd
useAppDir={true}
url="https://example.com/article"
title="Article headline" <- required for app directory
/>
pagesディレクトリを使用している場合、 NextSeoまさに SEO ニーズに必要なものです。
NextSeo SEO 属性を追加したいページに NextSeo を含めることで機能します。ページに含めたら、ページの SEO プロパティを含む構成オブジェクトを渡します。これはページ レベルで動的に生成できます。また、場合によっては、API が SEO オブジェクトを返すこともあります。
まず、インストールします。
npm install next-seoまたは
yarn add next-seoNext.js 13 で導入された Next.js アプリ ディレクトリを使用していますか?
Next.js アプリ ディレクトリを使用している場合は、組み込みのgenerateMetaDataメソッドを使用することを強くお勧めします。ここでドキュメントをチェックアウトできます
pagesディレクトリを使用している場合、 NextSeoまさに SEO ニーズに必要なものです。
次に、 NextSeoをインポートし、必要なプロパティを追加する必要があります。これにより、SEO のために<head>内のタグがレンダリングされます。最低限、タイトルと説明を追加する必要があります。
タイトルと説明だけの例:
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 ;Twitterタグに関する注意事項
小道具の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 を参照
NextSeo使用すると、何も含めなくてもすべてのページに表示されるいくつかのデフォルトの SEO プロパティを設定できます。必要に応じて、ページごとにこれらをオーバーライドすることもできます。
これを実現するには、カスタム<App>を作成する必要があります。ページ ディレクトリに、新しいファイル_app.jsを作成します。カスタム<App>の詳細については、こちらの Next.js ドキュメントを参照してください。
このファイル内で、 next-seoからDefaultSeoインポートし、props を渡す必要があります。
典型的な例を次に示します。
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 >
) ;
}
} Next.js 内部の動作により、正しく動作するには、 DefaultSeo Component上 (前) に配置する必要があります。
あるいは、 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' ,
} ,
} ; 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に置き換える必要があることに注意してください - ここを参照してください
| 財産 | タイプ | 説明 |
|---|---|---|
titleTemplate | 弦 | タイトルに追加されるデフォルトのタイトル テンプレートを設定できます。 |
title | 弦 | ページのメタタイトルを設定する |
defaultTitle | 弦 | ページにタイトルが設定されていない場合、空のtitleTemplateの代わりにこの文字列が使用されます。 |
noindex | ブール値 (デフォルトは false) | ページのインデックスを作成するかどうかを設定します。 詳細 |
nofollow | ブール値 (デフォルトは false) | ページをフォローするかどうかを設定します。 詳細情報 |
robotsProps | 物体 | X-Robots-Tagの詳細なメタ情報を設定します。 詳細情報 |
description | 弦 | ページのメタディスクリプションを設定する |
canonical | 弦 | ページの正規 URL を設定する |
mobileAlternate.media | 弦 | モバイル Web サイトを表示する画面サイズを設定する |
mobileAlternate.href | 弦 | モバイルページの代替URLを設定する |
languageAlternates | 配列 | 代替 URL の言語を設定します。次の形状を持つオブジェクトの配列が必要です: { hrefLang: string, href: string } |
themeColor | 弦 | ページまたは周囲のユーザー インターフェイスの表示をカスタマイズするためにユーザー エージェントが使用する推奨色を示します。有効な CSS カラーを含める必要があります |
additionalMetaTags | 配列 | ここに記載されていないメタ タグを追加できます。詳細情報 |
additionalLinkTags | 配列 | ここに記載されていないリンク タグを追加できます。詳細情報 |
twitter.cardType | 弦 | カードのタイプ。 summary 、 summary_large_image 、 app 、またはplayerのいずれかになります。 |
twitter.site | 弦 | カードフッターで使用される Web サイトの @username |
twitter.handle | 弦 | コンテンツ作成者/作成者の @username ( twitter:creatorとして出力) |
facebook.appId | 弦 | Facebook インサイトに使用されるため、ページに Facebook アプリ ID を追加する必要があります。 詳細 |
openGraph.url | 弦 | グラフ内で永続的な ID として使用されるオブジェクトの正規 URL |
openGraph.type | 弦 | オブジェクトのタイプ。指定したタイプによっては、他のプロパティも必要になる場合があります。 詳細 |
openGraph.title | 弦 | 開いているグラフのタイトル。メタ タイトルとは異なる場合があります。 |
openGraph.description | 弦 | 開いているグラフの説明。これはメタ説明とは異なる場合があります。 |
openGraph.images | 配列 | ソーシャル メディア プラットフォーム、Slack などでプレビューとして使用される画像 (オブジェクト) の配列。複数指定された場合は、共有時に 1 つを選択できます。例を参照 |
openGraph.videos | 配列 | ビデオの配列 (オブジェクト) |
openGraph.locale | 弦 | 開いているグラフ タグがマークアップされているロケール。形式は language_TERRITORY です。デフォルトは en_US です。 |
openGraph.siteName | 弦 | オブジェクトが大規模な Web サイトの一部である場合、サイト全体に表示される名前。 |
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が SEO プラグインであるため、Next SEO にはすでにデフォルトのindex,follow設定されていることが原因です。したがって、これらのプロパティをグローバルに設定したい場合は、dangerlySetAllPagesToNoIndex と darklySetAllPagesToNoFollow を参照してください。
単一ページにインデックスがない例:
インデックスを付けたくないページが 1 つだけある場合は、次の方法でこれを実現できます。
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">
*/ すべてのページのnoindexないため、 dangerouslyプレフィックスが付いています。これはSEOプラグインなので、ちょっと危険な行為です。これを使うのも悪くありません。すべてのページにnoindexするようにしてください。ページにindexを付けるユースケースがある場合は、これをページ レベルでオーバーライドできます。これは、 noindex: falseを設定することで実行できます。
これを設定解除する唯一の方法は、カスタム<App>のDefaultSeoからプロップを削除することです。
これをtrueに設定するとindex,nofollow設定されます ( noindex設定するには、 noindexを参照してください)。これはページごとに機能します。このプロパティはnoindexプロパティと連携して機能し、一緒にrobotsメタ タグを設定します。
注:他のプロパティとは異なり、デフォルトでnoindexおよびnofollow設定すると、期待どおりに機能しません。これは、 next-seoが SEO プラグインであるため、Next SEO のデフォルトがindex,followになっているためです。これらのプロパティをグローバルに許可する場合は、dangerlySetAllPagesToNoIndex および darklySetAllPagesToNoFollow を参照してください。
例 いいえ、単一ページでフォローします。
インデックスを付けたくないページが 1 つだけある場合は、次の方法でこれを実現できます。
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">
*/ すべてのページをnofollowするため、 dangerouslyほどプレフィックスが付いています。これはSEOプラグインなので、ちょっと危険な行為です。これを使うのも悪くありません。すべてのページをnofollowようにしてください。ページをfollowユースケースがある場合は、これをページ レベルでオーバーライドできます。これを行うには、 nofollow: falseを設定します。
これを設定解除する唯一の方法は、カスタム<App>のDefaultSeoからプロップを削除することです。
noindex | nofollow | robotsのmetaコンテンツ |
|---|---|---|
| -- | -- | index,follow (デフォルト) |
| 間違い | 間違い | index,follow |
| 真実 | -- | noindex,follow |
| 真実 | 間違い | noindex,follow |
| -- | 真実 | index,nofollow |
| 間違い | 真実 | index,nofollow |
| 真実 | 真実 | noindex,nofollow |
index, follow 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 検索セントラル - クロールとインデックスの制御」をご覧ください。
Twitter はカードのog:title 、 og:image 、およびog:descriptionタグを読み取ります。これが、 next-seoが重複しないようにtwitter:title 、 twitter:image 、およびtwitter:description省略する理由です。
一部のツールではこれがエラーとして報告される場合があります。問題 #14 を参照
facebook = { {
appId : '1234567890' ,
} }サイトで Facebook の分析情報を有効にする必要がある場合は、これを SEO 構成に追加して fb:app_id メタを含めます。これに関する情報は Facebook のドキュメントにあります。
重複する URL を統合する場合は、これをページごとに追加します。
canonical = 'https://www.canonical.ie/' ; このリンク関係は、デスクトップとモバイル Web サイト間の関係を検索エンジンに示すために使用されます。
例：
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のいずれかです。 (各1個のみ)
例：
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'
} ] }これに関して注意すべき点の 1 つは、 keyOverrideプロパティを使用して追加の各メタ タグに一意のキーを提供しない限り、現在は一意のタグのみをサポートしていることです。
デフォルトの動作 ( keyOverrideプロパティなし) では、一意のname / property / httpEquivごとに 1 つのタグがレンダリングされます。最後に定義されたものがレンダリングされます。
たとえば、同じpropertyを持つ 2 つのタグを渡す場合:
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 >
