-
웹페이지 미리보기 : OGP(OG) (Open Graph protocol)그 외 다양한 웹 지식 2022. 1. 3. 17:32반응형
이번에 작업을 하면서 처음 ogp에 대해서 알아보았다.
이는 흔히 우리가 카카오톡이나 슬랙 등에 url을 넣으면 나오는 아래와 같이 나오는 웹페이지 미리보기 같은 것이다.
처음에는 자동으로 크롤링이 되면서 필요한 부분이 크롭되어 나오는 것으로 생각 했는데, 찾아보니 ogp라는 것이 있어서 이번에 배포를 하면서 적용하게 되었다.
OGP는 Open Graph protocol 이라고 하여 OG라고도 불리는 것 같다.
이는 meta-tag(메타태그)이며, html에 적용하면 되는 것이다.
메타태그는 무슨 용도일까?
이는 사람에게 보여주기 위한 정보가 아닌, 웹 서버와 브라우저 간의 상호 정보 전달을 위해 사용된다고 할 수 있다.
문서의 디자인에는 영향을 미치지 않으며, 어떤 정보를 담고 있고, 누가 만들었고, 키워드는 무엇인지 등을 나타내는 것이다.
이런 메타태그에 우리는 원하는 이미지와 설명이 나오도록 즉, 웹사이트를 간결하게 요약하는 형태가 되도록 만들 것이다.
OPG 사이트에 들어가보면 이런 말을 볼 수 있다.
This is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
(파파고 번역)
이것은 어떤 웹 페이지에 가든 페이스북의 다른 객체와 같은 기능을 가질 수 있도록 하기 위해 페이스북에서 사용된다.페이스북의 ogp는 많은 업체에서 사용하고 있지만 여전히 지원되지 않는 곳도 있으니 잘 확인해서 사용하는 것이 좋다.
거두절미하고 ogp웹사이트를 참고하여 사용법을 알아보자!
간단하게 보면 위와 같다.
<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="제목을 넣어주세요" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="ko_KR" /> <meta property="og:locale:alternate" content="en_US" /> <meta property="og:site_name" content="사이트명을 넣어주세요" /> <meta property="og:url" content="사이트 주소를 넣어주세요" /> <meta property="og:description" content="설명글을 넣어주세요" /> <meta property="og:image" content="/favicon.svg" /> <meta property="og:image:type" content="/favicon.svg" /> <!-- 아래는 옵셔널! --> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> ... </head> <body> ... </body> </html>비교적 간단하지 않은가?
content 위치에 넣기만 하면 된다.
또한 이것으로 불충분하다고 느낀다면 아래와 같이 선택적 메타데이터를 추가해줘도 좋을 것이다.
이제 사이트를 카카오톡, 슬랙 등으로 옮겨보면 내가 원하는 이미지와 설명이 나와있을 것이다!
혹시 Generator를 원하는 경우 아래와 같은 사이트를 참고하셔도 도움이 될것이다.
이외에도 다양한 사이트가 있으니 참고하시길...
OG Generator
반응형'그 외 다양한 웹 지식' 카테고리의 다른 글
Nextjs + Docker를 통한 멀티 스테이지 빌더(multi-stage builder) (0) 2024.03.20 Docker 이미지 플랫폼 호환성 에러 (linux/amd64) (0) 2024.01.09 타임존(UTC, GMT)과 날짜 포맷(Date format) 그리고 luxon (0) 2023.06.28 Open Graph Protocol 오픈 그래프 프로토콜 간단하게 알아보기 (0) 2021.12.06 프론트엔드_GTM Tag 태깅 작업 방법 (0) 2021.08.09