Next.js 다이나믹 메타 태그 넣기

Nextjs 2022. 7. 10. 21:36

저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다.

(메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다)

https://jisoo-log.tistory.com/18

Next.js 정적, 동적 사이트맵 만들기

갑작스레 전혀 모르는 프로젝트의 사이트맵을 만드는 업무를 하게 됐다. 처음에는 사이트맵이 무엇인지도 몰라서 급하게 리서치를 했다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파

jisoo-log.tistory.com

메타 태그란?

웹페이지에서 element 를 열어보면 <head> 태그 안에 <meta> 라는 태그가 있는 것을 볼 수 있다.

<meta> 는 웹페이지의 메타 데이터를 담기 위한 태그이다. 메타 데이터란 데이터에 대한 데이터이다.

예를 들어, 방금 위에 내 이전 글을 복사 붙여넣기 하면 자동으로 그림과, 제목, 내용으로 구성된 하나의 박스가 생긴다.

저 링크 글에 들어가서 검사(inspect)를 통해 element 탭에서 <head> 를 열어서 <meta> 를 찾아보자. 그러면 저 박스 내용이 전부 들어있다는 것을 알 수 있다.

마찬가지로 우리가 카톡에서 어떤 링크를 공유할때 자동으로 썸네일과 제목이 아래 생기는 것은 메타태그를 통해 얻은 정보를 보여주는 것이다. 프로그램마다 이 형태는 조금씩 다를 수 있다. 메타 태그는 공유할때 미리보기 정보를 제공해줄 뿐만 아니라, 더 중요한 건 검색엔진에게 웹페이지의 정보를 제공해서 검색에 도움을 준다.

다이나믹 메타 태그?

다이나믹 메타 태그는 페이지 별 키워드 정보를 검색엔진에게 제공하기 위해 페이지 내용을 활용한 메타 태그를 넣는 것이다.

한 웹페이지 내에는 타고 들어가면 다양한 페이지가 있기 때문에 그 각각에 맞는 키워드들을 보여주고 싶기 때문이다. 지금 내 블로그 메인에 가면 메타 정보에 '작은 성공 모으기' 라는 블로그명이 타이틀로 뜨는데, 내 각각 다른 글을 공유했을때 전부 블로그 제목을 타이틀로 쓴다면 검색엔진이 글에 대한 정보를 얻기가 어려울 것이다.

Next.js에서 다이나믹 메타 태그 만들기

서론이 길었다. Nextjs에서 다이나믹 메타 태그를 만들려면 중요한 것이 있다. 바로 getServerSideProps를 활용해야한다는 것이다.

처음에 삽질을 한 부분이, 어찌됐건간에 localhost 로 웹페이지를 열어봤을때 element탭에서 봤을때 meta 태그가 적용되어 있으면 된거라고 생각했다. 그래서 page에서 데이터를 받아오고 난 이후 내용을 title이나 description에 넣어줬는데, 막상 카톡에 링크를 넣어보니 메타태그가 텅텅 비어있었다. 알고보니 메타 태그 내에는 static한 값만 넣을 수 있다고 한다. ~~역시 뭐든 대충하려고 하면 제대로 되는 법이 없다..~~

만약 넣고싶은 title이나 description이 고정된 내용이라면 그냥 <Head>를 사용해서 넣으면 끝이다. (왕편리한 next/head)

import Head from "next/head";

export default function SomePage() {
  return (
    <>
      <Head>
      	<title>제목</title>
        <meta name='description' content='이 웹페이지에 대한 설명 넣기'/>
        <meta name='keywords' content='넣고, 싶은, 키워드들'/>
      </Head>
      <div>meta tag</div>
    </>
  );
}

하지만 아래와 같은 방식으로 하면 메타태그가 비어있는 참사(?)가 일어난다.

import Head from 'next/head';
import { map } from 'lodash';

export default function VideoPage() {
  const { video } = useMeQuery({ id }); // 서버 통신 코드 가정
  const getKeywords = (keywords) => {
    return map(keywords, 'keywordName').join(', ');
  };
  return (
    <>
      <Head>
        <title>{video.name}</title>
        <meta name="description" content={video.desc} />
        <meta name="keywords" content={getKeywords(video.keywords)} />
      </Head>
      <div>dynamic meta tag</div>
    </>
  );
}

그래서 이렇게 고쳐줘야 한다.

import Head from 'next/head';
import { map } from 'lodash';

export default function VideoPage({ video }) {
  const getKeywords = (keywords) => {
    return map(keywords, 'keywordName').join(', ');
  };
  return (
    <>
      <Head>
        <title>{video.name}</title>
        <meta name="description" content={video.desc} />
        <meta name="keywords" content={getKeywords(video.keywords)} />
      </Head>
      <div>dynamic meta tag</div>
    </>
  );
}

export const getServerSideProps = async (context) => {
  const { id } = context.query;
  const initialData = await fetcher(GetVideo, { id })(); // 서버 통신 코드 가정
  return {
    props: { video: initialData },
  };
};

참고로 getServerSideProps 함수에서 context를 통해 url의 param 값이나 query 값을 가지고 데이터를 받아오는데 활용할 수 있다. (Nextjs 를 거의 안써봐서 이마저도 제대로 몰랐다.)

코드는 가상으로 적은거니 참고만 하시길!

덧붙이는 말

한 가지 구현 방법일뿐 꼭 이게 정답은 아니다. getInitialProps를 사용해도 되는걸로 알지만, 현재 프로젝트에 getServerSideProps 코드가 이미 있었어서 가져다 사용했다.
<meta> 내에 key를 사용하면 같은 key의 경우에 새로 이동한 페이지 내에 설정한 <meta> 값으로 대체된다. (좋은 방법은 아닌것 같다.)
위에 이어서, 아예 메타 태그용 컴포넌트를 하나 만들어둔 후 title, description 값 등을 props로 받아서 사용한다면 꼬일 일이 없을 것 같다.
ngrok을 사용해서 https 주소를 얻으면 쉽게 여기저기 붙여넣어서 테스트가 가능하다. (처음에는 잘 몰라서 테스트 한답시고 바로 배포해버렸다.)
현재 웹페이지에 메타태그가 제대로 들어가 있는지 궁금하다면, 현재 적용된 메타태그를 체크해주는 웹페이지들이 많으니 검색해서 사용하면 된다. 나는 이 페이지에서 확인했다.

잘 모르는 부분을 구현하려니 정말 답답한 부분이 많았다. 특히 초반에 급하게 주먹구구식으로 대응하느라 일이 더 커지는 느낌이다. 메타태그 내용을 컴포넌트로 빼는 부분도 나중에 한번 해봐야 할 것 같다. 처음엔 당장 구현해야한다는 압박감에 안보였는데, 이제보니 우아한 방법들이 보인다. 경험이 역시 자산이 된다.

참고링크

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

next.js meta tag 동적 content 할당하기

next.js meta tag 동적 content 할당하기, react, seo, ssr

kyounghwan01.github.io

https://blog.virenmohindra.me/p/dynamically-generating-meta-tags

Dynamically Generating Meta Tags in Next.js

Search Engine Optimization in a Server Side Rendering Progress Web Application

blog.virenmohindra.me

'Nextjs' 카테고리의 다른 글

[SEO] VideoObject 스키마 마크업을 통해 구글에 동영상 노출하기 (0)	2022.10.02
[SEO] Canonical tag(캐노니컬 태그, 대표URL)과 중복 콘텐츠 이슈 (0)	2022.09.04
Next.js 정적, 동적 사이트맵 만들기 (0)	2022.06.26
Next.js 와의 첫 만남 (CSR vs SSR) (0)	2021.09.26

ABOUT ME

작은 성공 모으기 작은 성공 모으기

메타 태그란?

다이나믹 메타 태그?

Next.js에서 다이나믹 메타 태그 만들기

덧붙이는 말

참고링크

'Nextjs' 카테고리의 다른 글

티스토리툴바

ABOUT ME

메타 태그란?

다이나믹 메타 태그?

Next.js에서 다이나믹 메타 태그 만들기

덧붙이는 말

참고링크

'Nextjs' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바