og 이미지(오픈그래프), 카카오톡 링크 이미지 썸네일
기술정보 24.04.19오픈 그래프(Open Graph)는 웹페이지가 소셜 미디어 상에서 공유될 때 해당 페이지의 정보를 미리보기로 보여주는 데 사용되는 메타태그 프로토콜입니다.
오픈 그래프는 웹페이지의 제목, 설명, 이미지 등과 같은 정보를 정의하여 소셜 미디어, 카카오톡, 메시지 등에서 페이지를 공유할 때 미리보기에 표시되도록 합니다.
이를 통해 공유되는 컨텐츠의 시각적인 품질과 사용자 경험을 향상시킬 수 있습니다.
오픈 그래프 메타태그는 일반적으로 HTML 태그 내에 삽입됩니다. 웹페이지의 섹션은 웹브라우저에게 문서에 대한 정보를 제공하는 곳이기 때문에, 오픈 그래프 메타태그 역시 이곳에 위치시켜야 합니다.
따라서, 보통은 다음과 같이 태그 내에 오픈 그래프 메타태그를 추가합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹페이지 제목</title> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="페이지 설명"> <meta property="og:image" content="이미지 URL"> <meta property="og:url" content="페이지 URL"> </head> <body> </body> </html> | cs |
이러한 정보를 포함하여 웹페이지를 공유하면, 소셜 미디어에서 적절한 미리보기가 생성됩니다.
(사이즈 1200px * 630px)
