[Next.js] SEO

2023-09-29

Table of contents

What is SEO?

SEO는 Search Engine Optimization의 약자이다. SEO의 목적은 검색 엔진 결과에서 순위를 높이는 것이다. 순위가 높을수록 사이트에 대한 오가닉 트래픽이 증가하여 더 많은 비즈니스로 이어진다.

Why is SEO so important?

SEO는 전환율을 높이고 브랜드에 대한 신뢰도를 높이는 핵심 요소이다. 검색 순위가 높을수록 더 많은 방문자가 생긴다. 비즈니스에 있어 검색 엔진 오가닉 트래픽이 중요한 이유가 세 가지가 있다.

Qualitative

  • 일반적인 방문자가 고객으로 전환될 가능성이 높아진다.

Trustable

  • 더 높은 브랜드 신회성이 생긴다.

Low-Cost

  • 시간과 노력을 들이는 것 외에 검색 엔진 순위를 높일 수 있는 SEO를 활용하는 것은 비용이 들지 않는다.
  • 검색 결과에서 상위 노출되는 데 직접적인 비용이 들지 않는다.

Three Pillars of Optimization

Technical

  • 크롤링 및 웹 퍼포먼스를 위한 웹 사이트 최적화한다.

Creation

  • 특정 키워드를 타겟팅하는 컨텐츠 전략을 만든다.

Popularity

  • 검색 엔진이 신뢰할 수 있도록 사이트의 존재감을 높인다.

SEO 방법은 다양한 방법이 있지만 Next.js 개발자 기준으로 첫 번째는 사례를 통해 SEO에 적합하게 웹앱을 만드는 방법을 이해하는 것이다.

Search System

검색 시스템은 일반적으로 검색 엔진(구글, 빙, 네이버 등)이라고 부르는 시스템이다. 검색 엔진은 엄청나게 복잡한 시스템이다.

검색 시스템은 네 가지 주요 책임이 있다.

Crawling

  • 웹을 훑어가며 모든 웹사이트의 내용을 파싱하는 과정이다.
  • 이것은 사용 가능한 도메인이 3억 5천만 개가 넘기 때문에 방대한 작업이다.

Indexing

  • 크롤링 단계에서 수집된 모든 데이터를 저장할 위치를 찾아야 한다.
  • 이렇게 저장된 데이터는 나중에 액세스할 수 있게 된다.

Rendering

  • 페이지에 있는 JavaScript와 같은 리소스를 실행하여 기능을 향상시키고 콘텐츠를 풍부하게 만들기 위한 과정이다.
  • 모든 크롤링된 페이지에 대해 이 과정이 발생하는 것은 아니며, 때로는 콘텐츠가 실제로 인덱싱되기 전에 발생할 수 있다.
  • 렌더링은 때로는 인덱싱 후에 리소스를 수행할 수 없을 때에 발생할 수도 있습니다.

Ranking

  • 사용자 입력을 기반으로 관련된 결과 페이지를 만들기 위해 데이터를 쿼리하여 사용자의 의도를 충족시키는 최상의 답변을 제공하기 위한 다양한 랭킹 기준이 검색 엔진에 적용되는 단계이다.

Special Meta Tags for Search Engines

Meta robot tags는 검색 엔진이 항상 준수하는 지시사항이다. 이러한 로봇 태그를 추가하면 웹사이트의 색인화가 더 쉬워질 수 있다.

페이지 수준의 메타 태그에 대한 여러 옵션이 있지만, 일반적으로 사용되는 예시를 보자.

<meta name="robots" content="noindex,nofollow" />

robots 태그는 가장 흔하게 볼 태그 중 하나이다. 기본적으로 값이 "index,follow"로 설정되어 있으므로 별도로 지정할 필요가 없다. "all"도 유효한 대안이다.

<meta name="robots" content="all" />

위 예시처럼 로봇 태그를 "noindex,nofollow"로 설정하면 검색 엔진에 다음을 나타낸다.

  • 'noindex': 이 페이지를 검색 결과에 표시하지 않는다.
  • 'nofollow': 이 페이지의 링크를 따라가지 않는다. 이를 생략하면 로봇이 이 페이지의 링크를 크롤링하고 따라갈 수 있다.

Googlebot tag

<meta name="googlebot" content="noindex,nofollow" />

가끔 googlebot 태그도 볼 수 있다. 대부분의 경우 로봇 태그만으로 충분할 것이다. 하지만 googlebot 태그는 구글에 특화된 것이다. Googlebot을 위한 별도의 규칙과 나머지 검색 로봇을 위한 일반 규칙을 가지고 싶을 때 이 태그를 사용하면 된다.

Google Tags

nositelinkssearchbox

<meta name="google" content="nositelinkssearchbox" />

사용자가 사이트를 검색할 때 Google 검색 결과에는 가끔 특정 검색 상자와 사이트로의 링크가 함께 표시된다. 이 태그는 Google에게 이 사이트 링크 검색 상자를 표시하지 말라는 의미이다.

notranslate

<meta name="google" content="notranslate" />

Google이 사용자가 읽고자 하는 언어가 아닌 것을 인식하면, Google은 검색 결과에 번역 링크를 제공한다. 이를 원치 않는 경우에 이 태그를 사용하면 된다. 이 태그는 Google에게 페이지에 대한 번역을 제공하지 말라는 의미이다.

Example

다음은 위에서 설명한 태그를 이용한 예시 코드이다.

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Meta Tag Example</title>
        <meta name="google" content="nositelinkssearchbox" key="sitelinks" />
        <meta name="google" content="notranslate" key="notranslate" />
      </Head>
      <p>Here we show some meta tags off!</p>
    </div>
  );
}
 
export default IndexPage;

What are Canonical Tags?

카노니컬 URL은 검색 엔진이 웹사이트에서 중복된 페이지 집합에서 가장 대표적인 것으로 생각하는 페이지의 URL이다.

카노니컬 URL을 직접 검색 엔진에게 알릴 수 있지만, 검색 엔진은 알리지 않아도 여러 URL을 그룹화하기로 결정할 수도 있다. 이것은 Google이 여러 다른 경로에서 동일한 URL을 찾을 수 있는 경우 자동으로 발생할 수 있다.

Google은 위와 같은 상황을 처리하는 것이 잘 되어 있지만, Google의 시스템은 대규모로 동작하기 때문에 모든 예외 상황을 처리하지 못할 수 있다. 카노니컬 태그는 웹사이트의 우수한 성능을 보장하기 위해 중요하다.

Google은 동일한 내용을 가진 여러 개의 URL을 발견하면 중복으로 간주하여 검색 결과 순위에서 하락시키기로 결정할 수도 있다.

이것은 도메인 간에도 발생할 수 있으며, 두 개의 다른 웹사이트를 운영하고 모두 동일한 내용을 게시하는 경우 검색 엔진은 그 중 하나를 선택하여 순위를 매길 수도 있고, 두 웹사이트를 모두 하락시킬 수도 있다.

여기서 카노니컬 태그가 매우 유용하다. 이 태그를 사용하면 Google에게 어떤 URL이 진짜 URL이고 어떤 것이 중복된 것인지 알려줄 수 있다. 동일하거나 다른 도메인에서 중복된 페이지가 많으면 낮은 검색 순위로 인식할 수 있다.

예를 들어, 우리의 전자상거래 쇼핑몰이 제품을 example.com/products/phone 및 example.com/phone을 통해 접근할 수 있게 했다고 가정해보자.

두 가지 URL은 모두 유효하고 문제 없이 동작하지만, 카노니컬 태그를 사용해 중복 콘텐츠의 감지를 방지할 수 있다. 만약 https://example.com/products/phone을 순위에 고려하도록 결정했다면 다음과 같이 카노니컬 태그를 생성할 것이다.

<link rel="canonical" href="https://example.com/products/phone" />

카노니컬 태그는 SEO 성능에서 중요한 역할을 한다. 우리도 여러 URL을 생성할 수 있지만, 사용자나 마케팅 도구도 여러 URL을 생성할 수 있기 때문이다.

URL Structure

URL 구조는 SEO 전략의 중요한 부분이다. Google은 SEO의 각 부분에서 어느 정도의 가중치를 부여하는지는 공개하지 않았지만, 훌륭한 URL은 최종적으로 크거나 작은 순위 요소인지와 관계없이 모범 사례로 간주된다.

URL 구조는 다음과 같은 원칙을 따른다.

Sementic

의미가 있는 URL을 사용하는 것이 가장 좋다. 즉, ID나 무작위 숫자 대신 단어를 사용하는 것이 좋다.

  • 예) /learn/basics/create-nextjs-app은 /learn/course-1/lesson-1보다 더 좋다.

Patterns that are logical and consistent

URL은 페이지 간에 일관된 패턴을 따라야 한다. 예를 들어, 각 제품마다 다른 경로를 가지는 것보다 모든 제품 페이지를 그룹화하는 경로를 가지는 것이다.

Keyword focused

Google은 여전히 웹사이트에 포함된 키워드를 기반으로 하는 시스템이다. 페이지의 목적을 이해하기 쉽게 하려면 URL에 키워드를 사용하는 것이 좋다.

Not parameter-based

URL을 만들 때 파라미터를 사용하는 것은 일반적으로 좋은 아이디어는 아니다. 대부분의 경우 파라미터는 의미론적이지 않으며, 검색 엔진이 이를 혼동하고 검색 결과에서 순위를 낮출 수 있다.

Metadata

메타데이터는 웹 사이트 콘텐츠의 개요로 웹 사이트의 제목, 설명 및 이미지를 부여하는 데 사용된다.

Title

title 태그는 두 가지 주요 이유로 가장 중요한 SEO 요소 중 하나이다.

  • 사용자가 검색 결과에서 웹 사이트를 대표해 표시되는 내용이다.
  • Google이 페이지의 내용을 이해하는 데 사용하는 주요 요소 중 하나이다. 제목에 키워드를 사용하는 것이 권장되며, 이것은 일반적으로 검색 엔진에서 개선된 순위를 보인다.
<title>콜로라도에서 iPhone 12 XS Max 할인 판매 - Apple</title>

이 페이지의 제목은 모든 주요 키워드를 포함하고 사용자에게 명확한 제안을 보여주기 떄문에 매력적인 제목으로 보인다. (할인)

Description

description 메타 태그는 또 다른 중요한 SEO 요소이지만 제목보다는 순위가 낮다. Google에 따르면 이 요소는 순위를 매기는 데 고려되지는 않지만 사용자들의 검색 결과에서 클릭률에 영향을 미칠 수 있다.

제목의 정보를 보완하기 위해 description 메타 태그를 사용한다. 제목에 맞지 않는 경우 여기에 추가 키워드를 넣으면 된다. 넣은 키워드는 사용자의 검색어에 포함되어 있으면 굵게 표시된다.

<meta
  name="description"
  content="iPhone 12 XR Pro 및 iPhone 12 Pro Max를 확인하고 전문가 조언을 받으세요."
/>
next.jsseo
프로필 사진
TaeWoo Kim
Junior Frontend Engineer