커스텀 축하 카드 쇼핑몰 [축하해요]

Open Graph Protocol(OGP)

yebin0322 2025. 1. 6. 19:09
반응형

Open Graph Protool

https://ogp.me/

  • 웹페이지를 링크 형태로 공유할 때 미리보기 형태로 제공해주는 것
  • 보다 더 나은 UX를 제공하기 위하여 facebook에서 개발
  • 인터넷 프로토콜의 한 종류
  • 웹페이지 미리보기가 제공되어 페이지 내용에 대한 확인이 쉽고, 실제 페이지 이동으로까지 이어지기 더 쉬움

사용하지 않을 때

링크가 어떤 것을 의미하는지 알 수 없으며, 밋밋하다.

사용할 때

제목, 내용, 사진을 링크를 들어가지 않아도 볼 수 있다. 좀 더 누르고 싶어진다.

사용법

매우 간단하다. 해당 jsp에 들어가 < head > 태그 안에 다음 내용을 추가해 주면 된다.

<meta property="og:title" content="공유시 보여질 제목">
  <meta property="og:type" content="website">
  <meta property="og:image" content="공유시 보여질 이미지 경로">
  <meta property="og:description" content="공유시 보여질 설명">

여기서 나는 제목과 이미지 경로는 변수 값으로 설정해 주어 사용자가 생성한 카드의 제목과 사진이 나오도록 하였고, 설명은 '카드를 열어주세요 .'라고 넣어두었다.

 
반응형