TIL 21.10.19
9407 ワード
Twitter、Facebook、またはKakaoTalkで記事のページを共有する場合は、URLアドレスだけでなく、画像、タイトル、
説明表示が必要なのでOpen Graphを適用しました.
このページの画像、タイトルはダイナミックで、サーバ側に表示する必要があるため、firebase関数を使用できます.
Firebase関数から返されるthmlは、Open Graph用のページであるため、このページにアクセスすると表示されます.
リダイレクトが設定されています.
共有urlを上のfirebase関数accessアドレスとして使用するとopen graphが動的に適用され、画像、タイトル、説明などが露出します.
説明表示が必要なのでOpen Graphを適用しました.
このページの画像、タイトルはダイナミックで、サーバ側に表示する必要があるため、firebase関数を使用できます.
htmlページを作成し、返却します.Firebase関数から返されるthmlは、Open Graph用のページであるため、このページにアクセスすると表示されます.
リダイレクトが設定されています.
直接Metake
<meta http-equiv="refresh" content="0;URL='https://dev.manboo.io/post/${postId}?type=publishPost'" />Firebase Functions
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" });
}
}
}
)共有urlを上のfirebase関数accessアドレスとして使用するとopen graphが動的に適用され、画像、タイトル、説明などが露出します.
Reference
この問題について(TIL 21.10.19), 我々は、より多くの情報をここで見つけました https://velog.io/@hy450/TIL-21.10.19テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol