웹앱을 만들때 신경써야할 부분이 있습니다. 바로 OG 메타태그 인데요. OG는 OpenGraph 프로토콜의 약자로 페이스북에서 만든 HTML 페이지의 속성입니다. 쉬운 예로 우리가 만든 웹앱을 카카오톡 등의 메신저로 공유를 할때 미리보기 형태로 보여지는 부분을 설정할때 쓰입니다.
바로 확인해보고자 MBTI 테스트 앱의 URL을 카카오톡에서 공유를 해보았습니다.
index.html 페이지내에 노출되는 첫이미지가 로고이미지기 때문에 저 이미지가 노출되고 있고 따로 설명을 작성한게 없기때문에 "여기를 눌러 링크를 확인하세요."라는 문구가 표시되고 있습니다.
SNS로 공유시 표시되는 내용을 바꿔 보도록 하겠습니다.
index.html 파일을 열어서 <head> </head> 사이에 아래 코드를 추가합니다.
<meta property="og:type" content="website">
<meta property="og:url" content="https://mbti.monster">
<meta property="og:title" content="MBTI 테스트">
<meta property="og:image" content="https://mbti.monster/thumb.jpg">
<meta property="og:description" content="간편하게 내 MBTI를 테스트 해보세요!">
<meta property="og:locale" content="ko_KR">
이때 thumb.jpg 이미지 파일은 미리 준비를 해둬야합니다. 이미지 경로를 루트(index.html 파일이 있는 최상위 경로)로 지정했기 때문에 index.html 과 같인 위치에 넣어야합니다. 참고로 카카오톡의 미리보기 이미지 사이즈는 가로800 세로 400의 2:1 비율이기때문에 크기가 초과 하는 경우 일부가 잘려 보일 수 있습니다. 저 부분을 고려해서 이미지를 만들면 되겠습니다.
웹앱을 배포하고 메신저에서 다시 URL을 공유해보면 아래와 같이 잘 보여집니다.
이처럼 OpenGraph 메타 태그를 설정하여 SNS로 웹앱을 공유시 미리보기에 보여지는 내용을 조절할 수가 있습니다. 미리보기를 표시하려는 쪽에서는 이 웹페이지에서 어떤 부분을 가져와서 보여줘야할지 모르기 때문에 그걸 직접 지정을 해주는 작업인거죠. OpenGraph 프로토콜에는 앞에서 설정한 속성 외에도 더 많은 속성이 있습니다.
오픈그래프에 대해 더 알고 싶으시다면 아래 사이트를 참고하세요
Open Graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph.
ogp.me
'모바일 앱' 카테고리의 다른 글
| 파비콘(favicon) 설정하기 (0) | 2023.05.28 |
|---|---|
| Cloudflare 도메인 연결하기 (0) | 2023.05.28 |
| 웹앱을 배포하는 6가지 방법 (0) | 2023.05.28 |
| HTML 설명 및 로또번호 추천 앱 코드 직접 수정해보기 (0) | 2023.05.22 |
| ChatGPT로 수익 창출 앱 만들기 - MBTI 테스트 앱 제작하기 (0) | 2023.05.18 |
댓글