SEO 최적화를 위한 메타태그 규칙이 있을까?란 생각으로 클로드 AI에게 SEO 전문가 역할을 부여하고 물어 봤습니다. 참고로 css 로딩의 비동기화를 추가적으로 요청했습니다. 그의 답변은 무엇일까요? 검색엔진 최적화를 위한 정답은 아무도 모르지만 검색엔진이 좋아할 만한 구조로 지켜가려고 노력하다보면 최적화가 되지 않을까란 생각으로 오늘도 노력을 하고 그 흔적을 포스팅으로 남깁니다.
Table of Contents | 목차
최적의 <head> 태그 순서
SEO 전문가로서 웹페이지 <head> 태그 내 메타 태그와 리소스의 최적 순서에 관해 알려 달라고 요청 했습니다.
<head> 내 요소의 이상적인 순서는 다음과 같습니다:
- 문자 인코딩 (charset)
- 뷰포트 설정
- 제목 (title)
- 메타 설명 (description)
- 기타 메타 태그 (키워드, 로봇 등)
- 파비콘
- CSS 파일 및 스타일
- 구조화된 데이터 (Schema.org JSON-LD)
- 주요 JavaScript (async/defer 속성 사용)
구조화된 데이터는 CSS 로드 전에 배치해도 괜찮지만, 일반적으로 CSS 후에 배치하는 것이 더 일반적입니다. 그리고 중요하지 않은 JavaScript는 </body> 직전에 배치하는 것이 좋습니다.
최적화된 <head> 태그의 샘플
html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 1. 문자 인코딩 -->
<meta charset="UTF-8">
<!-- 2. 뷰포트 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. 제목 -->
<title>프리부고 - 무료 부고장 서비스</title>
<!-- 4. 메타 설명 -->
<meta name="description" content="프리부고는 무료로 부고장을 만들고 공유할 수 있는 서비스입니다. 간편하게 부고장을 작성하고 QR코드로 공유하세요.">
<!-- 5. 기타 메타 태그 -->
<meta name="keywords" content="부고장, 장례, 조문, QR코드, 무료부고장, 장례식장">
<meta name="author" content="프리부고">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<!-- 모바일 최적화 메타 태그 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#1E88E5">
<!-- 소셜 미디어 메타 태그 -->
<meta property="og:title" content="프리부고 - 무료 부고장 서비스">
<meta property="og:description" content="간편하게 부고장을 작성하고 QR코드로 공유하세요.">
<meta property="og:url" content="https://freebugo.com">
<meta property="og:image" content="https://freebugo.com/images/og-image-freebugo.webp">
<meta property="og:type" content="website">
<meta property="og:site_name" content="프리부고">
<!-- 트위터 카드 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="프리부고 - 무료 부고장 서비스">
<meta name="twitter:description" content="간편하게 부고장을 작성하고 QR코드로 공유하세요.">
<meta name="twitter:image" content="https://freebugo.com/images/og-image-freebugo.webp">
<!-- 6. 파비콘 및 앱 아이콘 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://freebugo.com">
<!-- 7. CSS 파일 및 스타일 (비동기 로드) -->
<!-- 부트스트랩 CSS -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"></noscript>
<!-- 부트스트랩 아이콘 -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css"></noscript>
<!-- 폰트 (Pretendard, Noto Sans KR) -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" as="style" crossorigin onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"></noscript>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap"></noscript>
<!-- 사이트 주요 스타일시트 -->
<link rel="preload" href="/css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>
<!-- 8. 구조화된 데이터 (Schema.org) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "프리부고",
"url": "https://freebugo.com",
"description": "무료 부고장 작성 및 공유 서비스",
"applicationCategory": "Utility",
"operatingSystem": "Web",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "KRW"
},
"author": {
"@type": "Organization",
"name": "웹웍스",
"url": "https://webworks.co.kr"
}
}
</script>
<!-- 9. 주요 JavaScript (async/defer 속성 사용) -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- 페이지 콘텐츠 -->
<header>
<!-- 헤더 콘텐츠 -->
</header>
<main>
<!-- 메인 콘텐츠 -->
</main>
<footer>
<!-- 푸터 콘텐츠 -->
</footer>
<!-- 추가 JavaScript (비중요 스크립트는 body 끝에 배치) -->
<script>
// 스크립트 비동기 로드 함수
function loadScript(src, callback) {
var script = document.createElement('script');
script.src = src;
script.async = true;
if (callback) {
script.onload = callback;
}
document.body.appendChild(script);
}
// 페이지 로드 완료 후 실행
document.addEventListener('DOMContentLoaded', function() {
// 여기에 페이지 초기화 코드 작성
});
</script>
</body>
</html>
코드 특징
위 코드는 SEO와 성능 측면에서 최적화된 <head> 태그의 샘플로 다음과 같은 특징을 갖고 있습니다:
최적의 태그 순서:
- 문자 인코딩 → 뷰포트 → 제목 → 메타 설명 → 기타 메타 → 파비콘 → CSS → 구조화된 데이터 → JavaScript 순서로 배치했습니다.
CSS 비동기 로드:
- 모든 CSS 파일에 preload 속성을 적용하여 렌더링 차단을 방지합니다.
- JavaScript 비활성화 환경을 위한 <noscript> 태그가 포함되어 있습니다.
- 폴리필 스크립트를 통해 이전 브라우저에서도 비동기 로드가 적용됩니다.
완성된 메타 태그:
- SEO에 필수적인 모든 메타 태그가 포함되어 있습니다.
- 소셜 미디어 공유를 위한 Open Graph 및 Twitter Card 태그가 있습니다.
구조화된 데이터:
- Schema.org JSON-LD 형식의 구조화된 데이터를 포함하여 검색 엔진의 이해도를 높입니다.
최적화된 JavaScript 로딩:
- 주요 JavaScript는 defer 속성을 사용하여 페이지 렌더링을 차단하지 않습니다.
- 추가 스크립트를 위한 비동기 로드 함수가 포함되어 있습니다.
이 구조를 사용하면 페이지 로딩 속도가 향상되고 검색 엔진에서 더 효과적으로 색인될 수 있습니다. 또한 사용자 경험도 개선되어 이탈률 감소와 전환율 향상에 도움이 됩니다.