어떤 포스트의 페이지를 트위터, 페이스북 또는 카카오톡에 공유할 때,url 주소 뿐만 아니라, 이미지, 타이틀 ,
설명( description) 이 보여야 해서 Open Graph 를 적용하였다.
해당 페이지의 이미지,타이틀이 동적이라, 서버 사이드 렌더링이 되어야 해서 firebase function 을 이용해서
html
페이지를 만들어서 반환하도록 하였다.
해당 firebase function 에서 return 해주는 thml 은 Open Graph 를 목적으로 하는 페이지이므로 해당 페이지에 access 하면,
redirection 하도록 설정을 해주었다.
<meta http-equiv="refresh" content="0;URL='https://dev.manboo.io/post/${postId}?type=publishPost'" />
const cors = require("cors")({ origin: true });
exports.onGetSharePostPage = functions.https.onRequest(
async (request, response) => {
// cors 에러로 cors 해결을 위해서
cors(request,response) => {
let postId = request.query.postId;
try {
const thumbnail = await getThumbnailUrl(postId);
const post = await getPost(postId);
const msg = `
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="${post.title}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="${
post.tags ?? "https://www.dev.manboo.io"
}">
<meta property="og:url" content="https://dev.manboo.io/post/${postId}?type=publishPost" />
<meta property="og:image" content="${thumbnail}" />
<meta property="og:image:width" content="690" />
<meta property="og:image:height" content="388" />
<meta property="og:site_name" content="ManBoo">
<meta property="fb:app_id" content="3863738813731038">
<meta http-equiv="refresh" content="0;URL='https://dev.manboo.io/post/${postId}?type=publishPost'" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="${post.title}">
<meta name="twitter:description" content="${
post.tags ?? "https://www.dev.manboo.io"
}">
<meta property="twitter:image" content="${thumbnail}" />
<div>
<p>페이지 이동중...</p>
</div>
</head>
</html>`
response.send(200).send(msg);
} catch (e) {
response.status(400).send({ error: "post get fail" });
}
}
}
)
https://{siteurl}/onGetSharePostPage?postId=b0c6f2c0
공유 url 을 위의 firebase function access 주소로 하면 동적으로 open graph 가 적용이 되어 이미지, 타이틀, description 등이 노출이 된다.