SEO 최적화를 위한 메타태그 및 스키마 표준 가이드를 클로드 AI 에이전트와 함께 고민해 봤습니다. 저 같은 경우는 워드프레스보다 일반 웹사이트 제작 비중이 더 크다보니 페이지별 SEO 최적화에 신경을 쓸 수 밖에 없습니다. 수년동안 정리해 둔 메타태그도 있지만 그래도 AI의 도움을 받아 좀 더 정교한 형태로 만들려고 노력 합니다. 그런데 답변이 매번 달라서 이번에 표준화된 메타태그 형태를 기록형으로 정리해 봅니다.
개인적인 용도로 활용하기 위해 제작된 표준화된 내용입니다. 따라서, 이는 공식 문서로 인정되지 않으며 단순한 참고 자료로만 사용하셔야 합니다.
Table of Contents | 목차
항상 유지해야 할 순서와 그룹화
먼저, 메타태그 순서를 표준화 합니다.
- 기본 메타태그 - 문자 인코딩, 뷰포트, 브라우저 호환성
- 핵심 SEO 메타태그 - 타이틀, 설명, 키워드
- 검색엔진 제어 - 로봇 지시문, 정규 URL
- 오픈 그래프 태그 - 소셜 미디어 공유 최적화
- 트위터 카드 - 트위터 공유 최적화
- 추가 메타태그 - 저자, 테마 색상 등
- 언어 및 지역 설정 - 다국어 지원
- 파비콘 및 앱 아이콘 - 브랜딩 요소
스키마 구조화 데이터 표준
개인적인 생각이지만 스키마가 SEO에 굉장히 중요한 부분을 찾이하고 있다고 생각해 이 부분을 조금 강조 해 스키마는 페이지 유형에 따라 다음 순서로 제공합니다:
- 기본 페이지 스키마 - WebPage, Article, Service 등
- 조직 정보 스키마 - Organization
- 로컬 비즈니스 스키마 (해당하는 경우)
- 추가 컨텐츠 스키마 - FAQ, HowTo 등
핵심 SEO 요소 최적화 기준
타이틀 태그 (40-60자)
- 주요 키워드를 앞부분에 배치
- 파이프(|) 또는 대시(-) 구분자 사용
- 브랜드명 포함
메타 설명 (120-158자)
- 핵심 키워드 포함
- 행동 유도 문구(CTA) 포함
- 가치 제안 명확히 제시
이미지 최적화
- 모든 이미지에 alt 속성 제공
- OG 이미지는 1200x630px 권장
- 전체 URL 경로 사용
표준화 샘플
html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 1. 기본 메타태그 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 2. 핵심 SEO 메타태그 -->
<title>페이지 제목 | 브랜드명</title>
<meta name="description" content="150-160자 내외의 페이지 설명. 핵심 키워드를 포함하고 사용자 행동을 유도하는 문구 사용.">
<meta name="keywords" content="키워드1, 키워드2, 키워드3, 롱테일키워드">
<!-- 3. 검색엔진 제어 -->
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<link rel="canonical" href="https://example.com/current-page">
<!-- 4. 오픈 그래프 태그 (소셜 미디어) -->
<meta property="og:locale" content="ko_KR">
<meta property="og:type" content="website"> <!-- article, product 등 컨텐츠 유형에 따라 변경 -->
<meta property="og:title" content="소셜미디어용 제목 | 브랜드명">
<meta property="og:description" content="소셜미디어용 설명. 흥미를 유발하는 문구로 작성.">
<meta property="og:url" content="https://example.com/current-page">
<meta property="og:site_name" content="사이트명">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="이미지 대체 텍스트">
<!-- 5. 트위터 카드 -->
<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/images/twitter-image.jpg">
<!-- 6. 추가 메타태그 -->
<meta name="author" content="작성자명 또는 회사명">
<meta name="theme-color" content="#주요색상코드">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="앱 타이틀">
<!-- 7. 언어 및 지역 설정 (다국어 사이트인 경우) -->
<link rel="alternate" href="https://example.com/en/page" hreflang="en">
<meta name="geo.region" content="KR">
<!-- 8. 파비콘 및 앱 아이콘 -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- 9. 구조화된 데이터 (Schema.org) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage", // Organization, LocalBusiness, Article, Product 등 페이지 유형에 맞게 변경
"name": "페이지 제목",
"description": "페이지 설명",
"url": "https://example.com/current-page",
"author": {
"@type": "Organization", // 또는 Person
"name": "조직명 또는 개인명",
"url": "https://example.com",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"publisher": {
"@type": "Organization",
"name": "발행자명",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2023-01-01T00:00:00+09:00",
"dateModified": "2023-01-15T00:00:00+09:00",
"image": {
"@type": "ImageObject",
"url": "https://example.com/images/main-image.jpg",
"width": "1200",
"height": "630"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/current-page"
}
}
</script>
<!-- 10. 추가 Schema.org 구조화 데이터 (페이지 유형에 따라 추가) -->
<!-- 예: Organization 스키마 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "조직명",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"sameAs": [
"https://facebook.com/example",
"https://twitter.com/example",
"https://instagram.com/example"
],
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+82-2-123-4567",
"contactType": "customer service",
"availableLanguage": ["Korean", "English"]
}
}
</script>