페이지 별로 SNS 공유이미지(og:image) 다르게 적용하기

현재 관리중인 홈페이지에서 메인/서브별로 다른 SNS 공유 이미지를 추가하길 원했다.

방법을 좀 찾아봤는데 이런 요건은 흔한것이 아닌가보다. 찾아봐도 명확한 답변은 없었지만 이것저것 조합해보니 아래와 같은 조건이 성립해야 했다.

전제조건

1. 메인/서브별 og:image가 달라야 함 (당연!!)

2. 각 페이지별 og:url이 달라야 함

보통 페이지의 메타정보를 보면 2번 항목은 그냥 홈페이지 메인 URL이 들어있는 경우가 대부분이었다.

현행 홈페이지에서는 메인, 서브 별 1개씩의 마스터 파일을 가지고 있고 이걸 인크루드 하는 방식이었다.

적용하기 - 메인

메인 마스터 파일에는 og:image 링크를 바꿔주니 바로 적용이 됐다.

<meta property="og:image" content="http나 https를 포함하는 이미지의 절대링크 - 메인페이지 용" />

적용하기 - 서브

서브 마스터 파일에도 og:image를 변경해주었으나 적용이 되지 않았다.

의심가는 부분은 og:url이었다. og:url이 홈페이지 메인을 바라보고 있었는데, 그래서 og:image가 별도로 적용되지 않고 있을 것이라는 가설을 세웠다.

<meta property="og:url" content="홈페이지 메인 주소" />

<meta property="og:image" content="http나 https를 포함하는 이미지의 절대링크 - 서브페이지 용" />

테스트로 og:url을 서브페이지 중 아무거나로 바꿔서 확인해보니 이미지가 변경되어 보였다.

각 페이지의 URL을 받아서 og:url 항목에 넣어주면 이미지가 바뀔 수 있을것 같아 이 내용을 스크립트로 작성하기로 했다.

<script>

$(document).on('ready', function(){

    var ogUrl = window.location.href;

    $('meta[property="og:image"]').after('<meta property="og:url" content="" />');

    $('meta[property="og:url"]').attr('content', ogUrl);

});

</script>

ogUrl 이라는 변수에 현재 페이지의 URL 값을 넣어주고, og:image 항목 뒤에 og:url 항목을 생성해 content 값을 ogUrl로 대체했다.

결과

다만 이렇게 적용을 해주고 나니 og:url 코드 자체가 동적으로 생성되는 것이라 소스보기를 해서는 og:url 값 확인이 어려웠다.

만약 사이트의 규모가 커서 크롤링으로 메타정보가 맞게 들어가있나 확인을 해야한다거나 하면 그 떄는 og:url이 빈 값으로 보이게 된다는 뜻이다.

그러나 내가 관리하는 홈페이지는 규모가 그렇게 크지도 않고, 메타정보가 맞게 들어갔나 확인할 사람도 나뿐이라 이렇게 적용해도 크게 상관이 없었다. og:image만 잘 보이면 되니까.