TIL 21.10.19

그때그시절·2021년 10월 19일
0

어떤 포스트의 페이지를 트위터, 페이스북 또는 카카오톡에 공유할 때,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'" />

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" });
        }
        
      }
    }
 )

https://{siteurl}/onGetSharePostPage?postId=b0c6f2c0
공유 url 을 위의 firebase function access 주소로 하면 동적으로 open graph 가 적용이 되어 이미지, 타이틀, description 등이 노출이 된다.

0개의 댓글