공유 주소 수정하기

date

‣

slug

fixing-embed-url-og-url

status

Published

tags

기술

vercel

node.js

summary

자커마스 블로그 글 공유시 og:url이 메인 페이지로만 연결되는 문제점을 어떻게 고쳤는지 공유합니다.

type

Post

자커마스 블로그 글을 공유하면 아마 다음과 같이 표시되었을 겁니다.

하지만 일부 서비스에서는 블로그 글 대신 블로그 메인 페이지로 이동했을겁니다. 이는 og:url 값이 엉뚱하게도 블로그 메인 주소로 설정되어 있었기 때문입니다.

og:url을 설명하기 전, 대체 “og”가 무엇인지 짧게 짚고 넘어가겠습니다. og는 Open Graph의 약자입니다.

Open Graph Protocol은 어떤 웹 페이지를 소셜 미디어 등에 공유했을때 어떻게 보일 것인지 지정하는 방식을 표준화할 목적으로 만들어졌습니다. 즉 기존에는 트위터면 트위터의 방식으로, 페이스북이면 페이스북의 방식으로 정보를 지정했다면 이것을 하나의 태그 - 제목(og:title), 종류(og:type), 미리보기 이미지(og:image), 주소(og:url)와 같이 - 로 지정할 수 있도록 개발된 것입니다.

위 공유된 모습에서 글 제목과 설명이 표시되고, 이미지가 뜰 수 있는것도 오픈 그래프 규격에 따라 값을 미리 입력해서 가능했습니다.

하지만 일부 서비스에서는 og:url 값을 이용해 링크를 만들었는데, 이 값이 글 주소와 무관하게 같은 블로그 메인을 가리키고 있어 문제가 생겼습니다.

https://github.com/Lastorder-DC/blog.occm.cc/blob/main/components/Container.js#L35-L38 하지만 문제가 생깁니다. 분명 og:url은 slug(글마다 정해진 고유값)에 따라 변경되도록 구성되어 있는데도 주소가 항상 같았던 것이죠. 즉 meta.slug 라는 값이 비어있다는 결론을 내립니다.

https://github.com/Lastorder-DC/blog.occm.cc/blob/main/layouts/layout.js#L29 코드를 따라 가며 근원을 확인해 본 결과, 원인은 의외로 단순했습니다. 글을 읽은 뒤 slug라는 이름으로 값을 보내야 하는데도 title(제목)과 description(설명)와 같은 값만 보낼 뿐 slug를 보내지 않고 있던것입니다. 위 한줄을 추가하자 언제 문제가 있었냐는듯 주소가 잘 설정되기 시작했습니다.

공유 주소 수정하기 - og:url