React, Vue

React SEO ✅ 메타태그, Open Graph, sitemap

jonbeo 2025. 12. 16. 11:12
반응형

 

 

SEO(Search Engine Optimization)는 단순히 구글 노출이 아니라,
사용자와 검색엔진 모두가 이해할 수 있는 구조로 웹을 만드는 것입니다.

 

React, Next.js 환경에서는 SSR(서버 사이드 렌더링) 또는 SSG(정적 생성)과 함께
메타정보, OG(Open Graph), JSON-LD 등을 세팅해줘야 합니다.

🧱 1. 기본 메타태그 설정

 
<head>
  <title>티스토리 블로거 | 프론트엔드 개발 가이드</title>
  <meta name="description" content="HTML, CSS, JS, React 실무 예제와 웹 퍼블리싱 팁을 제공합니다." />
  <meta name="keywords" content="React, 프론트엔드, HTML, CSS, 웹개발, 블로그" />
  <meta name="robots" content="index, follow" />
</head>

 

📌 필수 메타태그 3종 세트

  • title → 검색 제목
  • description → 검색 결과 요약
  • robots → 검색엔진 접근 허용

🪶 2. Open Graph (SNS 미리보기 설정)

 
<meta property="og:title" content="React SEO 최적화 완벽 가이드" />
<meta property="og:description" content="React 프로젝트의 검색 노출을 높이는 방법을 배워보세요." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:url" content="https://yourdomain.com/seo-guide" />
<meta property="og:type" content="article" />

 

📌 Open Graph는 페이스북, 카카오톡, 트위터 등 SNS 공유 썸네일 정보

 

💡 트위터 추가 메타태그

 
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="React SEO 완벽 가이드" />
<meta name="twitter:description" content="검색엔진과 SNS 모두 최적화하기" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg" />

⚡ 3. Next.js에서 자동 SEO 설정 (App Router 기준)

 
// app/seo-guide/page.tsx
export const metadata = {
  title: "React SEO 완벽 가이드",
  description: "Next.js와 함께 SEO를 최적화하는 방법을 알아봅니다.",
  openGraph: {
    title: "React SEO 완벽 가이드",
    description: "검색엔진과 SNS 모두 최적화하기",
    url: "https://yourdomain.com/seo-guide",
    images: ["/og-image.jpg"],
  },
  twitter: {
    card: "summary_large_image",
    title: "React SEO 완벽 가이드",
    description: "SEO와 Open Graph 한 번에 마스터",
    images: ["/og-image.jpg"],
  },
};

 

📌 metadata 객체만 작성하면 Next.js가 자동으로 <meta> 태그 생성 👏

📊 4. sitemap.xml & robots.txt 설정

🔹 sitemap.xml

검색엔진이 사이트 구조를 빠르게 인식하게 해줍니다.

 
<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>2025-11-01</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/blog</loc>
    <priority>0.8</priority>
  </url>
</urlset>

 

📌 Next.js sitemap 자동 생성 패키지

 
npm install next-sitemap

 

next-sitemap.config.js:

 
module.exports = {
  siteUrl: "https://yourdomain.com",
  generateRobotsTxt: true,
};

🔹 robots.txt

 
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml

 

📌 검색엔진 크롤러 접근 권한 설정

🧩 5. 구조화 데이터 (Structured Data, JSON-LD)

검색결과에 별점, 작성자, 날짜 등을 표시하는 리치 스니펫 기능

 
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "React SEO 최적화 완벽 가이드",
  "author": { "@type": "Person", "name": "주인님" },
  "publisher": {
    "@type": "Organization",
    "name": "티스토리 블로거"
  },
  "datePublished": "2025-11-07",
  "image": "https://yourdomain.com/og-image.jpg"
}
</script>

 

📌 JSON-LD는 구글이 권장하는 구조화 데이터 방식

🧠 6. 실무 SEO 점검 툴

도구 기능
Google Search Console 사이트 등록 및 인덱싱 확인
Lighthouse (Chrome) SEO, 성능, 접근성 점수 확인
Ahrefs / Semrush 키워드 분석, 백링크 확인
Facebook Debugger / Twitter Card Validator OG 미리보기 확인

💡 7. 실무 SEO 팁

✅ 모든 페이지에 title과 description 고유하게 설정
✅ OG 이미지 비율은 1200x630px 권장
✅ sitemap 자동 업데이트 설정
✅ 이미지 ALT 태그 반드시 작성
✅ canonical URL 중복 방지

📝 마무리 정리

  • SEO = 검색엔진이 이해할 수 있는 정보 구조
  • Open Graph = SNS가 이해할 수 있는 미리보기 정보
  • sitemap + robots.txt = 검색엔진 크롤링 최적화
  • JSON-LD = 구글 리치 스니펫 노출 강화

💡 “검색에 잘 노출되는 웹사이트는 결국 구조가 깔끔한 사이트다.”

반응형