[CS] SEO란 무엇이고, 어떻게 하면 개선할 수 있을까?

🤔 SEO(검색엔진최적화)가 무엇일까?

SEO는 "Search Engine Optimization"의 약자로 Search Engine, 즉 구글과 같은 검색엔진에 친화적인 사이트를 구축하여 광고가 아닌 자연 검색 결과를 통해 트래픽의 양과 질을 극대화하는 작업을 의미한다. 간단하게 말하면, 우리의 홈페이지 및 콘텐츠를 구글이나 네이버와 같은 검색 엔진의 검색 결과 페이지 상단에 노출시키는 작업이라고 생각하면 된다. 

 

 

⭐️ SEO의 중요성

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

 

 

🤖 검색 엔진의 작동 방식

1. 크롤링 : 검색 엔진은 웹 크롤러를 사용해 인터넷 상의 모든 웹페이지를 탐색한다. 이 과정에서 새로운 페이지를 발견하고 기존 페이지의 업데이트를 확인한다.

2. 인덱싱 : 크롤링된 페이지들은 인덱스에 저장된다. 이 인덱스는 검색 엔진이 빠르게 검색 결과를 제공할 수 있도록 도와준다. 

3. 랭킹 : 사용자가 검색어를 입력하면, 검색 엔진은 인덱스에서 관련성이 높은 페이지를 찾아내어 순위별로 보여준다. 이 순위는 알고리즘에 의해 결정된다. 

 

 

✅ SEO 개선 체크리스트

1️⃣ Robots.txt 파일

robots.txt 파일은 검색 엔진이 사이트의 어떤 부분을 크롤링할 수 있는지 알려주는 파일이다. 이 파일은 웹사이트의 루트 디렉토리에 위치해야하며, 검색 엔진이 중요한 페이지를 빠르게 찾고 색인할 수 있도록 도와준다.

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

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

 

User-agent: *는 모든 검색 엔진 봇을 의미하고, Disallow는 크롤링하지 않을 디렉토리를 의미한다. Allow는 크롤링을 허용할 디렉토리를 의미하며 이를 통해 검색 엔진은 크롤링 가능한 영역과 불가능한 영역을 명확히 이해할 수 있다. sitemap은 필수는 아니지만 등록을 하면 검색 엔진에서 sitemap을 추가적으로 등록하거나 중복 등록을 방지할 수 있다. 

 

2️⃣ Sitemap.xml 파일

Sitemap.xml 파일은 웹사이트의 모든 페이지 URL을 포함하고 있어, 검색 엔진이 웹사이트의 구조를 이해하고 색인할 수 있게 한다.

<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️⃣ Meta 태그

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

<title>현실적이고 효과적인 SEO 최적화 방법</title> /* 웹페이지의 제목 */
<meta
  name="description"
  content="프론트엔드 개발자를 위한 SEO 최적화 방법과 현실적인 팁을 제공합니다." /* 페이지의 내용 요약 */
/>
<link rel="canonical" href="https://www.example.com/original-page" /> /* 중복된 콘텐츠를 방지하기 위해 원본 페이지를 지정 */

<meta property="og:title" content="현실적이고 효과적인 SEO 최적화 방법" /> /* 소셜 미디어 플랫폼에서 공유될 때 페이지의 미리보기 정보를 정의 */
<meta
  property="og:description"
  content="프론트엔드 개발자를 위한 SEO 최적화 방법과 현실적인 팁을 제공합니다."
/>
<meta property="og:url" content="https://www.example.com/seo-optimization" />
<meta property="og:image" content="https://www.example.com/images/seo-optimization.jpg" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="현실적이고 효과적인 SEO 최적화 방법" />
<meta
  name="twitter:description"
  content="프론트엔드 개발자를 위한 SEO 최적화 방법과 현실적인 팁을 제공합니다."
/>
<meta name="twitter:image" content="https://www.example.com/images/seo-optimization.jpg" />

 

4️⃣ 시멘틱 태그

<header>
  <h1>SEO 최적화 방법</h1>
</header>
<main>
  <article>
    <header>
      <h2>소개</h2>
    </header>
    <p>
      SEO(검색 엔진 최적화)는 웹사이트가 검색 엔진 결과 페이지에서 높은 순위를 차지하도록
      도와줍니다.
    </p>
  </article>
  <article>
    <header>
      <h2>SEO의 중요성</h2>
    </header>
    <p>SEO는 사용자 경험을 개선하고, 웹사이트의 가시성을 높이며, 비즈니스 성과를 증대시킵니다.</p>
  </article>
</main>
<footer>
  <p>&copy; 2024 SEO 최적화 방법</p>
</footer>

 

⭐️ 시멘틱 태그의 중요성은 다음과 같다.

1. 가독성 향상 : 시멘틱 태그를 사용하면 HTML 문서를 읽을 때 구조와 의미를 쉽게 파악할 수 있다.

2. SEO 개선 : 검색 엔진은 시멘틱 태그를 사용하여 콘텐츠의 중요성과 의미를 더 잘 이해한다. 이는 검색 순위에 긍정적인 영향을 미친다.

3. 접근성 향상 : 시멘틱 태그는 스크린 리더와 같은 보조 기술이 콘텐츠를 더 정확하게 해석할 수 있게 한다.