Gatsby 로 블로그 만들기 .03

102·2022년 12월 23일

Gatsby 로 블로그 만들기

목록 보기

3/3

MetaTag 설정하기

gatsby도 react 기반의 라이브러리이기 때문에 seo에 매우 좋지않다.
seo를 위해 react-helmet 이라는 라이브러리를 다운받아준다.

yarn add gatsby-plugin-react-helmet react-helmet

// gatsby-config.js
`gatsby-plugin-react-helmet`, //추가해준다

import { Helmet } from 'react-helmet'

const Template = ({children}) => {
	return (
      <Container>
        <Helmet>
          <title>TechBlog</title>

          <meta name="description" content="항상 발전하기 위해 노력하는 주니어 개발자입니다." />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
        </Helmet>

        <GlobalStyle />
        {children}
        <Footer />
      </Container>
  )
}

말그대로 헬멧 을 씌워서 그 안에 meta tag 들을 작성해주면 된다.

Meta Tag 종류

1. Title

해당 페이지의 제목을 나타내기 때문에 SEO에서 가장 중요한 태그

2. Description

구글 검색 또는 여러 SNS에 링크를 올린 경우, 사용자가 해당 페이지의 설명을 확인할 수 있도록 하는 태그

3. Viewport

스마트폰과 태블릿 보급이 대중화된 이 시점에서의 여러 검색 엔진은 모바일 친화성을 아주 중요한 지표로 보고 있는데, Viewport Meta 태그가 이를 위해 사용하는 태그

4. Content Type

해당 Meta 태그에 의해서 브라우저가 데이터를 어떻게 읽어들일지에 영향을 끼칠 수 있다.

페이스북, 트위터, 인스타그램 등의 여러 소셜 미디어 서비스를 위한 Meta 태그

우리는 현재 template으로 모든 컴포넌트들을 감싸고 있기 때문에 이 컴포넌트에만 Metatag를 작성해주어도 반영이 가능하다.

//Template.jsx
const Template = ({title,description,url,image,children}) => {
	return (
    	<Container>
          <Helmet>
            <title>{title}</title>

            <meta name="description" content={description} />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />

            <meta property="og:type" content="website" />
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="og:image" content={image} />
            <meta property="og:url" content={url} />
            <meta property="og:site_name" content={title} />

            <meta name="twitter:card" content="summary" />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
            <meta name="twitter:image" content={image} />
            <meta name="twitter:site" content="@사용자이름" />
            <meta name="twitter:creator" content="@사용자이름" />
          </Helmet>

          <GlobalStyle />
          {children}
          <Footer />
      </Container>
    )
}

이렇게 Props로 필요한 데이터를 받고, 해당 데이터를 Meta 태그를 통해 지정해준다.

//gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `TechBlog`,
    description: `안녕하세요 ㅇㅇㅇ의 테크블로그 입니다`,
    author: `102`,
    siteUrl: '<https://my-website-link.com>', // 배포 후 변경 예정
  },
  ...
};

// /pages/index.js
const IndexPage = ({
  location: { search },
  data: {
    site: {
      siteMetadata: { title, description, siteUrl },
    },
    allMarkdownRemark: { edges },
    file: {
      childImageSharp: { gatsbyImageData },
      publicURL,
    },
  },
}) => {
	return (
    <Template
      title={title}
      description={description}
      url={siteUrl}
      image={publicURL}
    >
      <Introduction profileImage={gatsbyImageData} />
      <CategoryList
        selectedCategory={selectedCategory}
        categoryList={categoryList}
      />
      <PostList selectedCategory={selectedCategory} posts={edges} />
    </Template>
  )
}

export default IndexPage;

export const getPostList = graphql`
  query getPostList {
    site {
      siteMetadata {
        title
        description
        siteUrl
      }
    }
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date, frontmatter___title] }
    ) {
      edges {
        node {
          id
          fields {
            slug
          }
          frontmatter {
            title
            summary
            date(formatString: "YYYY.MM.DD.")
            categories
            thumbnail {
              childImageSharp {
                gatsbyImageData(width: 768, height: 400)
              }
            }
          }
        }
      }
    }
    file(name: { eq: "profile-image" }) {
      childImageSharp {
        gatsbyImageData(width: 120, height: 120)
      }
      publicURL
    }
  }
`;

//post-templat.jsx

const PostTemplate = ({
  data: {
    allMarkdownRemark: { edges },
  },
  location: { href },
}) => {
	
  const {
    node: {
      html,
      frontmatter: {
        title,
        summary,
        date,
        categories,
        thumbnail: {
          childImageSharp: { gatsbyImageData },
          publicURL,
        },
      },
    },
  } = edges[0];
  
  
  return (
  	<Template title={title} description={summary} url={href} image={publicURL}>
      <PostHead
        title={title}
        date={date}
        categories={categories}
        thumbnail={gatsbyImageData}
      />
      <PostContent html={html} />
      <CommentWidget />
    </Template>
  )
}

export default PostTemplate;

export const queryMarkdownDataBySlug = graphql`
  query queryMarkdownDataBySlug($slug) {
    allMarkdownRemark(filter: { fields: { slug: { eq: $slug } } }) {
      edges {
        node {
          html
          frontmatter {
            title
            summary
            date(formatString: "YYYY.MM.DD.")
            categories
            thumbnail {
              childImageSharp {
                gatsbyImageData
              }
              publicURL
            }
          }
        }
      }
    }
  }
`