# 🔎 SEO (Search Engine Optimization)

• 구글과 같은 검색 엔진에 친화적인 사이트를 구축해, 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업.
• 여러 관련 키워드로 검색 결과 페이지에 노출되도록 하여 웹사이트의 온라인 가시성을 개선하는 마케팅/기술 작업.

즉, SEO = 검색 엔진 최적화 ≠ 검색 광고(SEM) 최적화

---

# 왜 프론트엔드 개발자가 SEO를 신경 써야 할까?

1. 마케팅 비용 없이도 트래픽 확보 가능
2. 개발자가 직접 구현할 수 있는 영역
   • meta 태그, 시맨틱 HTML, 구조화 데이터, 성능 최적화 등 코드 레벨에서 직접 개선 가능
3. 비즈니스 성과에 직접 기여
   • 단순 화면 구현을 넘어, 성장에 영향을 주는 기능을 만드는 개발자로 성장

---

# SEO의 범위

# 1. 온페이지 SEO (On-Page SEO)

웹사이트 내부에서 할 수 있는 최적화 작업

# 1-1. 테크니컬 SEO (Technical SEO)

검색 엔진이 페이지를 잘 크롤링·인덱싱하고, 사용자가 빠르게 볼 수 있도록 만드는 기술적 작업.

• HTTPS 적용
• sitemap.xml 관리
• robots.txt 설정
• 페이지 로딩 속도 개선
• 시맨틱 HTML 사용 (header, main, nav, article, section 등)
• Core Web Vitals 최적화 (LCP, INP, CLS)

# 1-2. 콘텐츠 SEO (Content SEO)

• 사용자가 찾는 키워드 기반으로 콘텐츠 작성
• 제목, 본문, 헤딩(h1~h3) 구조 설계

(주로 기획/마케팅 영역이지만, 프론트엔드는 마크업 구조와 컴포넌트 설계로 영향을 줌)

---

# 2. 온서프 SEO (On-SERP SEO)

검색 결과 페이지(SERP)에서 더 눈에 띄게 만드는 작업

• 구조화된 데이터(별점, 가격, FAQ 등)를 활용하면 클릭률(CTR)을 높일 수 있음
• 개발자가 직접 코드로 구현 가능

# FAQ 스키마 예시 (JSON‑LD)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "프론트엔드 개발자가 SEO를 왜 공부해야 하나요?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "검색 엔진 최적화는 개발자가 직접 코드 레벨에서 구현할 수 있으며, 마케팅 비용 없이도 지속적인 트래픽을 확보할 수 있습니다."
      }
    }
  ]
}
</script>

---

# 3. 오프페이지 SEO (Off-Page SEO)

웹사이트 외부에서 우리 사이트의 신뢰도와 권위를 높이는 모든 활동 👉🏻 (웹사이트 밖에서 검색 순위를 높이는 활동)

쉽게 말해 "주변 사람들이 우리 사이트를 얼마나 추천(인정)하는가?"를 관리하는 작업

# 주요 요소

1. 백링크 (Backlinks): 가장 핵심 요소. 권위 있는 다른 사이트가 우리 사이트의 링크를 걸어주는 것 (일종의 ‘추천표’)
   • 양보다 질: 스팸 사이트의 링크 100개보다, 공신력 있는 언론사나 포털의 링크 1개가 훨씬 강력함.
2. 소셜 미디어 언급: SNS(X, 인스타그램 등)에서 우리 콘텐츠가 공유되고 회자되는 것.
3. 브랜드 검색: 사람들이 검색창에 서비스 이름을 직접 검색해서 들어오는 비중이 늘어나는 것.
4. 게스트 포스팅: 다른 유명 블로그나 매체에 전문가로서 글을 기고하고 링크를 남기는 활동.

💡 개발자가 알아야 할 점

• 주로 마케팅팀의 영역이지만, 외부에서 링크를 걸었을 때 미리보기가 예쁘게 나오도록 OG(Open Graph) 태그를 완벽하게 구현해두는 것이 오프페이지 SEO의 기술적 시작점
• 잘못된 백링크(스팸성)가 많아질 경우 '구글 서치 콘솔’을 통해 이를 거부(Disavow) 처리하는 작업이 필요할 수도 있음

Disallow: /admin/ -> 검색 결과 페이지에 노출 X



User-agent: * 👉🏻 검색엔진의 크롤러 (로봇) 명칭, 모든 크롤러에게 명령
Allow: /