Metadata

notion image

메타데이터 콘텐츠 (Metadata content)

문서의 정보(메타정보)를 제공하며, 브라우저나 검색 엔진에 영향을 줌.

<head> 태그 안에 들어가는 모든 것

  • title
  • description
  • meta charset
  • meta viewport width=device-width, initial-scale=1.0
  • link favicon (브라우저 주소창이나 탭에 보여질 작은 아이콘)

공식은 아니지만, 여러 어플리케이션에서 지원하는 메타 속성들

링크 공유 시 미리보기 이미지 등을 포함한 카드 컴포넌트로 공유되도록 하는 기능 등에 사용됨.
  • og: 프로토콜, twitter: 프로토콜 등이 있음.
 

웹 페이지에 공유될 링크

읽어보면 좋을 사이트 : web.devweb.devMetadata  |  web.dev
Metadata  |  web.dev

Metadata  |  web.dev

메타 태그를 사용하여 문서에 대한 정보를 제공하는 방법

web.devweb.dev
metadata 에는 공식 사양에 없는 애플리케이션 지원 메타 유형이 훨씬 많습니다.
페이스북 링크 공유
페이스북 링크 공유
Open Graph protocol
Open Graph protocol

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

 
트위터 링크 공유
트위터 링크 공유
Cards markup
Cards markup

Cards markup

The table in this section explains the OpenGraph fallback behavior for each Twitter tag.

읽어보면 좋을 사이트 : web.devweb.devMetadata  |  web.dev
Metadata  |  web.dev

Metadata  |  web.dev

메타 태그를 사용하여 문서에 대한 정보를 제공하는 방법

web.devweb.dev
<!DOCTYPE html>
<html lang="en">
  <head>
	  // 기본적인 공식 메타 속성들 정의, SEO
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
    
    // 페이스북 등 og 프로토콜을 지원하는 어플들 링크 공유 시
    <meta property="og:title" content="Machine Learning Workshop" />
    <meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
    <meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
    <meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />

    // 트위터 프로토콜을 지원하는 어플들 링크 공유 시    
    <meta name="twitter:title" content="Machine Learning Workshop" />
    <meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
    <meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
    <meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
    <meta name="twitter:image:alt" content="27 different home appliances" />
    <meta name="twitter:creator" content="@estellevw" />
    <meta name="twitter:site" content="@perfmattersconf" />
    
    // 기타
    <link rel="stylesheet" src="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
    <link rel="manifest" href="/mlwmanifest.json" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>
그래서 여러 어플리케이션에서 지원하는 썸네일 카드를 위한 meta 들도 추가하다보면 위와 같아진다.