OG 태그가 뭔가요?
오픈그래프 메타태그는 링크가 공유될 때 SNS와 메신저가 무엇을 보여줄지 정해요. 제목, 설명, 미리보기 이미지가 여기서 나와요. 태그가 없으면 플랫폼이 추측하는데, 그 결과는 빈 카드나 엉뚱한 이미지일 때가 많아요. X(트위터)의 미리보기는 twitter:card 태그가 함께 정해요.
이미지 크기와 글자 수
이미지는 1200×630(1.91:1)을 쓰세요. 페이스북, 링크드인, 슬랙, X의 큰 카드까지 다 잘 맞아요. 제목은 60자, 설명은 110자 근처로 유지하면 미리보기가 문장 중간에서 잘리지 않아요. og:url과 og:image에는 반드시 절대 URL을 쓰세요.
FAQ
만든 태그는 어디에 붙여넣나요?
HTML 페이지의 <head> 안에 붙여넣으세요. Next.js 같은 프레임워크를 쓴다면 프레임워크의 메타데이터 API에 같은 값을 옮기면 돼요. 생성된 HTML을 보면 어떤 필드를 채워야 하는지 그대로 보여요.
태그를 바꿨는데 미리보기가 안 바뀌어요.
플랫폼이 링크 미리보기를 캐시하기 때문이에요. 페이스북 공유 디버거, 링크드인 포스트 인스펙터 같은 각 플랫폼 도구에서 다시 스크랩하거나, URL 뒤에 쿼리 문자열을 붙여 캐시를 우회해 보세요.
입력한 내용이 업로드되나요?
아니요. 태그 생성은 전부 브라우저 안에서 이루어지고, 이미지 URL은 미리보기를 위해 이 브라우저에서만 불러와요.