SEO 최적화 예제

1. 메타 태그 기본

검색 엔진은 메타 태그를 통해 페이지의 내용을 파악합니다. 가장 중요한 메타 태그들입니다:

필수 메타 태그

<!-- 페이지 제목 (50-60자 권장) -->
<title>페이지 제목 | 사이트 이름</title>

<!-- 페이지 설명 (150-160자 권장) -->
<meta name="description" content="페이지에 대한 간결하고 매력적인 설명...">

<!-- 뷰포트 (모바일 최적화) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 표준 URL -->
<link rel="canonical" href="https://example.com/page">

2. Open Graph & Twitter Card

소셜 미디어에서 공유될 때 표시되는 정보를 제어합니다.

Open Graph (Facebook, LinkedIn)

<meta property="og:type" content="article">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="https://example.com/image.jpg">

3. 구조화 데이터 (JSON-LD)

구조화 데이터를 사용하면 검색 결과에 리치 스니펫이 표시될 수 있습니다.

Article 스키마

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "기사 제목",
    "author": {
        "@type": "Person",
        "name": "작성자 이름"
    },
    "datePublished": "2024-01-15T09:00:00+09:00",
    "image": "https://example.com/image.jpg"
}
</script>

주요 스키마 타입

4. 시맨틱 HTML과 SEO

올바른 HTML 구조는 검색 엔진이 콘텐츠를 이해하는 데 도움을 줍니다.

<!-- 좋은 예시 -->
<article>
    <header>
        <h1>기사 제목</h1>
        <time datetime="2024-01-15">2024년 1월 15일</time>
    </header>

    <section>
        <h2>섹션 제목</h2>
        <p>콘텐츠...</p>
    </section>

    <footer>
        <p>작성자: 홍길동</p>
    </footer>
</article>

<!-- 피해야 할 예시 -->
<div class="article">
    <div class="title">기사 제목</div>
    <div>콘텐츠...</div>
</div>

5. Core Web Vitals

Google의 핵심 웹 지표는 사용자 경험과 SEO에 직접적인 영향을 미칩니다.

최적화 팁

<!-- LCP 최적화: 중요 리소스 프리로드 -->
<link rel="preload" href="hero-image.jpg" as="image">

<!-- CLS 방지: 이미지 크기 지정 -->
<img src="image.jpg" width="800" height="600" alt="설명">

<!-- 폰트 최적화 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

6. SEO 체크리스트

• 모든 페이지에 고유한 title과 description 설정
• h1 태그는 페이지당 하나만 사용
• 이미지에 alt 속성 추가
• 모바일 친화적인 반응형 디자인
• HTTPS 사용
• 사이트맵(sitemap.xml) 생성
• robots.txt 설정
• 구조화 데이터 추가
• 페이지 로딩 속도 최적화
• 내부 링크 구조 최적화

자주 묻는 질문