1. Metadata란?
Metadata는 웹페이지의 콘텐츠에 대한 정보를 담는 데이터이다.
HTML 문서의 <head> 태그 내부에 작성되며, 사용자가 직접 보지는 않지만
브라우저, 검색엔진, 소셜미디어가 페이지를 해석하는 데 사용하는 정보다.
대표적인 메타태그 예시
<title>나의 블로그</title>
<meta name="description" content="개발과 일상을 공유하는 블로그입니다.">
<meta property="og:image" content="/images/thumbnail.png">
주요 특성
- 사람보다 시스템을 위한 데이터이다.
- 페이지의 주제, 설명, 이미지 등을 알려준다.
- 검색 결과, SNS 공유 카드, 브라우저 탭 제목 등에 사용된다.
2. SEO란?
SEO(Search Engine Optimization) 는 검색 엔진 최적화라는 뜻이다.
검색엔진이 내 웹사이트를 더 잘 이해하고, 더 높은 위치에 노출되도록 돕는 전략이다.
구성 요소
- title: 페이지 제목. 검색 결과의 제목으로 사용됨
- meta description: 검색 결과에 노출되는 요약 설명
- og:title, og:description, og:image: SNS에 링크 공유 시 보여질 제목, 설명, 이미지
- robots.txt, sitemap.xml: 검색엔진의 탐색을 안내
- 페이지 속도, 반응형 디자인, 접근성 등도 검색 순위에 영향을 줌.
OG(Open Graph): 페이스북, 카카오톡, 트위터 등에서 링크를 공유할 때 표시되는 썸네일, 제목, 설명 등을 제어하는 메타데이터 규격이다.
3. Metadata와 SEO의 관계
- Metadata는 SEO를 구성하는 요소 중 하나다.
- 검색엔진은 Metadata를 통해 페이지의 내용, 주제, 신뢰도 등을 판단한다.
- 잘 구성된 Metadata는 검색 결과에서의 노출 품질과 클릭률에 직접적인 영향을 미친다.
- OG 메타데이터는 SNS에서의 콘텐츠 표현력을 높여 공유 확산에 도움을 준다.
4. 적용 사례 - Next.js에서의 메타데이터 구성
대표적인 웹 프레임워크인 Next.js에서는 App Router 기반 구조에서 다음과 같이 메타데이터를 설정할 수 있다.
정적 metadata 설정
export const metadata = {
title: 'Home',
description: 'Welcome to my homepage',
};동적 metadata 설정
export async function generateMetadata() {
const article = await getArticle();
return {
title: article.title,
description: article.excerpt,
};
}
프레임워크에 따라 설정 방법은 다르지만, 핵심은 페이지별로 알맞은 정보를 제공하는 데 있다.
5. 정리
- Metadata는 페이지 정보를 시스템이 이해할 수 있도록 정의하는 방식이다.
- SEO는 검색 및 유입을 위해 웹페이지를 최적화하는 일련의 전략이다.
- 둘은 서로 연결되어 있으며, 웹 유입과 콘텐츠 전달력에 중요한 역할을 한다.
- OG 태그를 포함한 다양한 메타데이터를 적절히 활용하면 검색뿐만 아니라 SNS 확산에도 유리하다.
728x90
반응형
'FrontEnd' 카테고리의 다른 글
| FOUC(Flash of Unstyled Content) 현상과 해결방법 (0) | 2025.09.24 |
|---|---|
| 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR) (6) | 2025.08.06 |
| 시니어 프론트엔드 개발자가 전하는 37가지 팁 (0) | 2024.05.28 |
| 브라우저에서 업데이트된 스크립트 파일 미 적용 문제와 해결책 (0) | 2023.12.06 |
| AJAX와 SPA, 차이점 (1) | 2023.05.22 |