반업주부의 일상 배움사

[Vue.js] 페이지 렌더링 후의 이미지를 페이스북에 공유하고 싶다면 본문

IT 인터넷/Vue.js

[Vue.js] 페이지 렌더링 후의 이미지를 페이스북에 공유하고 싶다면

Banjubu 2020. 6. 26. 16:06
반응형

 

사이트에 Vue.js를 쓰고 있어요.

SSR(서버 사이드 렌더링)은 적용 안 한 상태라 페이스북에서 index.html에 있는 내용만 읽어가다보니 사이트가 렌더링 된 후에 스크립트로 변경하는 것들은 적용이 안 되요.

즉, 페북은 정적 페이지만 읽는다는 뜻이에요. (script 태그 무시)

https://developers.facebook.com/tools/debug

 

공유 디버거 - Facebook for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. �

developers.facebook.com

 

그래서 찾아보니 vue-meta 라는게 있던데요.

이것도 SSR이 아닌 상황에서는 효과가 없어요.

 

그래서 PHP로 아래와 같이 별도로 SSR 페이지를 만들었어요.

public function facebookShare()
{
    $link = input_get('link');
    $img = input_get('img');
    
    echo '<html><head><meta property="og:title" content="painterus" /><meta property="og:description" content="painterus" /><meta property="og:type" content="website" /><meta property="fb:app_id" content="{페북아이디넣으세요}"/><meta property="og:image" content="'.$img.'" /><script>location.replace("'.$link.'");</script></head></html>';
}

 

페북은 정적 태그들만 읽기 때문에 페이지가 이동하지는 않아요.

하지만 사용자가 링크를 클릭하면 해당 페이지로 이동하죠.

 

 

반응형
LIST
저작자표시 비영리 변경금지

'IT 인터넷 > Vue.js' 카테고리의 다른 글

Vue.js 페이지 이동 중 NavigationDuplicated 에러가 난다면?  (0) 2020.06.05
'IT 인터넷/Vue.js' Related Articles more
Comments