검색엔진에 친화적인 사이트 구축하기(SEO)

브라우저

검색엔진에 친화적인 사이트 구축하기(SEO)

소이소 2025. 5. 8. 17:28

배경

회사에서 신규 서비스를 출시한 이후, 게시글 상세 페이지가 추가되면서 검색엔진 최적화 작업을 맡게 되었습니다.
검색엔진에 친화적인 사이트를 구축하면 검색 엔진에 자신의 사이트를 노출시켜 사용자 유입을 증가시킬 수 있습니다.

검색 엔진 사이트에서 게시글 상세 페이지가 노출되기 위해 진행한 작업은 다음과 같습니다.
만약 자신의 사이트가 검색 엔진 사이트에 잘 노출되지 않는다면 아래 사항들이 잘 적용되었는지 확인해보세요!

robots.txt 작성
sitemap.xml 작성
구글 serach console 등록
네이버 웹마스터 등록
(추가) 사이트 이동 경로(breadCrumb) 설정하기

도입

1. robots.txt 작성

인터넷 상에는 웹사이트 url에 접속하여 웹페이지를 수집하는 웹 크롤러의 일종인 웹 로봇이 있습니다. 이 웹 로봇들은 자동으로 동작하며 방문한 사이트의 정보를 수집해 검색엔진에 등록합니다. 적절한 robots.txt를 작성하면, 웹로봇들의 동작을 제어하여 원하는 문서만 검색엔진에 수집되도록 할 수 있습니다.

robots.txt 파일은 반드시 root에 위치해야 합니다.

• 예) http://www.example.com/robots.txt

User-agent 를 통해 로봇 종류를 명시하고 Disallow / Allow 속성을 통해 로봇의 수집 허용 유무를 표기합니다.

// robots.txt

// 모든 로봇의 수집을 허용하지 않음
User-agent: *
Disallow: /

// 네이버 로봇(Yeti)의 수집 허용
User-agent: Yeti
Allow: /

[대표적인 웹크롤러]

Bytespider : TikTok
GPTBot : OpenAI
Yeti : 네이버

웹크롤러가 수집할 수 있는 웹 페이지를 각각 명시적으로 표기할 수도 있습니다.

// robots.txt

// Yeti가 /users 페이지는 수집하지 않고 /playground, /notices 페이지 문서 정보만 수집합니다.
User-agent: Yeti
Disallow: /users

Allow: /playground
Allow: /notices

2. 사이트맵

사이트맵(sitemap)은 사이트 내의 수집 대상 URL 목록을 구조적으로 표기하여 웹 로봇에게 알려주는 XML 형식의 파일입니다.
웹 로봇은 사이트맵의 트리구조를 따라 사이트에 방문합니다. 새로운 페이지가 생성될 때 이를 사이트맵에 명시하면 웹 로봇이 해당 페이지들을 누락되지 않고 수집하게 도와줄 수 있습니다.

robots.txt에 sitemap.xml를 표기할 수 있습니다. 하나의 sitemap.xml 파일 내에는 최대 50,000개의 url을 포함할 수 있습니다. 50,000개 이상의 사이트맵 주소가 포함될 것을 대비하여, 사이트맵 주소를 담고있는 index 파일을 생성하고 그 내부에 세부 인덱스( sitemap1, sitemap2 … )를 가진 사이트맵을 생성합니다.

// robots.txt
Sitemap: https://example.com/sitemap/index.xml

// https://example.com/sitemap/index.xml

<?xml version="1.0" encoding="UTF-8"?>

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  // sitemap1
  <sitemap>
    <loc>http://www.example.com/sitemap/sitemap1.xml</loc>
    <lastmod>2016-02-26T18:41:07+09:00</lastmod>
  </sitemap>
  // sitemap2
  <sitemap>
    <loc>http://www.example.com/sitemap/sitemap2.xml</loc>
    <lastmod>2015-05-14T21:06:14+09:00</lastmod>
  </sitemap>
</sitemapindex>

// https://example.com/sitemap/sitemap1.xml

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/case/1</loc>
    <lastmod>2024-08-01T10:57:06+09:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>http://www.example.com/case/2</loc>
    <lastmod>2024-08-01T10:57:09+09:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

[sitemap 속성]

url : 페이지 url
lastmod : 마지막 수정 날짜
changefreq : 변경 주기
- always: 항상 변경
- hourly: 매시간 변경
- daily: 매일 변경
- weekly: 매주 변경
- monthly: 매월 변경
- yearly: 매년 변경
- never: 변경되지 않음
priority : 0에서 1사이의 페이지 우선순위
- 1.0-0.8: 높은 우선순위 ( 예 : 홈페이지와 같은 사이트의 주요 진입 페이지의 우선순위 1.0, 상품 페이지등 중요한 정보를 담고있는 페이지는 우선순위 0.8 )
- 0.7-0.4: 중간 우선순위
- 0.3-0.0: 낮은 우선순위

3. 검색 엔진 사이트 등록

robots.txt와 sitemap.xml 파일을 구글, 네이버와 같은 검색 엔진 사이트 사이트에 등록하면 더 빨리 웹 로봇에게 알려줄 수 있습니다.

구글 서치 콘솔 https://search.google.com/search-console/welcome?hl=ko
네이버 웹 마스터 도구 https://searchadvisor.naver.com/console/board

+ 추가) 사이트 이동 경로(breadCrumb)

구글과 네이버에 사이트를 노출할 때 상세 페이지의 계층 구조 설정하여 사이트 이동 경로를 사용자에게 보여줄 수 있습니다.

[구글 검색 화면]

구글 breadCrumb

[네이버 검색 화면]

네이버 breadCrumb

<head> 태그 안에 schema.org에서 정의한 BreadcrumbList 활용하는 예시입니다.
계층 구조가 넓은 범위( 예 : 음식 )부터 시작하여 좁은 범위 ( 예 : 여름 과일 )가 되도록 작성해야합니다.

<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "item": "https://example.com", "name": "음식" },
        { "@type": "ListItem", "position": 2, "item": "https://example.com/fruits", "name": "과일" },
        { "@type": "ListItem", "position": 3, "item": "https://example.com/fruits/summer", "name": "여름 과일" }
      ]
    }
  </script>
</head>

vue에서는 useHead를 이용하여 동적으로 head를 생성할 수 있습니다. script 코드를 head 안에서 실행하게 되면 itemList name 변수도 동적으로 생성이 가능합니다.

// vue
<script setup lang="ts">
const weather = ref<string>('summer');

useHead({
  script: [
  {
    type: 'application/ld+json',
    innerHTML: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: [
          { "@type": "ListItem", "position": 1, "item": "https://example.com", "name": "음식" },
          { "@type": "ListItem", "position": 2, "item": "https://example.com/fruits", "name": "과일" },
          { "@type": "ListItem", "position": 3, "item": "https://example.com/fruits/summer", "name": `${weather.value} 과일` }
        ]
    })
  }]
});
</script>

next.js 공식문서 에서 JSON-LD를 <script> 태그를 이용해 구조화된 데이터를 보여주는 것을 권장합니다.

// next.js
export default async function Page({ params }) {
  const product = await getProduct(params.id);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    image: product.image,
    description: product.description,
  };

  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  );
}

결과

사용자 유입과 편리성을 위하여 사이트를 검색 엔진에 원하는 형식으로 노출시키는 것이 중요하다고 생각합니다.
해당 작업을 거친뒤 구글은 약 48시간 뒤에 네이버는 2~3주 뒤 순차적으로 sitemap.xml에 등록한 페이지들이 노출되었습니다.

네이버 가이드가 친절하게 설명되어있으니 해당 자료를 참고하여 기본적인 프로젝트 세팅을 하고 원하는 검색엔진 사이트에 맞추어 추가적인 부분을 세팅하면 좋을 것 같습니다.

🙇‍♂️ 참고문헌

네이버 웹마스터 가이드

'브라우저' 카테고리의 다른 글

적절한 브라우저 저장소 선택하기 (0)	2025.05.08
브라우저 렌더링 및 JavaScript 이벤트 루프 이해하기 (0)	2025.05.08

현재글검색엔진에 친화적인 사이트 구축하기(SEO)

소이의 개발이야기

개발을 통해 경험한 지식과 생각을 공유합니다.

테크포임팩트, 카카오임팩트,

소이의 개발이야기