OG 태그가 뭔가요?
오픈그래프 메타태그는 링크가 공유될 때 SNS와 메신저가 무엇을 보여줄지 정해요. 제목, 설명, 미리보기 이미지가 여기서 나와요. 태그가 없으면 플랫폼이 추측하는데, 그 결과는 빈 카드나 엉뚱한 이미지일 때가 많아요. X(트위터)의 미리보기는 twitter:card 태그가 함께 정해요.
이미지 크기와 글자 수
Meta for Developers의 링크 공유 이미지 안내는 고해상도 화면에서 잘 보이려면 1200×630픽셀 이상을 쓰고, 피드에서 잘리지 않게 1.91:1 비율에 가깝게 맞추라고 해요. 파일은 8MB를 넘으면 안 돼요. Open Graph 규격은 og:title, og:type, og:image, og:url을 기본 속성으로 정하고, og:url은 그 페이지의 정식 주소예요. og:url과 og:image에는 절대 URL을 쓰세요. 제목 60자, 설명 110자 표시는 공식 한도가 아니라 미리보기가 잘리기 쉬운 길이를 가늠하는 눈대중이에요.
출처
FAQ
만든 태그는 어디에 붙여넣나요?
HTML 페이지의 <head> 안에 붙여넣으세요. Next.js 같은 프레임워크를 쓴다면 프레임워크의 메타데이터 API에 같은 값을 옮기면 돼요. 생성된 HTML을 보면 어떤 필드를 채워야 하는지 그대로 보여요.
태그를 바꿨는데 미리보기가 안 바뀌어요.
플랫폼이 링크 미리보기를 캐시하기 때문이에요. 페이스북 공유 디버거, 링크드인 포스트 인스펙터 같은 각 플랫폼 도구에서 다시 스크랩하거나, URL 뒤에 쿼리 문자열을 붙여 캐시를 우회해 보세요.
입력한 내용이 업로드되나요?
아니요. 태그 생성은 전부 브라우저 안에서 이루어지고, 이미지 URL은 미리보기를 위해 이 브라우저에서만 불러와요.