페이지 SEO 작업하기

• SEO는 "Search Engin Optimization"의 약어로, 검색 엔진 최적화를 의미한다.
• 웹사이트나 웹페이지를 검색 엔진에서 높은 순위로 표시되도록 최적화하는 프로세스와 전략을 나타낸다.
• 웹사이트가 검색 결과 페이지에서 더 높은 순위에 나타나고, 더 많은 유기적(자연적) 트래픽을 확보하려는 목적으로 사용된다.

import React from 'react'
import { Helmet, HelmetProvider } from 'react-helmet-async'

import Header from './Header'
import Footer from './Footer'

const Main = ( props ) => {
    return (
        <HelmetProvider>
            <Helmet 
                titleTemplate="%s | Webs Youtube" 
                defaultTitle="Webs Youtube" 
                defer={false}
            >
                {props.title && <title>{props.title}</title>}
                <meta name="description" content={props.description} />
            </Helmet>

            <Header />
            <main id="main" role="main">
                {props.children}
            </main>
            <Footer />
        </HelmetProvider>
    )
}

export default Main

메인페이지

 

• HelmetProvider: react-helmet-async의 HelmetProvider 컴포넌트를 사용하여 Helmet 컴포넌트를 초기화한다. Helmet은 페이지의 헤드 태그에 메타 데이터와 타이틀을 동적으로 추가하거나 변경하는 데 사용된다.
• Helmet: Helmet 컴포넌트를 사용하여 페이지의 메타 데이터와 타이틀을 설정한다. 이 컴포넌트를 사용하면 서버 사이드 렌더링(SSR) 및 동적 페이지 제목 설정과 같은 작업을 쉽게 수행할 수 있다. 주로 title, meta, link, script 등의 태그를 동적으로 조작하는데 사용된다.
• titleTemplate: 페이지 타이틀의 템플릿을 설정한다. %s는 나중에 실제 타이틀로 대체된다.
• defaultTitle: 기본 타이틀을 설정한다. 페이지 타이틀이 없는 경우 사용된다.
• defer: true로 설정하면 렌더링 전까지 <Helmet>컴포넌트가 기다린다.
• <title>과 <meta>태그: props로 전달된 title과 description 값을 사용하여 페이지의 타이틀과 메타 설명을 설정한다. props.title과 props.description이 없는 경우, 기본값으로 " Webs Youtube "가 타이틀로 설정된다.

import React from 'react'
import Main from '../components/section/Main'

const Channel = () => {
    return (
        <Main 
            title = "유튜브 채널"
            description="유튜브 채널페이지입니다.">
            Channel
        </Main>
    )
}

export default Channel
출처: https://webstoryboy.co.kr/1973 [WEBSTORYBOY:티스토리]

서브페이지

 

메인페이지 작업 후 서브페이지에서 main컴포넌트를 불러오고 페이지별로 타이틀과 설명을 추가한다.

페이지가 변경되면 타이틀이 변경되는 것을 확인할 수 있다.

 

 

 

https://webstoryboy.co.kr/1973

10. 나만의 유튜브 사이트 만들기 : 페이지 SEO 작업