<div id="readability-page-1" class="page"><div><h2 id="og-tag를-동적으로-바꿀-수-있는가">og tag를 동적으로 바꿀 수 있는가?</h2>
<p><strong>CSR 방식에선 불가능하다.</strong><br>
CSR은 브라우저에서 컨텐츠가 렌더링된다.<br>
공유한 SNS에서는 렌더링자체를 진행하지 않기떄문에, 렌더링 되기전의 document의 meta 내용을 참조하게된다.</p>
<p>브라우저에서 별도의 액션을 통해 meta 내용을 바꾸도록 구현한다 한들, 애초에 브라우저에 올라가질않으니 무용지물이 된다.</p>
<p><strong>SSR 방식에선 가능하다.</strong><br>
og tag에 동적으로 넣고자하는 내용을 웹서버(=렌더링서버)에 넘겨줘야한다.<br>
넘기는 형태는 쿼리스트링이나 혹은 동적파라미터가 될 수 있다.</p>
<p>nextjs 를 사용한다면, html 코드를 og image로 활용할 수도 있다.</p>
<ul>
<li>참고<br>
- <a href="https://dev.to/inthepocket/dynamic-open-graph-images-with-nextjs-jg7">https://dev.to/inthepocket/dynamic-open-graph-images-with-nextjs-jg7</a><br>
- <a href="https://kyounghwan01.github.io/blog/React/next/dynamic-meta/#getinitalprops%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7-%E1%84%80%E1%85%A1%E1%86%B9-%E1%84%87%E1%85%A1%E1%86%AE%E1%84%8B%E1%85%A1%E1%84%8B%E1%85%A9%E1%84%80%E1%85%B5">https://kyounghwan01.github.io/blog/React/next/dynamic-meta/#getinitalprops%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7-%E1%84%80%E1%85%A1%E1%86%B9-%E1%84%87%E1%85%A1%E1%86%AE%E1%84%8B%E1%85%A1%E1%84%8B%E1%85%A9%E1%84%80%E1%85%B5</a></li>
</ul></div></div>

ginameee.log

Jangchun Lee

og tag를 동적으로 바꿀 수 있는가?
CSR 방식에선 불가능하다.
CSR은 브라우저에서 컨텐츠가 렌더링된다.
공유한 SNS에서는 렌더링자체를 진행하지 않기떄문에, 렌더링 되기전의 document의 meta 내용을 참조하게된다.
브라우저에서 별도의 액션을 통해 meta 내용을 바꾸도록 구현한다 한들, 애초에 브라우저에 올라가질않으니 무용지물이 된다.
SSR 방식에선 가능하다.
og tag에 동적으로 넣고자하는 내용을 웹서버(=렌더링서버)에 넘겨줘야한다.
넘기는 형태는 쿼리스트링이나 혹은 동적파라미터가 될 수 있다.
nextjs 를 사용한다면, html 코드를 og image로 활용할 수도 있다.
참고
https://dev.to/inthepocket/dynamic-open-graph-images-with-nextjs-jg7
https://kyounghwan01.github.io/blog/React/next/dynamic-meta/#getinitalprops%E1%84%85%E1%85%B3%E1%86%AF-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%8B%E1%85%A7-%E1%84%80%E1%85%A1%E1%86%B9-%E1%84%87%E1%85%A1%E1%86%AE%E1%84%8B%E1%85%A1%E1%84%8B%E1%85%A9%E1%84%80%E1%85%B5

2023.01.17

댓글