[HTML] Meta Data와 Open Graph 개념 학습하기
2024. 8. 1. 08:58
오늘은 사이트 제작 시 필수적으로 알아야하는 메타 데이터와 오픈 그래프에 대해서 설명해드리겠습니다.
1. Meta Data
메타 데이터는 head 태그에 포함되어 있으며, 웹 페이지에 대한 정보를 제공할 때 사용되는 기능입니다.
정보의 제공은 사이트를 사용하는 사용자에게 뿐만 아니라, 웹 사이트를 크롤링하는 서칭 봇에게도 제공될 수 있습니다.
메타 데이터를 정확히 작성하는 것이 검색 엔진 최적화(SEO)에 도움이 되며, 궁극적으로 사이트 유입을 늘리는데 도움이 됩니다.
<head>
<meta charset="UTF-8">
<meta name="description" content="웹 페이지에 대한 간략한 설명">
<meta name="keywords" content="키워드1, 키워드2, 키워드3">
<meta name="author" content="작성자 이름">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 페이지 제목</title>
</head>메타 데이터를 작성하기 위해서 meta 태그를 이용하며, title, description, author 등의 정보를 제공할 수 있습니다.
2. Open Graph
오픈 그래프는 Facebook에서 개발한 프로토콜입니다.
카카오톡, 페이스북 등 소셜 미디어 플랫폼에서 웹 페이지가 공유될 떄 어떻게 표시될지를 결정합니다.
<head>
<meta property="og:title" content="웹 페이지 제목">
<meta property="og:description" content="웹 페이지에 대한 설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="웹 페이지 URL">
</head>오픈 그래프를 작성하는 데는 마찬가지로 meta 태그를 사용하며, og:title, og:description, og:image 등의 속성을 이용할 수 있습니다.
일반적으로 두 가지 기능을 별도로 사용한다기 보다는 검색 최적화와 사용자 출력을 위해 결합하여 사용하는 편입니다.
'Web > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] textarea 개행 안되는 문제 해결 (Feat. React) (1) | 2024.02.06 |
|---|---|
| [HTML/CSS] Header 화면 최상단에 고정시키는 방법 (1) | 2024.01.26 |
| [HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기 (2) | 2023.11.01 |
| [HTML/CSS] 움직이는 Gradients 배경 적용하기 (1) | 2023.10.26 |
| [Error] DOMException: play() failed because the user didn't interact with the document first 해결 방법 (0) | 2023.09.27 |
