<div id="readability-page-1" class="page"><div id="dkContent" role="main">

					

					
						<h2>강디너의 개발 일지</h2>
					

					
						


						
							
							
							<div> React.js에서 타이틀, 설명 등 SEO 구색을 어느 정도 맞추기 위해서는 react-helmet 이란 라이브러리를 사용합니다.
Next.js에서도 그럼 헬멧을 사용해야하나 ? 라는 의문에서 조사를 시작했습니다.

구글에서는 이제 SPA방식의 웹사이트도 어느 정도 크롤링 잘해주지만 특정 페이지의 title, og image 등을 바꾸기 위해 스크립트를 통해서 수정합니다. (카톡, 페이스북 공유 등.)
<a href="https://jeonghwan-kim.github.io/dev/2020/08/15/react-helmet.html" target="_blank" rel="noopener">react-helmet 동작 방식</a>

Next.js는 조금 다릅니다.
SSR 방식이기 때문에 굳이 렌더링 이후, 스크립트를 통해서 meta tag들을 바꾸지 않아도 됩니다.
렌더링 할 때 meta tag를 넣어서 렌더링 해주면 되기 때문입니다.


Next.js에서는 편리하게&nbsp; 지정할 수 있도록 next/head 라고 지원해줍니다. <a href="https://nextjs.org/docs/api-reference/next/head" target="_blank" rel="noopener">공식문서</a>

아래 코드는 API에서 받아온 데이터를 이용해서 meta tag에 title을 동적으로 넣었습니다.
<pre id="code_1659167277016" data-ke-language="bash" data-ke-type="codeblock"><code>export const getServerSideProps: GetServerSideProps = async ({ params }) =&gt; {
 const result = await fetchPost(params?.id as string);

 return {
 props: result,
 };
};

const Posts: NextPage&lt;PostProps&gt; = ({
 contentHtml,
 title,
 date,
}) =&gt; {
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;{ title }&lt;/title&gt;
 &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
 &lt;/Head&gt;
 &lt;div&gt;
 &lt;h2&gt;{ title }&lt;/h2&gt;
 &lt;p&gt; { date }&lt;/p&gt;
 &lt;span dangerouslySetInnerHTML={{ __html: contentHtml }}&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;/&gt;
 );
};</code></pre>
<figure data-origin-width="1068" data-origin-height="557" data-ke-mobilestyle="alignCenter"><img src="https://blog.kakaocdn.net/dn/KhSHd/btrIzFMjY1M/Ug8PwhxnHO9MIfgfHlAeh0/img.png" data-ke-mobilestyle="alignCenter"></figure>

이건 특정 페이지에 메타 태그를 수정한 방법입니다.
모든 페이지에 각각 넣어야한다면 매우 불편하겠죠???
방법이 다 있습니다.

custom document라는 것을 이용해서 전역 meta tag를 지정할 수 있습니다. <a href="https://nextjs.org/docs/advanced-features/custom-document" target="_blank" rel="noopener">공식문서</a>
(create-next-app으로 만들었는데, _document가 없어서 생성했습니다.)

_app 은 가장 먼저 실행되는 컴포넌트입니다.
<ul data-ke-list-type="disc">
<li>공통 레이아웃, global css 등 페이지에 적용할 공통 속성을 적용하는 컴포넌트.</li>
</ul>

_document는 HTML Document를 커스텀할 때 사용합니다.
<ul data-ke-list-type="disc">
<li>웹 접근성 관련 태그 설정(메타 태그 등)</li>
<li>head, body 등을 커스터마이징 할 때 사용</li>
</ul>
주의사항으로는 head를 설정할 때 next/document의 Head를 사용해야 합니다.

_app.tsx -&gt; 해당 페이지 -&gt; _document.tsx 순서로 렌더링 됩니다. (_app 다음에 _document가 렌더링 되는 줄 알았는데..)

<figure data-origin-width="339" data-origin-height="165" data-ke-mobilestyle="alignCenter"><img src="https://blog.kakaocdn.net/dn/bdMDO0/btrItln7GhM/KEkILcy32nkzpnwHqnkwV0/img.png" data-ke-mobilestyle="alignCenter"></figure><figure><span data-url="https://blog.kakaocdn.net/dn/dhIzjf/btrIvSmcaf0/AksqG5pKkulhhASsMTpUtk/img.png" data-lightbox="lightbox" data-origin-width="507" data-origin-height="113" data-is-animation="false" data-widthpercent="40.39"><img src="https://blog.kakaocdn.net/dn/dhIzjf/btrIvSmcaf0/AksqG5pKkulhhASsMTpUtk/img.png"><span data-url="https://blog.kakaocdn.net/dn/bjLXNS/btrIy9sZgZO/RuNPtxZck8XEc5kXBWJSG1/img.png" data-lightbox="lightbox" data-origin-width="535" data-origin-height="157" data-is-animation="false" data-widthpercent="30.68"><img src="https://blog.kakaocdn.net/dn/bjLXNS/btrIy9sZgZO/RuNPtxZck8XEc5kXBWJSG1/img.png"><span data-url="https://blog.kakaocdn.net/dn/bvg8Ms/btrIxS6mWbU/kNVnF1fxKQkCixdKD5cFv1/img.png" data-lightbox="lightbox" data-origin-width="392" data-origin-height="122" data-is-animation="false" data-widthpercent="28.93"><img src="https://blog.kakaocdn.net/dn/bvg8Ms/btrIxS6mWbU/kNVnF1fxKQkCixdKD5cFv1/img.png"></figure><figure data-origin-width="638" data-origin-height="150" data-ke-mobilestyle="alignCenter"><img src="https://blog.kakaocdn.net/dn/bcPvzc/btrIxvwKRNg/SrjgNyaknLrYMEWINbcVdk/img.png" data-ke-mobilestyle="alignCenter"></figure>

그러면 저희는 메타 태그를 설정하기 위해서 _document를 커스터마이징 해야겠죠??
<pre id="code_1659173219288" data-ke-language="bash" data-ke-type="codeblock"><code>import { Html, Head, Main, NextScript } from 'next/document'

const Document = () =&gt; {
 return (
 &lt;Html lang="ko"&gt;
 &lt;Head&gt;
 &lt;meta name="description" content="Document의 메타태그" /&gt;
 &lt;/Head&gt;
 &lt;body&gt;
 &lt;Main /&gt;
 &lt;NextScript /&gt;
 &lt;/body&gt;
 &lt;/Html&gt;
 )
}

export default Document;</code></pre>

<figure><span data-url="https://blog.kakaocdn.net/dn/0LTtl/btrIxS6ndkw/camIDHgDiPGke77KBZcIHk/img.png" data-lightbox="lightbox" data-origin-width="927" data-origin-height="372" data-is-animation="false" data-widthpercent="44.99"><img src="https://blog.kakaocdn.net/dn/0LTtl/btrIxS6ndkw/camIDHgDiPGke77KBZcIHk/img.png"><span data-url="https://blog.kakaocdn.net/dn/bWumfK/btrIx0X6vfs/CdTTH5EKPQS4VaIzdFl7X0/img.png" data-lightbox="lightbox" data-origin-width="853" data-origin-height="280" data-is-animation="false" data-widthpercent="55.01"><img src="https://blog.kakaocdn.net/dn/bWumfK/btrIx0X6vfs/CdTTH5EKPQS4VaIzdFl7X0/img.png"></figure>
전역 메타 태그가 잘 설정되어있는 것을 볼 수 있습니다.

<h4 data-ke-size="size20">여기서 궁금증 !</h4>
만약 전역에서 메타 태그를 선언하고, 각 페이지에서 해당 메타 태그를 중복으로 선언하면 어떻게 될까 궁금하지 않으신가요 ?
title을 전역에 한번 설정해보려고 했는데,,,
<figure data-origin-width="666" data-origin-height="336" data-ke-mobilestyle="alignCenter"><img src="https://blog.kakaocdn.net/dn/bttqwu/btrIwIjn004/HKggdgzo5X8XsNRWQcLxxk/img.png" width="424" height="214" data-ke-mobilestyle="alignCenter"><figcaption>타이틀은 Page에서 사용하라고 알려주네요 !</figcaption></figure>

description을 중복으로 넣어봤습니다.
각 페이지 -&gt; _document 순으로 렌더링 되기 때문에 전역의 description이 overide 될 것 같아 보입니다.
<pre id="code_1659173964987" data-ke-language="bash" data-ke-type="codeblock"><code>const Posts: NextPage&lt;PostProps&gt; = ({
 id,
 contentHtml,
 title,
 date,
}) =&gt; {
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;{ title }&lt;/title&gt;
 &lt;meta name="description" content={`${title}이 들어가있어요`} /&gt;
 &lt;meta name="viewport" content="initial-scale=1.0, width=device-width" /&gt;
 &lt;/Head&gt;
 &lt;div&gt;
 &lt;h2&gt;{ title }&lt;/h2&gt;
 &lt;p&gt; { date }&lt;/p&gt;
 &lt;span dangerouslySetInnerHTML={{ __html: contentHtml }}&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;/&gt;
 );
};</code></pre>
<figure data-origin-width="1182" data-origin-height="386" data-ke-mobilestyle="alignCenter"><img src="https://blog.kakaocdn.net/dn/GRagb/btrIA12McGr/6oiYHEsuhKrxcbQuCsIQ80/img.png" data-ke-mobilestyle="alignCenter"></figure>

하지만 예상을 깨고 그냥 두 번 선언되는 것을 볼 수 있습니다.
나중에 크롤링하게 되면 어떤 것을 보여줄지는 잘 모르겠네요. (먼저 선언된 것을 읽으려나...)


참고 글
<a href="https://velog.io/@woodong/2.-app.tsx-%EC%99%80-document.tsx" target="_blank" rel="noopener">_app.tsx 와 _documents.tsx</a>
<a href="https://merrily-code.tistory.com/154" target="_blank" rel="noopener">Next.js의 _document와 _app에 대하여</a>
</div>
						
							<img src="https://tistory4.daumcdn.net/tistory/2781910/skin/images/giveMe.png" alt="커피한잔...">
							
							

							
								
							

							


						
					

					

					

					

					

					

					
						
					
				</div></div>

강디너의 개발 일지

React.js에서 타이틀, 설명 등 SEO 구색을 어느 정도 맞추기 위해서는 react-helmet 이란 라이브러리를 사용합니다.
Next.js에서도 그럼 헬멧을 사용해야하나 ? 라는 의문에서 조사를 시작했습니다.
 
구글에서는 이제 SPA방식의 웹사이트도 어느 정도 크롤링 잘해주지만 특정 페이지의 title, og image 등을 바꾸기 위해 스크립트를 통해서 수정합니다. (카톡, 페이스북 공유 등.)
react-helmet 동작 방식
 
Next.js는 조금 다릅니다.
SSR 방식이기 때문에 굳이 렌더링 이후, 스크립트를 통해서 meta tag들을 바꾸지 않아도 됩니다.
렌더링 할 때 meta tag를 넣어서 렌더링 해주면 되기 때문입니다.
 
 
Next.js에서는 편리하게  지정할 수 있도록 next/head 라고 지원해줍니다. 공식문서
 
아래 코드는 API에서 받아온 데이터를 이용해서 meta tag에 title을 동적으로 넣었습니다.
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
 const result = await fetchPost(params?.id as string);
 return {
 props: result,
 };
};
const Posts: NextPage<PostProps> = ({
 contentHtml,
 title,
 date,
}) => {
 return (
 <>
 <Head>
 <title>{ title }</title>
 <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 </Head>
 <div>
 <h2>{ title }</h2>
 { date }
 
 </div>
 </>
 );
};
 
이건 특정 페이지에 메타 태그를 수정한 방법입니다.
모든 페이지에 각각 넣어야한다면 매우 불편하겠죠???
방법이 다 있습니다.
 
custom document라는 것을 이용해서 전역 meta tag를 지정할 수 있습니다. 공식문서
(create-next-app으로 만들었는데, _document가 없어서 생성했습니다.)
 
_app 은 가장 먼저 실행되는 컴포넌트입니다.
공통 레이아웃, global css 등 페이지에 적용할 공통 속성을 적용하는 컴포넌트.
 
_document는 HTML Document를 커스텀할 때 사용합니다.
웹 접근성 관련 태그 설정(메타 태그 등)
head, body 등을 커스터마이징 할 때 사용
주의사항으로는 head를 설정할 때 next/document의 Head를 사용해야 합니다.
 
_app.tsx -> 해당 페이지 -> _document.tsx 순서로 렌더링 됩니다. (_app 다음에 _document가 렌더링 되는 줄 알았는데..)
 
 
그러면 저희는 메타 태그를 설정하기 위해서 _document를 커스터마이징 해야겠죠??
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => {
 return (
 <Html lang="ko">
 <Head>
 <meta name="description" content="Document의 메타태그" />
 </Head>
 <body>
 <Main />
 <NextScript />
 </body>
 </Html>
 )
}
export default Document;
 
전역 메타 태그가 잘 설정되어있는 것을 볼 수 있습니다.
 
여기서 궁금증 !
만약 전역에서 메타 태그를 선언하고, 각 페이지에서 해당 메타 태그를 중복으로 선언하면 어떻게 될까 궁금하지 않으신가요 ?
title을 전역에 한번 설정해보려고 했는데,,,
 
description을 중복으로 넣어봤습니다.
각 페이지 -> _document 순으로 렌더링 되기 때문에 전역의 description이 overide 될 것 같아 보입니다.
const Posts: NextPage<PostProps> = ({
 id,
 contentHtml,
 title,
 date,
}) => {
 return (
 <>
 <Head>
 <title>{ title }</title>
 <meta name="description" content={`${title}이 들어가있어요`} />
 <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 </Head>
 <div>
 <h2>{ title }</h2>
 { date }
 
 </div>
 </>
 );
};
 
하지만 예상을 깨고 그냥 두 번 선언되는 것을 볼 수 있습니다.
나중에 크롤링하게 되면 어떤 것을 보여줄지는 잘 모르겠네요. (먼저 선언된 것을 읽으려나...)
 
 
참고 글
_app.tsx 와 _documents.tsx
Next.js의 _document와 _app에 대하여

Next Head에 관하여...

댓글