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 속성을 추가하려는 페이지에 이를 포함하여 작동합니다. 페이지에 포함되면 페이지의 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 | 끈 | 모바일 웹사이트를 제공할 화면 크기를 설정하세요. |
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 | 끈 | 콘텐츠 작성자/작성자의 @사용자 이름( twitter:creator 로 출력) |
facebook.appId | 끈 | Facebook Insights에 사용됩니다. 이를 위해서는 페이지에 Facebook 앱 ID를 추가해야 합니다. |
openGraph.url | 끈 | 그래프에서 영구 ID로 사용될 객체의 표준 URL입니다. |
openGraph.type | 끈 | 개체의 유형입니다. 지정하는 유형에 따라 다른 속성이 필요할 수도 있습니다. 추가 정보 |
openGraph.title | 끈 | 오픈 그래프 제목은 메타 제목과 다를 수 있습니다. |
openGraph.description | 끈 | 오픈 그래프 설명은 메타 설명과 다를 수 있습니다. |
openGraph.images | 정렬 | 소셜 미디어 플랫폼, Slack 등에서 미리보기로 사용할 이미지(객체) 배열입니다. 여러 개가 제공된 경우 공유할 때 하나를 선택할 수 있습니다. 예시 보기 |
openGraph.videos | 정렬 | 비디오 배열(객체) |
openGraph.locale | 끈 | 오픈 그래프 태그가 마크업된 로케일입니다. 형식은 언어_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">
*/ 모든 페이지의 색인을 noindex 하지 않으므로 dangerously 접두사가 붙습니다. 이것은 SEO 플러그인이므로 다소 위험한 작업입니다. 이것을 사용하는 것도 나쁘지 않습니다 . 모든 페이지에서 noindex 는지 확인하세요. 페이지를 index 사용 사례가 있는 경우 페이지 수준에서 이를 재정의할 수 있습니다. 이는 noindex: false 설정하여 수행할 수 있습니다.
이를 설정 해제하는 유일한 방법은 사용자 정의 <App> 의 DefaultSeo 에서 소품을 제거하는 것입니다.
이것을 true 로 설정하면 index,nofollow 설정됩니다( noindex 설정하려면 noindex 를 참조하세요). 이는 페이지별로 작동합니다. 이 속성은 noindex 속성과 함께 작동하며 함께 robots 메타 태그를 채웁니다.
참고: 다른 속성과 달리 noindex 및 nofollow 기본적으로 설정하면 예상대로 작동하지 않습니다. 이는 Next SEO의 기본값이 index,follow 때문입니다. 왜냐하면 next-seo 결국 SEO 플러그인이기 때문입니다. 이러한 속성을 전역적으로 허용하려면 위험하게SetAllPagesToNoIndex 및 위험하게SetAllPagesToNoFollow를 참조하세요.
예 아니요 단일 페이지에서 팔로우:
색인을 생성하지 않으려는 단일 페이지가 있는 경우 다음을 수행하여 이를 달성할 수 있습니다.
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 외에도 더 정확한 크롤링을 보관하고 페이지를 크롤링하는 SEO 봇에 더 나은 스니펫을 제공하기 위해 더 많은 속성을 허용하는 robots 메타 태그를 따르세요.
예:
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 인사이트를 활성화해야 하는 경우 fb:app_id 메타를 포함하도록 SEO 구성에 이를 추가하세요. 이에 관한 정보는 Facebook 문서에서 찾을 수 있습니다.
중복 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 prop 대신 사용해야 하는 다른 메타 태그를 추가할 수 있습니다.
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 당 하나의 태그를 렌더링하는 것입니다. 정의된 마지막 항목이 렌더링됩니다.
예를 들어, 동일한 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 >
