meta 태그
meta 태그는 html 문서의 head 섹션에 포함되어 웹 페이지에 대한 메타 정보를 제공합니다. 주로 SEO(검색 엔진 최적화)나 브라우저 동작에 영향을 주는 정보들을 담고 있습니다. meta 태그는 검색엔진이 웹 페이지를 어떻게 인식하고 색인할지에 대한 정보를 제공합니다.
주요 용도
- SEO (검색 엔진 최적화): 페이지 설명, 키워드 등.
- 문서 메타데이터: 작성자, 문자 인코딩, 뷰포트 설정 등.
- 브라우저 관련 설정: 페이지가 어떻게 표시될지 설정.
예시
<head>
<meta charset="UTF-8">
<meta name="description" content="이 웹사이트는 예시 사이트입니다.">
<meta name="keywords" content="예시, 웹사이트, HTML, 메타 태그">
<meta name="author" content="홍길동">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Open Graph
Open Graph는 페이스북에서 주도적으로 사용한 메타데이터 포맷으로, 주로 소셜 미디어에서 콘텐츠가 어떻게 표시될지 정의합니다. 웹 페이지가 소셜 미디어에서 공유될 때, Open Graph 태그는 이미지, 제목, 설명 등 중요한 정보를 제공하여 공유된 콘텐츠가 더 매력적으로 보이게 합니다.
주요 용도
- 소셜 미디어 최적화: 페이지가 페이스북, 트위터 등에서 공유될 때 어떻게 보일지 정의.
- 미리보기 정보 제공: 제목, 이미지, 설명 등.
예시
<head>
<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">
<meta property="og:type" content="website">
</head>주요 차이점
목적
- meta 태그: 주로 SEO와 웹 브라우저 최적화를 위한 정보 제공.
- Open Graph: 소셜 미디어에서의 콘텐츠 표시를 최적화.
대상 플랫폼
- meta 태그: 웹 페이지 전반에 걸쳐 영향을 미침.
- Open Graph: 주로 소셜 미디어 플랫폼에서 사용.
정보 제공 방식
- meta 태그: 다양한 일반적인 메타데이터를 제공 (문서 작성자, 설명, 인코딩 등).
- Open Graph: 소셜 미디어에서 콘텐츠가 어떻게 표시될지에 대한 세부 정보 제공 (이미지, 제목, 설명 등).
Nullvuild
@nullvuild