Nextjs SEO(검색엔진최적화) - Meta tags

오늘은 메타태그 설정을 통해 SEO에 영향을 미치는 요소를 알아보도록 할게요!

모든 내용은 mdn web docs의 내용을 기반으로 설명할테니 하단 레퍼런스도 참고해주세요.

 

예시는 저의 프로젝트 사이트인 문제은행 Exambomb에서 확인할 수 있어요!

https://exam-bomb-service.vercel.app/

기사 필/실기 문제은행(기출문제, 시험) | Exam Bomb.

 

 

Meta Tittle

먼저 타이틀에 대한 설명이에요.

1. 페이지 제목은 SEO에 큰 영향을 줍니다. 권장사항으로는 15자 이내로 유저의 주목을 이끌수 있는 "훅"이 바로 이 부분입니다. 유저의 검색으로 노출될 수 있는 최적의 멘트를 적어보세요!
2. HTML <title> 요소는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.
3. 아래 SERP에 잡히는 첫 부분이 메타타이틀에 해당됩니다.

메타 타이틀은 아래와 같은 방법으로 적용할 수 있어요, 

<title>기사 필/실기 문제은행(기출문제, 시험) | Exam Bomb.</title>

 

 

저는 최근에 기존 '정보처리기사필기 문제은행 서비스 (필기, 실기, 기출문제, 문제은행, 모의고사) Exam Bomb.' 라는 메타 타이틀이었어요. 하지만 하단 검색 유입을 통해 생각보다 "기사, 시험 , 문제은행" 이 3개의 키워드를 통해 많이 유입된다고 생각했어요.

물론 또 다시 테스트를 진행해봐야겠지만, 최적의 타이틀을 찾기 위해 주기적으로 "훅"을 바꿔가며 체크해보면 좋을것 같네요.

 

Meta Description

다음은 Description에 대한 설명이에요.

1. MDN : 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용합니다.
2. title과는 다르게 meta 태그에서 name="description" 특성을 데이터 이름으로, content 특성을 값으로 하여 제공합니다.
3. 아래 SERP에 잡히는 하단 부분이 메타 디스크립션에 해당됩니다.

메타 디스크립션은 아래와 같은 방법으로 적용할 수 있어요, 

<meta name="description" content="기사 필/실기 시험대비 문제은행을 제공해요. 기출문제, 시험 등 다양한 문제가 준비됐어요."/>

 

위의 사진을 보면 알겠지만, 검색에서 가장 영향을 많이 받는 부분이 타이틀 다음으로 디스크립션임을 확인할 수 있어요.(물론 디스크립션이 영향을 많이 받는다고 하지만 내부 컨텐츠와 구조에 따라 영향도가 적어질 수 있어요. 이 부분은 기회가 된다면 추가로 다뤄보도록 할게요 ㅎㅎ)

쨋든, 당장 눈 앞에 보이는 저 부분이 두번째로 영향력이 큰 디스크립션이니 이 부분도 적절히 이목을 끌 "훅"을 선택해주시면 좋을 것 같아요!

 

Meta keyword

다음은 키워드에 대한 설명이에요.

1. MDN : 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.
2. description을 적용하듯이 meta 태그에서 name="keywords" 특성을 데이터 이름으로, content 특성을 값으로 하여 제공합니다.
3. 이 부분은 SERP에는 보이지 않지만, 내 웹사이트에 어떠한 내용을 담고 있는지에 대해 제공한다고 생각하면 됩니다. 하지만 크게 중요하지는 않다고 생각하고 키워드로 인해 생기는 변화를 측정하기 어렵다고 생각해요.

그래도 적용법을 알아보면 디스크립션과 비슷하게 아래처럼 적용할 수 있어요

<meta name="keywords" content="문제은행, 기출문제, 정보처리기사필기, 정보보안기사, 컴퓨터활용능력 1급 필기, 정보처리기사실기"/>

 

Meta Author

마지막으론 저자에 대한 설명이에요.

1. MDN : 문서 저작자.
2. meta 태그에서 name="author" 특성을 데이터 이름으로, content 특성을 값으로 하여 제공합니다.
3. 이 부분은 SERP에는 보이지 않지만, 내 웹사이트에 어떠한 내용을 담고 있는지에 대해 제공한다고 생각하면 됩니다. 하지만 크게 중요하지는 않다고 생각하고 키워드로 인해 생기는 변화를 측정하기 어렵다고 생각해요.

<meta name="author" content="glory4god"/>

 

Nextjs Meta Tag

최종적으로 Nextjs에서 어떤식으로 적용하면 되는지 알아보도록 하며 마치도록 하겠습니다!

Nextjs에서는 어떤 페이지든 상관없이 NextHead라는 부분을 감싸서 선언하게 된다면 html의 head 부분에 적용되는 태그들을 만들수 있어요!

저 같은 경우는 아래처럼 적용하여 페이지 상단에 호출을 했어요! (물론 Metatag 컴포넌트로 관리하고 있는건 안비밀ㅎㅎ)

export default function Page() {
  return (
    <div>
      <NextHead>
        <title>기사 필/실기 문제은행(기출문제, 시험) | Exam Bomb.</title>
        <meta name="description" content="기사 필/실기 시험대비 문제은행을 제공해요. 기출문제, 시험 등 다양한 문제가 준비됐어요." />
        <meta name="keywords" content="문제은행, 기출문제, 정보처리기사필기, 정보보안기사, 컴퓨터활용능력 1급 필기, 정보처리기사실기" />
      </NextHead>
    </div>
  );
}

확실히 Nextjs가 정말 개발하기 편하게 만들어져있어서 좋긴합니다 ㅎㅎㅎ

 

---

이 외에도 여러가지가 있지만, 기본적으로 SERP에 잡히는 내용과 간단한 내용만 정리해봤어요!

다음은 open graph 메타태그를 정리하면서 og, twitter를 통해 공유 시에 나타나는 썸네일에 대한 정리를 공유하도록 할게요!

 

추가적인 질문이나 궁금점이 있으시다면 언제든지 댓글 남겨주시면 아는 선에서 답변드리겠습니다! ㅎㅎ

 

 

Reference : https://developer.mozilla.org/ko/docs/Web/HTML/Element/title