SEO

오늘은 블로그에서 SEO를 위해서 수행한 작업들에 대해서 알아봅니다.

검색 엔진 최적화 (SEO)

우선 검색 엔진 최적화(SEO)는 웹사이트의 트래픽을 증가시키기 위한 전략입니다. 검색 엔진에서 상위에 나타나는 웹사이트는 더 많은 클릭을 유도할 가능성이 높기 때문에, 검색 엔진에 대한 최적화는 중요합니다. 이를 위해 다양한 기술과 전략을 사용할 수 있습니다. 대표적인 SEO 전략에는,

적절한 키워드 연구 및 사용
웹사이트의 내부 링크 구조 개선
품질 높은 콘텐츠 제공
모바일 친화적인 웹사이트 디자인
속도 개선을 위한 웹사이트 최적화

등이 있습니다.

SEO는 블로그뿐 아니라 웹사이트의 성공에 중요한 역할을 한다고 합니다. SEO 전략을 통해 웹사이트의 검색 엔진 순위를 높이는 노력을 해봤습니다.

Meta 태그란?

구글과 같은 검색엔진에서 검색결과 상단에 내 사이트를 상단에 표시하기 위한 역할을 가진것이 Meta Tag입니다. 검색 엔진이 처리할 수 있도록 데이터를 제공해서 검색 키워드와 관련된 데이터를 띄워줄 수 있도록 할 수 있고 사용자에게도 어떤 사이트인지에 대해 정보를 제공하는데 큰 역할을 합니다.

그리고 SNS 내 블로그 링크를 올릴때 사진이나 설명을 내 의도에 맞게 정보들이 출력되도록 할 수 있습니다.

Gatsby. 즉, React 환경에서 Meta 태그를 출력하기 위해 React-Helmet 라이브러리를 통해 쉽게 Meta 태그를 추가할 수 있었습니다.

yarn add @types/react-helmet

저는 npm이 아닌 yarn을 사용하기에 위와 같은 명령어를 터미널에 입력해 라이브러리를 설치했습니다. 그리고

import React, { FunctionComponent, ReactNode } from 'react'
import styled from '@emotion/styled'
import GlobalStyle from 'components/Common/GlobalStyle'
import Footer from 'components/Common/Footer'
import { Helmet } from 'react-helmet'

type TemplateProps = {
  title: string
  description: string
  url: string
  image: string
  children: ReactNode
}

const Container = styled.main`
  display: flex;
  flex-direction: column;
  height: 100%;
`

const Template: FunctionComponent<TemplateProps> = function ({
  title,
  description,
  url,
  image,
  children,
}) {
  return (
    <Container>
      <Helmet>
        <title>{title}</title>
        <html lang="ko" />

        <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} />
      </Helmet>

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

export default Template

위와같이 Meta 태그를 작성했습니다.

제가 강의에서 듣기로는 필수적으로 작성해야 하는 Meta 태그들이 있었는데 다음과 같습니다.

Title : 페이지의 제목입니다.
Description : 페이지의 설명입니다.
Viewport : 모바일 친화성과 관련된 태그입니다.
Content Type : 브라우저가 데이터를 어떻게 읽을지에 대한 태그입니다.
Social Meta Tag : 여러 SNS를 위한 태그입니다. og, fb, twitter 등이 있습니다.

그 외에 웹 크롤러의 동작 명령을 지시할 수 있는 Robots, 해당 사이트의 키워드를 나타낼 수 있는 Keywords 등의 태그도 있습니다.

그리고 메인 페이지 컴포넌트에서 Template 컴포넌트로 데이터를 전달하기 위해 gatsby-config.js 에서 siteMetadata 프로퍼티를 통해 데이터를 쿼리할 수 있습니다.

module.exports = {
  siteMetadata: {
    title: `오늘도 앞으로`,
    description: `미래를 위해 지금 생각하고, 기록하자`,
    author: `Jae Hyeon`,
    siteUrl: `https://tol0608.github.io`,
  }, ...}

이렇게 이 블로그의 SEO를 위해 간단한 라이브러리 및 config 설정을 해봤습니다. 다만 아직 블로그에 글이 많이 없어서인지… 원인은 잘 모르겠지만 모든 블로그 포스팅의 색인이 생성되지 않은것 같습니다. (원래 구글 서치 콘솔이 조금 예민하다고 듣긴 한거같습니다.)

추후 구글 서치 콘솔에 등록 및 확인 작업에 대해서도 정리해서 포스팅 하도록 하겠습니다.