사실 Open Graph도 HTML meta 태그 종류 중의 하나 입니다. 다만 그 성질이 약간 다르다.

Open Graph는 사실 SNS(소셜 네트워크)에서 그 개념이 시작되었는데 우리가 SNS를 통해 해당 링크를 복사하여 SNS 에 게시하면 링크를 클릭해서 들어가기 전까지 이 링크가 어떤 데이터를 가지고 있는지 알 수 없습니다.

예를 들면, 카카오톡 URL 링크를 게시하면 단순히 URL만으로는 개발 관련 사이트 링크 인지, 악성 프로그램 링크 인지 알 수 없습니다.

그럴 때 사용하는 태그로써 미리 보기 이미지나 그 링크에 대한 설명, 제목을 표시하기 위한 태그입니다.

1. Open Graph 의 기본태그

• og: title - 사이트의 제목 태그

• og: type - 사이트의 종류 스타일 에) video.movie

• og: image - 사이트를 나타낼 대표 이미지

• og: url - 사이트의 대표 URL

  <meta property="og:title" content="포트폴리오 웹 사이트" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="<https://portpolio.fkdlxmfkdl1.github.co.kr>" />
  <meta property="og:image" content="<https://portpolio/img/mainImg>" />
  

2. Open Graph 의 옵션 태그

• og: audio - 사이트에 포함되는 오디오 파일 URL

• og: description - 사이트의 설명

• og: determiner - 문장 시작에 나타나는 단어 선택(?)이라는 것 같은데, 한글과 관계 x, 그냥 공란

• og: locale - 사이트의 언어 선택입니다. 기본 값은 en_US입니다. 한글의 경우는 ko_KR입니다.

• og: locale: alternate - 사이트의 다른 언어 종류, 다국적 사이트일 때 적용하는 태그일 듯 싶다.

• og: site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

• og: video - 사이트에 포함되는 비디오 파일 URL

  <meta property="og:audio" content="<http://example.com/bond/theme.mp3>" />
  <meta property="og:description"  content="이 사이트는 개인 포트폴리오 사이트.." />
  <meta property="og:determiner" content="" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:locale:alternate" content="fr_FR" />
  <meta property="og:locale:alternate" content="es_ES" />
  <meta property="og:site_name" content="HT 개인 포트폴리오" />
  <meta property="og:video" content="<http://example.com/bond/trailer.swf>" />