next head seo 다운로드 - next head seo 소스 코드 다운로드

다음 헤드시오

Next.js 응용 프로그램을위한 간단하고 가벼운 SEO 플러그인.

⚡️ <1kb gzipped
제로 의존성
Google Google 웹 마스터 가이드 라인을 기반으로 설계되었습니다
? 타입 스크립트 지원

next-head-seo 필수 SEO 속성 만 지원하지만 대부분의 웹 사이트에는 충분합니다.

구조화 된 데이터와 같은 고급 SEO 설정이 필요한 경우 대신 차세대를 사용하십시오.

설치하다

$ npm install next-head-seo
# or with yarn
$ yarn add next-head-seo

용법

각 페이지 구성 요소에서 next-head-seo 가져 와서 원하는 속성을 추가하십시오.

예:

 // pages/example.tsx
import NextHeadSeo from 'next-head-seo' ;

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < NextHeadSeo
      title = "Hello!"
      description = "Some description"
      canonical = "https://example.com/hello"
      og = { {
        title : "Open graph title" ,
        image : "https://example.com/og.png" ,
      } }
    />
  </ >
) ;

export default Page

// Output:
// <head>
//   <title>Hello!</title>
//   <meta name="description" content="Some description" />
//   <link rel="canonical" href="https://example.com/hello"/>
//   <meta property="og:title" content="Open graph title"/>
//   <meta property="og:image" content="https://example.com/og.png"/>
// </head>

기본 SEO 설정

기본 SEO 적절성을 구성하는 두 가지 옵션이 있습니다.

`_app.tsx` 에 기본값 `<NextHeadSeo />` 배치하십시오

첫 번째 옵션은 _app.tsx 에 기본값을 가진 <NextHeadSeo /> 배치하는 것입니다.

 // pages/_app.tsx
import type { AppProps } from 'next/app'
import NextHeadSeo from 'next-head-seo' ;

function MyApp ( { Component , pageProps } : AppProps ) {
  return (
    < >
      { /* Default SEO configuration */ }
      < NextHeadSeo
        og = { {
          image : "https://example.com/default-og.png" ,
          type : 'article' ,
          siteName : 'Your app name' ,
        } }
        twitter = { {
          card : "summary"
        } }
      />
      { /* Place <Component /> after <NextHeadSeo /> */ }
      < Component { ... pageProps } />
    </ >
  ) ;
}

export default MyApp

<NextHeadSeo /> <Component {...pageProps} /> 앞에 배치되어 있는지 확인하십시오. 다음 헤드시오는 동일한 속성 이름에 대해 후자의 값을 존중하므로.

다음 헤드시오의 래퍼 구성 요소를 만듭니다

또는 각 페이지 구성 요소에서 사용할 수있는 래퍼 구성 요소를 만듭니다. 이것은 기본값을 설정하는보다 유연하고 신뢰할 수있는 방법입니다.

다음은 래퍼 구성 요소의 예입니다.

 // components/MyPageSeo.tsx
import NextHeadSeo from 'next-head-seo' ;

// types
export type MyPageSeoProps = {
  path : string ;
  title ?: string ;
  description ?: string ;
  ogImagePath ?: string ;
  noindex ?: boolean ;
  noTitleTemplate ?: boolean ;
} ;

export const MyPageSeo : React . FC < MyPageSeoProps > = ( props ) => {
  const {
    path ,
    title = "Default title" ,
    description = "Default description" ,
    ogImagePath = "/default-og.png" ,
    noindex ,
    noTitleTemplate ,
  } = props ;

  // Set APP_ROOT_URL on enviroment variables
  // e.g. APP_ROOT_URL=https://example.com
  // https://nextjs.org/docs/basic-features/environment-variables
  const APP_ROOT_URL = process . env . NEXT_PUBLIC_APP_ROOT_URL ;

  // Absolute page url
  const pageUrl = APP_ROOT_URL + path
  // Absolute og image url
  const ogImageUrl = APP_ROOT_URL + ogImagePath

  return (
    < NextHeadSeo
      title = { noTitleTemplate ? title : ` ${ title } - MyAppName` }
      canonical = { pageUrl }
      description = { description }
      robots = { noindex ? 'noindex, nofollow' : undefined }
      og = { {
        title ,
        description ,
        url : pageUrl ,
        image : ogImageUrl ,
        type : 'article' ,
        siteName : 'MyAppName' ,
      } }
      twitter = { {
        card : "summary_large_image" ,
      } }
    />
  ) ;
} ;

그런 다음 각 페이지 구성 요소에 <MyPageSeo /> 배치하십시오.

 // pages/example.tsx
import { MyPageSeo } from "../components/MyPageSeo"

const Page = ( ) => (
  < >
    < h1 > Hello! </ h1 >
    < MyPageSeo
      path = "/example"
      title = "Hello!"
      noindex = { true }
    />
  </ >
) ;
export default Page

// Output:
// <head>
//   <title>Hello! - MyAppName</title>
//   <meta name="robots" content="noindex, nofollow"/>
//   <meta name="description" content="Default description" />
//   <link rel="canonical" href="https://example.com/example"/>
//   <meta property="og:url" content="https://example.com/example"/>
//   <meta property="og:title" content="Hello!"/>
//   <meta property="og:description" content="Default description"/>
//   <meta property="og:image" content="https://example.com//default-og.png"/>
//   <meta property="og:type" content="article"/>
//   <meta property="og:site_name" content="MyAppName"/>
//   <meta name="twitter:card" content="summary_large_image"/>
// </head>

옵션

next-head-seo 의 모든 소품은 선택 사항입니다.

소품	설명	유형
제목	✅ 모든 페이지를 설정하는 것이 좋습니다. 페이지 제목.	끈
표준	✅ 모든 페이지를 설정하는 것이 좋습니다. 페이지의 표준 URL.	끈
로봇	검색 엔진에서 페이지를 색인화하지 않을 때만 `noindex, nofollow` 설정하십시오. 그렇지 않으면이 소품을 사용할 필요가 없습니다.	`"noindex, nofollow"` `"index, follow"` `"noindex"` `"nofollow"`
설명	✅ 모든 페이지를 설정하는 것이 좋습니다. 페이지 설명. Google과 같이 150 자 후에 150자가 잘린 후 텍스트.	끈
트위터 .card	트위터 카드 이미지 유형. `og:image` 소품. 세부 사항 : 트위터 카드를 참조하십시오	`"summary"` `"summary_large_image"` `"player"` `"app"`
Twitter.site	`@` 로 시작하는 트위터 사용자 이름	끈
OG. 테이틀	OG : 제목. 비워진 경우 `title` 값을 자동으로 사용하십시오. 세부 사항을 참조하십시오 : 그래프 프로토콜 열기	끈
Og.description	OG : 설명. 비워지면 `description` 값을 자동으로 사용합니다.	끈
Og.url	OG : URL. 비워진 경우 `canonical` 값을 자동으로 사용하십시오.	끈
OG.IMAGE	OG : 이미지. 이미지 URL을 설정하십시오.	끈
OG. 타입	OG : 유형.	`"article"` `"book"` `"website"` `"profile"`
OG.SiteName	OG : site_name의 경우	끈
custommetatags	맞춤형 메타 태그를위한 객체 배열. custommetatags 섹션을 참조하십시오.	객체 배열
CustomLinkTags	사용자 정의 링크 태그의 객체 배열. CustomLinkTags 섹션을 참조하십시오.	객체 배열

맞춤형 메타 태그

추가 메타 태그를 설정할 수 있습니다. 예:

 < NextHeadSeo
  customMetaTags = { [
    {
      name : 'foo' ,
      content : 'foo-content'
    } ,
    {
      property : 'bar' ,
      content : 'bar-content'
    }
  ] }
/>
// Output:
// <head>
//   <meta name="foo" content="foo-content"/>
//   <meta name="bar" content="bar-content"/>
// </head>

다른 페이지 구성 요소에서 사용자 정의 메타 태그를 무시하려면 두 구성 요소 모두에 동일한 키를 사용하십시오.

예:

 // in /pages/_app.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'foo' ,
      content : 'foo-content'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customMetaTags = { [
    {
      key : "custom-meta" ,
      name : 'bar' ,
      content : 'bar-content'
    }
  ] }
/ >

// Output:
// <head>
//   <meta name="bar" content="bar-content"/>
// </head>

사용자 정의 링크 태그

추가 링크 태그를 설정할 수 있습니다. 예:

 < NextHeadSeo
  customLinkTags = { [
    {
      rel : 'foo' ,
      href : 'https://example.com/foo'
    } ,
     {
      rel : 'bar' ,
      type : 'bar-type' ,
      href : 'https://example.com/bar'
    } ,
  ] }
/>
// Output:
// <head>
//   <link rel="foo" content="https://example.com/foo"/>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>

다른 페이지 구성 요소에서 사용자 정의 링크 태그를 무시하려면 두 구성 요소 모두에 동일한 키를 사용하십시오. 예:

 // in /pages/_app.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'foo' ,
      content : 'https://example.com/foo'
    }
  ] }
/>

// in /pages/example.tsx
< NextHeadSeo
  customLinkTags = { [
    {
      key : "custom-link" ,
      rel : 'bar' ,
      type : 'bar-type' ,
      ccontent : 'https://example.com/bar'
    }
  ] }
/ >

// Output:
// <head>
//   <link rel="bar" type="bar-type" content="https://example.com/bar"/>
// </head>