블로그 포스트에 Open Graph article 메타 태그 풀세트 적용

블로그 post 페이지에 article:* Open Graph 메타 태그를 빠짐없이 박아 넣었다.

왜 지금 이 작업이었냐

사이드 프로젝트로 운영하는 블로그인데, 글 링크를 SNS나 메신저에 공유하면 제목만 겨우 나오고 썸네일은 없거나 이상한 이미지가 잡히는 상황이 꽤 됐다. 개인 블로그라고 대충 넘길 수도 있는데, 어차피 SEO 챙길 거라면 og:title, og:description 같은 기본 태그에 머물지 말고 article:* 네임스페이스까지 제대로 박아야겠다 싶었다.

article:* 태그는 Facebook의 Open Graph 스펙에서 정의한 문서 타입 전용 메타 정보다. og:type 을 article 로 선언했을 때만 의미가 살아나는 것들인데, 이걸 빠뜨리면 Google Discover나 일부 SNS 크롤러에서 콘텐츠를 "뉴스/아티클" 로 분류하지 못하고 일반 웹페이지로 처리한다. 발행 날짜, 수정 날짜, 저자, 섹션 정보가 빠지면 크롤러 입장에서는 "이게 언제 쓴 글인지" 를 추론에만 맡겨야 한다.

작업 범위: base.html 과 post.html 의 역할 분리

변경 파일이 두 개다. base.html 과 post.html. 구조적으로 이 두 파일에 변경이 걸렸다는 건 메타 태그를 "공통 레이아웃 + 페이지 특화" 로 나눠서 처리했다는 의미다.

base.html 에 전부 때려 박으면 관리는 편하지만 포스트가 아닌 페이지에서도 article:* 태그가 나가는 오염이 생긴다. 반대로 post.html 에 전부 넣으면 공통 og 태그가 중복 선언될 수 있다. 이번엔 base에서 뼈대를 잡고 post에서 확장하는 구조로 간 것 같다. 이 패턴이 정석이다.

article:* 풀세트가 실제로 어떻게 생기냐

<!-- post.html 에 들어가는 article 메타 풀세트 예시 -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="{{ post.published_at | isoformat }}" />
<meta property="article:modified_time"  content="{{ post.updated_at  | isoformat }}" />
<meta property="article:author"         content="{{ post.author.url }}" />
<meta property="article:section"        content="{{ post.category }}" />
{% for tag in post.tags %}
<meta property="article:tag"            content="{{ tag }}" />
{% endfor %}

article:tag 는 태그 수만큼 반복해서 내보내야 한다. 단일 content 에 콤마로 이어 붙이는 게 아니라 태그 하나당 <meta> 한 줄이 맞다. 이걸 콤마로 합쳐서 넣는 실수를 꽤 많이 보는데, 파서 구현마다 처리 방식이 달라서 신뢰할 수가 없다.

published_time / modified_time 은 ISO 8601 형식(2026-05-24T00:00:00+09:00) 이어야 한다. 단순 날짜 스트링(2026-05-24)도 일부 파서가 받아주긴 하지만, 타임존 오프셋까지 붙여주는 게 안전하다. 특히 Google의 구조화 데이터 처리 쪽에서 날짜 파싱 실패가 나면 아무 로그도 안 남기고 그냥 무시해 버리는 경우가 있어서 디버깅이 귀찮다.

회고

단순해 보이는 메타 태그 작업인데 의외로 놓치기 쉬운 지점이 몇 군데 있다.

• og:type 이 article 로 선언돼 있지 않으면 article:* 태그는 크롤러가 무시한다. 선언 순서보다 이게 먼저다.
• base.html 에 og:type 기본값을 website 로 깔고, post.html 에서 article 로 오버라이드하는 구조라면 렌더 순서를 꼭 확인해야 한다. 뒤에 선언된 동일 property 가 우선되는 파서도 있고, 앞에 나온 걸 쓰는 파서도 있다.
• Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator 세 개를 순서대로 돌려보는 게 검증 루틴으로 굳어졌다. 하나에서 잘 나온다고 전부 OK 가 아니다.
• 개인 블로그여도 이 태그들 제대로 박혀 있으면 나중에 RSS-to-SNS 자동화나 뉴스레터 연동할 때 파싱 소스로 그대로 써먹을 수 있다. 미리 해두면 나중에 공짜다.

작은 변경이지만 외부 공유 경험이랑 크롤러 신뢰도에 직결되는 작업이라 생각보다 꼼꼼하게 챙겨야 한다. 다음엔 JSON-LD로 BlogPosting 스키마도 얹어볼 생각이다.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.