[ʜᴛᴍʟ] Metadata & Open Graph (메타데이터 & 오픈그래프)

NewHa·2023년 9월 30일

ʜᴛᴍʟ

목록 보기

4/4

☀️ Metadata ( 메타 데이터 )

데이터에 대한 데이터로 HTML 의 <heae> 태그 안에 내용입니다. 이는 컴퓨터가 식별할 수 있는 문서정보(메타 데이터)로 웹 브라우저가 읽고 해석하지만 화면에는 표시되지 않습니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>브라우저 탭에 뜨는 제목입니다.</title>
</head>

`<head>`

HTML 문서를 구성하는 중요한 기본 요소중 하나로, <title>, css의 <link>, <meta> 데이터(작성자, 중요한 키워드) 등의 HTML에 대한 내용을 포함합니다.

`<meta>`

스타일, 스크립트, 소프트웨어 탐색, 렌더링을 도와 줄 데이터 등 페이지에 대한 여러 가지 정보로 base, link, script, style, title 같은 다른 메타 요소로 나타낼 수 없는 메타데이터를 자유롭게 나타냅니다.

✏︎ `charset="utf-8"`

웹 브라우저에게 문서의 character(문서에서 허용하는 문자 집합) encoding을 특정해 줍니다. utf-8은 어떤 문자라도 취급할 수 있다는 것으로 한글을 표시하는 대표적인 인코딩입니다.

✏︎ `name`

메타요소가 어떤 정보의 형태를 갖고 있는 지 알려줍니다.

✏︎ `content`

실제 메타데이터의 컨텐츠입니다. 페이지에서 관리자를 정리하고 머릿말을 요약하는 데 유용합니다.

✏︎ `og: ...`

Open Graph Data 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜입니다. 주로 SNS에서 미리보기를 할 때 사용됩니다. 자세한 사용방법은 아래에서 설명합니다.

`<title>`

HTML 문서 전체의 타이틀을 표현하기 위한 메타데이터 입니다. 브라우저의 제목 표시줄이나 탭에 보이는 문서 제목으로 뜨고, 북마크시 name으로 자동으로 입력되는 타이틀입니다.

`<link>`

외부 리소스 연결 요소로 현재 문서와 외부 리소스의 관계를 명시합니다. 스타일 시트를 연결할 때 제일 많이 사용되고 href 속성에 경로를, rel 속성에 stylesheet를 사용하여 연결합니다.

`<style>`

스타일 정보 요소로 문서나 문서 일부에 대한 스타일 정보를 포함합니다.

`<script>`

데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 쓰입니다. 자바스크립트 <script>는 가능하면 <body>맨 마지막에 쓰는 것이 좋습니다.

☀️ OG (오픈 그래프)

오픈그래프는 어떤 HTML 문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜이며 페이스북에 의하여 기존의 다양한 메타 데이터 표기 방법을 참조하여 만들어졌습니다.

사용자가 클릭 하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML의 head의 메타데이터를 크롤링 하여 미리보기 화면을 생성해 줍니다.
위의 예시 이미지를 만드는 코드입니다.

 <head>
    <meta charset="UTF-8" />
    <meta
      property="og:title"
      content="Content Title을 길게길게 작성해봅니다. 근데 무슨말을 해야할지 모르는 난감함이 존재합니다."
    />
    <meta
      property="og:description"
      content="Description Here을 길게길게 작성해봅니다. 하지만 역시나 무슨말을 해야할지는 모르겠군요 어쩔 수 없지요. 얼마나 길게 써야 하는 걸까요. 얼마나 길게 써야 유의미한 결과를 얻을 수 있을 지 잘 모르겠습니다."
    />
    <meta
      property="og:image"
      content="data:image/jpeg;base64,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"
    />
    <title>타이틀입니다.</title>
  </head>

기본적으로 웹에 설정해줘야하는 오픈그래프 메타태그는 다음과 같습니다.

<!-- 해당 웹 페이지의 타이틀로 나타낼 문구입니다. -->
<meta property="og:title" content="Content Title">
<!-- 해당 웹 페이지의 대표 이미지입니다. -->
<!-- 오픈그래프의 이미지의 경우 최소한 `600 x 315` 픽셀은 되어야 하며, `1200 x 630` 픽셀 크기를 권장합니다. -->
<meta property="og:image" content="https://example.com/image.jpg">
<!-- 해당 웹 페이지의 주요 설명입니다. -->
<meta property="og:description" content="Description Here">
<!-- 외에도 필수로 작성하면 좋은 태그들은 다음과 같습니다. -->
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- image의 크기는 필수는 아니지만 설정해주는 것이 좋습니다. -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

👉🏻 각 사이트의 metadata 정보를 이용해 애플리케이션을 만들 때 다양하게 활용할 수 있습니다.

✏︎ 예를 들어 유용한 블로그를 모으는 프로젝트를 진행하면서 og:image를 수집하는 코드를 작성해 프로젝트 웹 페이지에서 띄워 해당 페이지에 대한 정보를 제공할 수 있게 사용한 적이 있습니다.

각 사이트마다 metadata를 표현하는 방식이 다를 수 있습니다.

Naver나 카카오톡 미리보기는 위에서 설명한 것처럼 og를 사용합니다.

<meta property="og:title" content="콘텐츠 제목" /> 
<meta property="og:image" content="표시되는 이미지" />

트위터의 경우는 twitter을 사용합니다.

<meta name="twitter:title" content="콘텐츠 제목" /> 
<meta name="twitter:image" content="표시되는 이미지 " />

NewHa

백 번을 보면 한 가지는 안다 👀

이전 포스트

[ʜᴛᴍʟ] Metadata & Open Graph (메타데이터 & 오픈그래프)

ʜᴛᴍʟ

☀️ Metadata ( 메타 데이터 )

`<head>`

`<meta>`

✏︎ `charset="utf-8"`

✏︎ `name`

✏︎ `content`

✏︎ `og: ...`

`<title>`

`<link>`

`<style>`

`<script>`

☀️ OG (오픈 그래프)

[ʜᴛᴍʟ] List & Table ( 목록과 표)

0개의 댓글

[ʜᴛᴍʟ] Metadata & Open Graph (메타데이터 & 오픈그래프)

ʜᴛᴍʟ

☀️ Metadata ( 메타 데이터 )

<head>

<meta>

✏︎ charset="utf-8"

✏︎ name

✏︎ content

✏︎ og: ...

<title>

<link>

<style>

<script>

☀️ OG (오픈 그래프)

[ʜᴛᴍʟ] List & Table ( 목록과 표)

0개의 댓글

`<head>`

`<meta>`

✏︎ `charset="utf-8"`

✏︎ `name`

✏︎ `content`

✏︎ `og: ...`

`<title>`

`<link>`

`<style>`

`<script>`