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

1. 소개
2. SEO의 중요성
3. 현실적인 SEO 체크리스트 - 기술편
4.검색엔진 색인 확인하기 (Google)
끝으로

1. 소개

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

하지만 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/ 디렉토리를 크롤링하지 않도록 합니다. 반면에, Allow: /public/는 /public/ 디렉토리를 크롤링하도록 허용합니다. 이를 통해 검색 엔진은 크롤링 가능한 영역과 불가능한 영역을 명확히 이해할 수 있습니다. sitemap은 필수는 아니지만 등록을 하면 검색엔진에서 sitemap을 추가적으로 등록하거나 중복 등록을 방지할 수 있습니다.

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

User-agent: Googlebot
Disallow:

User-agent: *
Disallow: /

위의 예시에서는 Googlebot에게는 모든 영역을 크롤링할 수 있도록 허용하고, 다른 모든 봇에게는 크롤링을 금지하는 설정입니다. 하지만 악성 봇은 이러한 규칙을 무시할 수 있습니다.

sitemap.xml 파일

sitemap.xml 파일은 웹사이트의 모든 페이지 URL을 포함하고 있어, 검색 엔진이 웹사이트의 구조를 이해하고 색인할 수 있게 합니다. 일반적으로 루트 디렉트리에 위치하지만 robots.txt 와 달리 위치는 상관없습니다. 왜냐 본인이 검색엔진에 sitemap 을 명시해야하기 때문이죠. sitemap.xml 파일은 아래와 같이 구성할 수 있습니다.

<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은 직접적인 노출에 영향을 미칩니다. 기타 keywords, canonical, opengraph, twitter card 태그 등이 있으며, 각각의 중요성과 작성 방법을 알아봅시다.

3.3 시멘틱 태그

시멘틱 태그는 검색 엔진이 페이지의 구조와 내용을 더 잘 이해할 수 있게 도와줍니다. HTML5의 새로운 시멘틱 요소들인 <header>, <main>, <footer>, <article>, <section> 등을 사용하면 검색 엔진이 콘텐츠를 더 효율적으로 색인할 수 있습니다. 시멘틱 태그를 사용하면 HTML 코드만 보고도 웹 페이지의 구조와 중요한 부분을 쉽게 파악할 수 있습니다.

시멘틱 태그의 중요성

가독성 향상: 시멘틱 태그를 사용하면 HTML 문서를 읽을 때 구조와 의미를 쉽게 파악할 수 있습니다. 이는 코드 유지보수와 협업에도 도움이 됩니다.
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와 같은 구조화 데이터를 사용하여 얻을 수 있는 이점에 대해 잘 알지 못합니다. 특히 소규모 비즈니스나 개인 블로그의 경우, SEO 최적화에 대한 전문 지식이 부족할 수 있습니다.
우선순위 문제: 웹사이트를 운영할 때 여러 가지 요소를 고려해야 합니다. 콘텐츠 생성, 사용자 경험 개선, 기술적 유지보수 등 많은 과제가 있습니다. JSON-LD를 포함한 구조화 데이터의 구현이 우선순위에서 밀릴 수 있습니다.
즉각적인 효과 부족: JSON-LD를 사용한다고 해서 즉각적으로 눈에 띄는 SEO 개선 효과를 보장하지 않습니다. 이는 장기적인 전략으로 작용하며, 결과를 확인하기까지 시간이 걸릴 수 있습니다. 따라서 단기적인 성과에 집중하는 경우 우선순위에서 밀릴 수 있습니다.
자동화 도구 부족: 많은 콘텐츠 관리 시스템(CMS)이나 웹사이트 빌더가 JSON-LD를 자동으로 생성하거나 포함하는 기능을 기본 제공하지 않을 수 있습니다. 수동으로 JSON-LD를 작성하고 포함하는 작업이 추가적인 부담이 될 수 있습니다.
기타 SEO 요소의 중요성: SEO는 여러 요소가 복합적으로 작용합니다. 좋은 콘텐츠, 키워드 최적화, 백링크, 사용자 경험 등이 모두 중요한 역할을 합니다. JSON-LD는 그 중 하나의 요소일 뿐, 전체적인 SEO 성과에 영향을 미치는 유일한 요소는 아닙니다.

3.5 AMP (Accelerated Mobile Pages) 적용

AMP는 Google이 주도한 오픈 소스 프로젝트로, 모바일 웹 페이지의 로딩 속도를 획기적으로 향상시키기 위한 기술입니다. AMP를 적용하면 페이지가 신속하게 로드되며, 사용자 경험을 크게 향상시킬 수 있습니다. AMP를 적용하는 방법은 다음과 같습니다.

3.5.1 기본 AMP HTML 구조

AMP HTML은 표준 HTML과 비슷하지만, 몇 가지 필수 태그와 제한 사항이 있습니다. 기본 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 파일은 사용할 수 없습니다. 또한, AMP는 자체적으로 제공하는 스크립트만 사용할 수 있으며, 커스텀 자바스크립트는 사용할 수 없습니다.

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

3.5.4 AMP 페이지 검증

AMP 페이지가 제대로 작성되었는지 확인하려면 AMP HTML 검증기를 사용해야 합니다. 다음과 같이 브라우저 콘솔에서 검증할 수 있습니다:

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

3.5.5 AMP가 SEO에 미치는 영향

AMP를 적용하면 SEO에도 긍정적인 영향을 미칩니다. 그 이유는 다음과 같습니다:

로딩 속도 향상: AMP는 페이지 로딩 속도를 크게 개선하여, 사용자 이탈률을 줄이고 방문자 만족도를 높입니다. 검색 엔진은 로딩 속도가 빠른 페이지를 선호하여, 더 높은 순위에 배치할 가능성이 큽니다.
모바일 친화성: AMP는 모바일 환경에서 최적화된 페이지를 제공하여, 모바일 검색 결과에서 더 높은 순위를 차지할 수 있습니다. Google은 모바일 친화적인 페이지를 우선적으로 고려합니다.
검색 결과에서의 가시성 증가: AMP 페이지는 Google 검색 결과에서 AMP 배지를 표시하여, 사용자가 빠르게 로드되는 페이지임을 인식하게 합니다. 이는 클릭률을 높이는 데 도움이 됩니다.
검색 엔진 색인 최적화: AMP 페이지는 구조화된 데이터를 사용하여 검색 엔진이 페이지를 더 쉽게 색인하고 이해할 수 있도록 돕습니다. 이는 검색 결과에서의 노출을 증가시킵니다.
리치 스니펫: AMP 페이지는 리치 스니펫으로 표시될 가능성이 높아, 검색 결과에서 더 매력적으로 보일 수 있습니다. 이는 더 많은 클릭과 트래픽을 유도합니다.

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

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 자체는 필수는 아니지만 sitemap 에 등록된 페이지를 자연스럽게 검색엔진이 인덱스 가능하게 만들어줍니다.

4.3 페이지 색인 결과 확인

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

4.4 세부 페이지 색인 확인

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

끝으로

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

개발자로서 현실적이고 효과적인 SEO 최적화 방법을 통해 웹사이트의 성능을 향상시키고, 효율적으로 검색 순위를 높이는 것은 매우 중요합니다. robots.txt와 sitemap.xml의 적절한 설정, 메타 태그의 올바른 사용, 시멘틱 태그의 적용, JSON-LD와 AMP의 활용 등 다양한 기술적 요소를 고려하여 SEO 최적화를 수행할 수 있습니다.

검색엔진 색인을 확인하고 지속적으로 모니터링하는 것도 잊지 마세요. SEO 최적화는 한 번의 작업으로 끝나는 것이 아니라 지속적인 관리와 개선이 필요합니다. 위에서 소개한 방법들을 통해 웹사이트의 검색 엔진 최적화를 꾸준히 유지하며 더 나은 성과를 이루시길 바랍니다.

여러분의 웹사이트가 검색 엔진에서 더 높은 순위를 차지하고, 더 많은 트래픽을 유도하여 성공적인 비즈니스로 이어지기를 기대합니다.