gringrape / gringrape.github.io

지식을 정리하기 위한 블로그
2 stars 0 forks source link

메타데이터 추가하기 #6

Closed gringrape closed 1 year ago

gringrape commented 1 year ago

예시

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Using Gatsby Head`,
    description: `Example project for the Gatsby Head API`,
    twitterUsername: `@gatsbyjs`,
    image: `/gatsby-icon.png`,
    siteUrl: `https://www.yourdomain.tld`,
  },
}

docs: https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/

gringrape commented 1 year ago

Adding SEO component

페이지에서 Head 컴포넌트를 지정하고 export 한다.

page:

Copysrc/pages/index.jsx: copy code to clipboard
import React from "react"
import { SEO } from "../components/seo"

const IndexPage = () => {
  return (
    <main>
      Hello World
    </main>
  )
}

export default IndexPage

export const Head = () => (
  <SEO />
)

docs: https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/

gringrape commented 1 year ago

여러 페이지에서 같은 Head 사용하기

index 페이지에 지정 후 사용

another page:

import React from "react"

const Page = () => {
  return (
    <h1>
      Hello World
    </h1>
  )
}

export default Page

export { Head } from './index'
gringrape commented 1 year ago

resolved in PR: https://github.com/gringrape/gringrape.github.io/pull/7