현실적이고 효과적인 SEO 최적화 방법 - 기술편 | duck blog

1. 소개

SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진 결과 페이지(SERP)에서 높은 순위를 차지하도록 도와주는 기술입니다. 높은 순위를 차지하면 더 많은 트래픽을 유도할 수 있어 웹사이트 운영에서 꽤 중요한 역할을 합니다. 프론트엔드 개발자는 웹사이트의 구조와 성능에 직접적인 영향을 미치기 때문에 SEO 최적화 작업에서 빠질 수 없는 역할을 맡게 됩니다.

하지만 SEO 최적화를 과도하게 설정하면 본래의 목적을 잃고 오히려 가성비가 떨어집니다. 현실적으로 적용 가능한 부분과 가성비 좋게 세팅할 수 있는 방법을 정리해봤습니다.

그동안의 경험을 바탕으로, 효율적으로 검색 순위를 높일 수 있는 몇 가지 팁을 공유합니다.

2. SEO의 중요성

SEO는 단순히 검색 엔진에서 상위에 노출되는 것만을 의미하지 않습니다. 사용자 경험을 개선하고, 웹사이트의 가시성을 높이며, 궁극적으로는 비즈니스 성과를 증대시키는 데 중요한 역할을 합니다.

우리가 SEO를 통해 궁극적으로 원하는 것은 결국 우리 웹페이지가 사용자에게 어떻게 노출되느냐입니다. 예를 들어, ‘SEO 최적화 방법’이라는 키워드로 검색했을 때 우리 페이지가 첫 페이지에 노출되고, 제목과 설명이 매력적으로 보여 클릭을 유도하는 것이죠. 이런 결과를 얻으려면 SEO가 필요합니다.

아래의 두 검색결과를 보면 어떤 쪽이 더 매력적인지 바로 보인다.

▲ SEO 를 고려하지 않은 형태

▲ SEO 를 고려한 형태

때로는 이미지 썸네일을 노출하고 싶고, 경우에 따라 지도, 상품 가격 등을 노출하고 싶을 때도 있다. 항상 적용되는 건 아니지만, 정답에 가깝게 세팅하는 방법을 아래 체크리스트를 통해 정리했다.

3. 현실적인 SEO 체크리스트 - 기술편

3.1 robots.txt, sitemap.xml

robots.txt 파일

robots.txt 파일은 검색 엔진이 사이트의 어떤 부분을 크롤링할 수 있는지 알려주는 파일입니다. 웹사이트의 루트 디렉토리(예: https://duck-blog.vercel.app/robots.txt)에 위치해야 합니다. 잘 구성된 robots.txt 파일은 검색 엔진이 중요한 페이지를 빠르게 찾고 색인할 수 있도록 도와줍니다.

User-agent: *
Disallow: /private/
Allow: /public/

Sitemap: https://duck-blog.vercel.app/sitemap.xml

User-agent: *는 모든 검색 엔진 봇을 의미하고, Disallow: /private/는 /private/ 디렉토리를 크롤링하지 않도록 합니다. sitemap은 필수는 아니지만 등록해두면 검색엔진에서 추가 등록하거나 중복 등록을 방지할 수 있습니다.

특정 봇에게만 크롤링을 허용하려면 다음과 같이 구성할 수 있습니다.

User-agent: Googlebot
Disallow:

User-agent: *
Disallow: /

Googlebot에게만 모든 영역을 크롤링할 수 있도록 허용하고, 다른 봇에게는 크롤링을 금지하는 설정입니다. 다만 악성 봇은 이런 규칙을 무시할 수 있다는 점은 알아둬야 합니다.

sitemap.xml 파일

sitemap.xml 파일은 웹사이트의 모든 페이지 URL을 포함하고 있어, 검색 엔진이 웹사이트의 구조를 이해하고 색인할 수 있게 해줍니다. 일반적으로 루트 디렉토리에 위치하지만 robots.txt와 달리 위치는 상관없습니다.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/</loc>
    <lastmod>2024-06-30</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://www.example.com/about</loc>
    <lastmod>2024-06-30</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

URL, 변경 날짜, 우선순위 등의 정보를 포함해서 검색 엔진이 사이트의 모든 페이지를 빠르게 발견하고 색인할 수 있도록 도와줍니다. 페이지가 추가될 때마다 수동으로 업데이트하기에는 무리가 있으니, 자동화 스크립트를 만들어 빌드 시점에 생성하는 게 일반적입니다.

3.2 meta 태그

메타 태그는 검색 엔진과 사용자 모두에게 중요한 정보를 제공한다. 특히 title과 description은 직접적인 노출에 영향을 미친다.

3.3 시멘틱 태그

시멘틱 태그는 검색 엔진이 페이지의 구조와 내용을 더 잘 이해할 수 있게 도와준다. HTML5의 새로운 시멘틱 요소들인 <header>, <main>, <footer>, <article>, <section> 등을 사용하면 검색 엔진이 콘텐츠를 더 효율적으로 색인할 수 있다.

시멘틱 태그의 중요성

가독성 향상: 코드 유지보수와 협업에도 도움이 된다.
SEO 개선: 검색 엔진이 콘텐츠의 중요성과 의미를 더 잘 이해한다.
접근성 향상: 스크린 리더와 같은 보조 기술이 콘텐츠를 더 정확하게 해석할 수 있게 한다.

3.4 JSON-LD를 활용하자

JSON-LD는 JSON(JavaScript Object Notation for Linked Data)의 줄임말로, 구조화된 데이터를 표현하기 위한 형식이다. 이를 통해 웹 페이지에 포함된 정보를 검색 엔진이 더 쉽게 이해하고 처리할 수 있게 된다.

아래는 요리에 관한 JSON-LD 예시다.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Chocolate Chip Cookies",
    "author": {
      "@type": "Person",
      "name": "Jane Doe"
    },
    "recipeIngredient": ["1 cup butter", "1 cup sugar", "2 cups flour", "1 cup chocolate chips"],
    "recipeInstructions": [
      "Preheat oven to 350 degrees F.",
      "Mix all ingredients.",
      "Bake for 10 minutes."
    ],
    "image": "https://example.com/photo.jpg"
  }
</script>

▲ 기대하는 결과

이렇게 작성하면 구조화된 데이터를 통해 검색 엔진이 페이지의 레시피 정보를 쉽게 이해할 수 있다.

JSON-LD는 SEO에 꽤 유용한 도구지만, 고품질의 콘텐츠를 대신할 수는 없습니다. 많은 페이지가 JSON-LD를 사용하지 않는 이유가 있습니다.

지식 부족: 많은 개발자가 JSON-LD로 얻을 수 있는 이점을 잘 모른다.
우선순위 문제: 콘텐츠 생성, 사용자 경험 개선, 기술적 유지보수 등이 우선이 되다 보니 JSON-LD 구현이 뒤로 밀린다.
즉각적인 효과 부족: 장기적인 전략이다. 결과를 확인하기까지 시간이 걸린다.
자동화 도구 부족: 많은 CMS나 웹사이트 빌더가 JSON-LD를 자동으로 생성하는 기능을 기본 제공하지 않는다.
기타 SEO 요소의 중요성: 좋은 콘텐츠, 키워드 최적화, 백링크, 사용자 경험 등이 모두 중요하다. JSON-LD는 그 중 하나의 요소일 뿐이다.

3.5 AMP (Accelerated Mobile Pages) 적용

AMP는 Google이 주도한 오픈 소스 프로젝트로, 모바일 웹 페이지의 로딩 속도를 크게 향상시키기 위한 기술이다.

3.5.1 기본 AMP HTML 구조

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>AMP 페이지 예제</title>
    <link rel="canonical" href="https://www.example.com/amp-page.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <style amp-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>AMP 페이지 예제</h1>
    <p>이것은 AMP 페이지의 예제입니다.</p>
  </body>
</html>

3.5.2 AMP 컴포넌트 사용

AMP에서는 표준 HTML 태그 대신 AMP 전용 컴포넌트를 사용해야 한다. 이미지를 표시할 때는 <amp-img> 태그를 사용한다.

<amp-img
  src="https://www.example.com/image.jpg"
  width="600"
  height="400"
  layout="responsive"
  alt="예제 이미지"
></amp-img>

3.5.3 스타일과 스크립트 제한

AMP 페이지에서는 사용자 정의 스타일을 <style amp-custom> 태그 내에 작성해야 하며, 외부 CSS 파일은 사용할 수 없다. 커스텀 자바스크립트도 사용할 수 없다.

<style amp-custom>
  body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: #333;
  }
</style>

3.5.4 AMP 페이지 검증

AMP 페이지를 브라우저에서 열고
URL 끝에 #development=1을 추가한다.
개발자 도구 콘솔을 열고 AMP 오류를 확인하면 된다.

3.5.5 AMP가 SEO에 미치는 영향

로딩 속도 향상: 사용자 이탈률을 줄이고 방문자 만족도를 높인다.
모바일 친화성: 모바일 환경에서 최적화된 페이지를 제공한다. Google은 모바일 친화적인 페이지를 우선적으로 고려한다.
검색 결과에서의 가시성 증가: AMP 배지를 표시해서 사용자가 빠르게 로드되는 페이지임을 인식하게 한다.
리치 스니펫: 리치 스니펫으로 표시될 가능성이 높아, 검색 결과에서 더 매력적으로 보일 수 있다.

AMP는 빠른 로딩 속도와 높은 성능을 제공하기 때문에 모바일 사용자에게 최적화된 경험을 제공할 수 있습니다. 단, 제한된 기능 때문에 대부분의 페이지에서 활용을 꺼려합니다. Next.js 같은 프레임워크를 사용하고 있다면 손쉽게 구현할 수 있습니다.

4. 검색엔진 색인 확인하기 (Google)

최종적으로 색인 확인이 가장 중요하다. 결정적으로 내 콘텐츠가 제대로 노출 가능한 상황인지를 확인하는 작업이다. 아무리 SEO를 위해 메타 태그를 넣고 콘텐츠를 잘 표현해도 색인이 되지 않는다면 모든 게 의미가 없다.

• Google 대시보드: Google Search Console로 대시보드를 확인하고, 정확한 지표는 Google Analytics를 통해 확인할 수 있다.

robots.txt 등록 확인
sitemap.xml 등록 확인
페이지 색인 결과 확인
세부 페이지 색인 확인

4.1 robot.txt 등록 확인

Google Search Console에서 robots.txt 파일이 제대로 등록되었는지 확인한다. 크롤링 가능한지, 혹은 막힌 부분이 없는지 점검하면 된다.

4.2 sitemap.xml 등록 확인

sitemap.xml 파일이 제대로 등록되었는지 확인한다. sitemap 자체는 필수는 아니지만 등록된 페이지를 자연스럽게 검색엔진이 인덱스 가능하게 만들어준다.

4.3 페이지 색인 결과 확인

페이지가 색인되었다면 검색 엔진에서 확인 가능한 상태다. 색인되지 않은 페이지가 있다면 세부 페이지 색인을 확인하는 게 좋다.

4.4 세부 페이지 색인 확인

개별 URL을 검색하면 해당 페이지가 어떤 이유로 색인되었는지 확인할 수 있다. 색인이 되지 않았다면 색인 요청을 할 수 있다. 단, 색인 요청은 수동으로 진행되며 시간이 소요되고, 요청 횟수에 제한이 있으므로 주의해야 한다.

끝으로

SEO 최적화는 단순히 검색 엔진에서 상위에 노출되는 것만을 의미하지 않습니다. 사용자 경험을 개선하고, 웹사이트의 가시성을 높이며, 궁극적으로는 비즈니스 성과를 높이는 데 중요한 역할을 합니다.

robots.txt와 sitemap.xml의 적절한 설정, 메타 태그의 올바른 사용, 시멘틱 태그의 적용, JSON-LD와 AMP의 활용 등 다양한 기술적 요소를 고려해서 SEO 최적화를 수행할 수 있습니다.

검색엔진 색인을 확인하고 지속적으로 모니터링하는 것도 잊지 마세요. SEO 최적화는 한 번의 작업으로 끝나는 게 아니라 지속적인 관리와 개선이 필요합니다.

현실적이고 효과적인 SEO 최적화 방법 - 기술편