2-1. OG Meta Tags : OpenGraph Protocol
Notion의 Remark & Technique : HTML5 & CSS3 페이지 바로가기
0. References
링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까? - branch
FB OpenGraph og:image not pulling images (possibly https?) -stackoverflow
1. Introduction
웹 디자이너분께 받은 몇 가지 설정 및 추가 구현 내용 중에, 해당 웹 페이지의 링크를 sns등에 공유할 때 보이는 미리보기 관련 설정 내용들이 있었다. 이는 해당 사이트를 이용할 사용자들에게는 노출 가능성이 높고 밀접하기 때문에 굉장히 중요하다고 할 수 있지만, 페이지의 기능을 구현할 때 볼륨이 큰 파트에 밀려 잊기 쉬운 부분 중 하나이기도 하다. 실제로 나는 취업 이전 프로젝트를 진행하는 동안 이 부분을 구현한다거나 신경써 본 적이 한 번도 없었다. React에서 설정해 줄 때는 og Meta Tags 라는 것을 통해 쉽고 간단하게 설정할 수 있었다. 그 내용과 문법은 다음과 같다:
2. Syntax
요약하여 og meta tags는 다음과 같은 형태를 하고 있다 :
<meta name="OPTIONAL-PROPERTY-NAME" property="og:PROPERTY-NAME" content="CONTENT" />
문법은 아주 쉽다. 우선 HTML과 아주 유사하게 보이는, Open Graph Protocol이라는 형식의 코드를 사용하여 선언을 한다. 이는 기본적으로 닫는 태그가 없는 단일 태그로, 작성할 때 반드시 />의 형식으로 닫아준다.
그렇다면 react에서 이 태그는 어떤 식으로 작성하고 어떤 파일에 작성하여 설정하는가?
설정 파일 경로와 작성법은 다음과 같다:
- 해당 프로젝트의 경로에서 index.html 파일을 찾고, head 태그 내부에서 meta 태그를 찾는다.
- 별도의 닫는 태그가 없는 단일 태그로 작성하며, 각 attribute의 작성법은 다음과 같다:
name=""해당 property의 사용자 정의 name을 전달한다. (optional)property=""원하는 property를 작성한다. e.g. og:image og:title og:description (mandatory)content=""해당 property에 대입할 본문 영역을 작성한다. 예를 들어: property="og:title"을 작성했다면 content 내부에 작성하는 값은 해당 웹 사이트의 제목이 될 것이고, property="og:description"을 작성한다면 content 내부에 작성된 값은 해당 사이트의 기술(설명) 글이 될 것이다. 카카오톡 등을 통해서 전달받은 링크와, 생성된 미리보기 블락을 상상해 보라. 사용자가 해당 링크가 어떤 내용인지 알 수 있도록 약간의 요약된 글 또는 본문의 초입 부분이 노출되어 있을 것이다. og:description을 통해 사용자에게 보일 부분이 바로 그것이다. 참고로 이 속성은 생략이 불가하다. 생략을 원하는 경우content=""로 작성 해 주자. (mandatory)
3. Examples & usages
<!-- OPEN GRAPH PROTOCOL : SET UP THE PREVIEW -->
<meta property="og:title" content="PAGE-TITLE ON HERE" />
<meta property="og:description" content="PRODUCT-DESCRIPTION-ON-HERE" />
<meta name="og:site_name" property="og:site_name" content="SITE-NAME ON HERE" />
<meta property="og:image" content="IMAGE-PATH-ON-HERE" />
<meta property="og:image:width" content="IMAGE-WIDTH-ON-HERE(NUMBER ONLY)" />
<meta property="og:image:height" content="IMAGE-HEIGHT-ON-HERE(NUMBER ONLY ALSO)" />4. Remark
- SEE ALSO : Complete List of OpenGraph Meta Tags
<meta name="og:title" content="The Rock"/> <meta name="og:type" content="movie"/> <meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta name="og:site_name" content="IMDb"/> <meta name="og:description" content="A group of U.S. Marines, under command of..."/> <meta name="fb:page_id" content="43929265776" /> <meta name="og:email" content="me@example.com"/> <meta name="og:phone_number" content="650-123-4567"/> <meta name="og:fax_number" content="+1-415-123-4567"/> <meta name="og:latitude" content="37.416343"/> <meta name="og:longitude" content="-122.153013"/> <meta name="og:street-address" content="1601 S California Ave"/> <meta name="og:locality" content="Palo Alto"/> <meta name="og:region" content="CA"/> <meta name="og:postal-code" content="94304"/> <meta name="og:country-name" content="USA"/> <meta property="og:type" content="game.achievement"/> <meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/> <meta property="og:video" content="http://example.com/awesome.swf" /> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="385" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:video" content="http://example.com/html5.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video" content="http://example.com/fallback.vid" /> <meta property="og:video:type" content="text/html" /> <meta property="og:audio" content="http://example.com/amazing.mp3" /> <meta property="og:audio:title" content="Amazing Song" /> <meta property="og:audio:artist" content="Amazing Band" /> <meta property="og:audio:album" content="Amazing Album" /> <meta property="og:audio:type" content="application/mp3" /> ```
