메타태그(meta tag), 오픈그래프(OG)

codeCYJ·2022년 4월 21일
0

project

목록 보기
1/3
post-thumbnail

메타태그(meta tag)

HTML 문서의 맨 위쪽에 위치하는 태그. HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://studyJavaScript.co.kr/" /> 
    <meta property="og:title" content="JavaScript" />
    <meta property="og:image" content="%PUBLIC_URL%/JavaScript.png" />
    <meta property="og:description" content="TEST" />
    <meta property="og:site_name" content="Study" />  
    <meta property="og:locale" content="en_US" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
  </head>

OG (Open Graph)

오픈 그래프의 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 링크 안의 내용을 짐작할 수 있도록 이미지, 제목, 설명 문구를 함께 노출시키는 미리보기 기능.

"og:type" content="websit"
"og:url" content="링크URL"
"og:title" content="링크title"
"og:image" content="노출시킬 이미지"
"og:description" content="부가설명"
"og:image:width" content="1200"
"og:image:height" content="630"

  • 이미지의 크기는 1200 x 630 픽셀을 권장
profile
안녕하세요

0개의 댓글