반업주부의 일상 배움사
[Vue.js] 페이지 렌더링 후의 이미지를 페이스북에 공유하고 싶다면 본문
반응형
사이트에 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 |
|---|
Comments