1. Sitemap 만들기
Sitemap은 웹사이트의 구조를 검색 엔진에 알려주는 XML 파일 입니다.
sitemap을 사용하면 검색 엔진이 사이트의 페이지를 더 잘 이해할 수 있도록 할 수 있습니다.
사용 예시
// sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- 홈 페이지 -->
<url>
<loc>https://vita-flow.vercel.app/</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<!-- 카테고리 페이지 -->
<url>
<loc>https://vita-flow.vercel.app/category</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<!-- 카테고리별 비타민 리스트 페이지 -->
<url>
<loc>https://vita-flow.vercel.app/category/스트레스</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
</urlset>다음과 같은 형태로 필요한 페이지의 URL을 포함한 XML 파일을 작성합니다.
changefreq : 페이지가 얼마나 자주 변경되는지 (always, daily, yearly, never 등)
priority : 페이지의 상대적 중요도(0.0 ~ 1.0 / 기본값 0.5)
작성한 파일의 경로를 다음 단계의 robots.txt 파일에 추가해줍니다.
2. robots.txt 설정
robots.txt 파일은 웹사이트의 크롤링 규칙을 검색 엔진에게 알려주는 텍스트 파일입니다.
어떤 부분을 크롤링할 수 있는지 제한하거나 sitemap의 위치를 알려줍니다.
구성
- 어떤 부분을 크롤링할 수 있는지 제한 (Disallow)
- Sitemap의 위치 (Sitemap)
사용 예시
User-agent: *
Disallow: /admin/
Disallow: /mypage/
Disallow: /cart/
Sitemap: https://vita-flow.vercel.app/sitemap.xml이렇게 설정하면 /admin/, /mypage/, /cart/ 경로는 검색 엔진에 의해 크롤링되지 않고,
https://vita-flow.vercel.app/sitemap.xml 파일이 Sitemap으로 사용됩니다.
3. meta tag 설정
Meta 태그는 HTML <head> 부분에 작성하며, 검색 엔진과 SNS등에 웹페이지의 정보(페이지의 제목, 설명, 키워드 등)를 전달합니다.
React Helmet 라이브러리를 사용하여 간편하게 meta 태그를 설정할 수 있습니다.
사용예시
설치
npm install react-helmet최상위 경로에서 HelmetProvider로 감싸줍니다.
<HelmetProvider>
<RouterProvider router={routes} />
</HelmetProvider>페이지
const Meta = () => (
<Helmet>
<title>VITAFLOW | 비타플로우</title>
<meta name="description" content="비타플로우에서 나에게 필요한 비타민과 건강 보조제를 만나보세요." />
<meta name="keywords" content="비타플로우, 비타민, 건강, 보조제, 영양제" />
<meta property="og:title" content="비타플로우 - 나에게 딱 맞는 비타민 찾기" />
<meta property="og:description" content="비타플로우에서 나에게 필요한 비타민과 건강 보조제를 만나보세요." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://vita-flow.vercel.app" />
</Helmet>
)
const HomePage = () => {
return (
<>
<Meta />
...
<>
)
}또는 데이터를 가지고와서 사용할 수도 있습니다.
