SEO 개선

강연주·2025년 3월 6일

seo 한달인턴

🪪 한 달 인턴

목록 보기

8/8

🪺 SEO 기본 가이드 - 구글 검색 센터

SEO 개선을 위해 코드에서 확인할 내용

1. 메타데이터 구현 확인

Head 태그나 Metadata API: Next.js 버전에 따라 관련 설정이 올바르게 되어 있는지 확인

Next.js 12 이하: pages/_app.js의 <Head> 태그
Next.js 13 이상: app/layout.js 또는 페이지별 metadata 객체
필수 메타 태그: title, description, canonical, viewport 설정 확인
Open Graph 태그: 소셜 미디어 공유를 위한 og:title, og:description, og:image 설정

2. HTML 구조 최적화

시맨틱 HTML: <div> 대신 <header>, <nav>, <main>, <article>, <section>, <footer> 등 사용
헤딩 구조: 각 페이지에 h1은 하나만 있으며, 논리적인 계층 구조(h1→h2→h3) 확인

3. Next.js 특화 기능 활용

정적 생성(SSG): 가능한 페이지는 getStaticProps/getStaticPaths 또는 generateStaticParams 사용
동적 라우트: 동적 페이지의 메타데이터가 generateMetadata 함수를 통해 생성되는지 확인

4. 성능 최적화

이미지 최적화: next/image 컴포넌트 사용, 특히 LCP(Largest Contentful Paint) 이미지에 priority 속성 적용
폰트 최적화: next/font를 사용하여 폰트 최적화
코드 스플리팅: 큰 컴포넌트는 dynamic import로 지연 로딩

5. 구조화된 데이터

JSON-LD: 중요 페이지에 Schema.org 형식의 구조화된 데이터 구현 여부
리치 스니펫: 코스, 이벤트, 조직 등 적절한 스키마 타입 사용

6. 반응형 및 모바일 최적화

반응형 CSS: 미디어 쿼리를 통한 모바일 디스플레이 최적화
터치 타겟: 모바일 환경에서 버튼, 링크 등의 크기가 적절한지 확인(최소 48px)

7. 사이트맵 및 로컬라이제이션

동적 사이트맵: 사용자 생성 콘텐츠를 포함한 모든 페이지가 사이트맵에 포함되어 있는지
다국어 지원: 한국어 페이지에 적절한 lang 속성과 hreflang 태그 설정

현재 서비스 SEO 상태 확인 방법

검색 엔진 도구 활용
Google Search Console

사이트 등록 후 색인 현황, 검색 트래픽, 클릭률(CTR) 확인 가능
사이트맵 제출 및 크롤링 오류 확인
모바일 사용성, Core Web Vitals 등 성능 지표 제공

Naver 웹마스터 도구

국내 검색에 중요한 네이버에서의 색인 상태 확인
한국 시장 타겟팅 시 필수적

SEO 분석 도구
Lighthouse (구글 크롬 개발자 도구)

SEO, 성능, 접근성, 모범 사례 등 종합적 분석
크롬 개발자 도구에서 바로 실행 가능

SEMrush, Ahrefs, Moz

키워드 순위, 백링크 프로필, 경쟁사 분석
사이트 건강도, 기술적 SEO 이슈 진단
유료 서비스지만 일부 기능은 무료로 제공

기술적 SEO 체크리스트
사이트맵 검증
Copycurl https://yoursite.com/sitemap.xml

응답이 올바른 XML 형식인지 확인
모든 중요 페이지가 포함되어 있는지 확인

robots.txt 검증
Copycurl https://yoursite.com/robots.txt

올바른 형식인지 확인
중요 페이지가 차단되어 있지 않은지 확인

메타데이터 검사

각 페이지의 title, description 태그 확인
중복된 메타 태그가 있는지 검사

페이지 속도 검사

PageSpeed Insights로 로딩 속도 확인
Core Web Vitals 지표 확인 (LCP, FID, CLS)

콘텐츠 및 사용자 경험 분석
구글 애널리틱스 (GA4)

사용자 행동, 이탈률, 세션 시간 등 분석
검색 트래픽 및 전환율 확인

히트맵 도구 (Hotjar, Crazy Egg)

사용자가 페이지에서 어떻게 상호작용하는지 시각화
클릭, 스크롤 패턴 등 분석

실제 검색 결과 확인
주요 키워드 검색

타겟 키워드로 검색했을 때 순위 확인
검색 결과에서 사이트가 어떻게 표시되는지 확인

rich results 테스트

구글의 Rich Results Test 도구로 구조화된 데이터 확인
스니펫, FAQ, 별점 등 특별 요소 표시 여부 확인

이러한 도구와 방법을 통해 현재 SEO 상태를 종합적으로 파악한 후, 발견된 문제점들을 우선순위에 따라 개선해 나가는 것이 좋습니다. 정기적인 모니터링을 통해 SEO 성과를 지속적으로 관리하는 것이 중요합니다.

코드 개선 방안

HTML 구조 최적화
메타 태그 확인 및 개선

jsxCopy// Next.js의 경우 - pages/_app.js 또는 app/layout.js
import Head from 'next/head';

// 각 페이지에서
export default function Page() {
  return (
    <>
      <Head>
        <title>Kolleges - 한국어 교육 플랫폼</title>
        <meta name="description" content="한국어 교육을 위한 최고의 플랫폼" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="canonical" href="https://www.kolleges.net/ko/kolleges" />
        {/* Open Graph 태그 */}
        <meta property="og:title" content="Kolleges - 한국어 교육 플랫폼" />
        <meta property="og:description" content="한국어 교육을 위한 최고의 플랫폼" />
        <meta property="og:image" content="https://www.kolleges.net/og-image.jpg" />
      </Head>
      {/* 페이지 내용 */}
    </>
  );
}

시맨틱 HTML 사용 확인

htmlCopy<!-- 좋지 않은 예 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>

<!-- 좋은 예 -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
  <section>...</section>
</main>
<footer>...</footer>

헤딩 구조 검사

h1은 페이지당 하나만 사용
논리적 계층 구조 (h1 → h2 → h3)
헤딩 태그를 디자인용으로만 사용하지 않기

Next.js 특화 SEO 최적화
Metadata API 활용 (Next.js 13+)

jsxCopy// app/page.js
export const metadata = {
  title: 'Kolleges - 한국어 교육 플랫폼',
  description: '한국어 교육을 위한 최고의 플랫폼',
  openGraph: {
    title: 'Kolleges',
    description: '한국어 교육을 위한 최고의 플랫폼',
    images: [{ url: '/og-image.jpg' }]
  }
};

export default function Page() {
  // 페이지 컴포넌트
}
동적 라우트에서의 메타데이터
jsxCopy// app/[locale]/[slug]/page.js
export async function generateMetadata({ params }) {
  const { locale, slug } = params;
  const data = await fetchPageData(locale, slug);
  
  return {
    title: data.title,
    description: data.description
  };
}

정적 생성과 서버 사이드 렌더링 활용

jsxCopy// 정적 생성 (SEO에 좋음)
export async function generateStaticParams() {
  const pages = await fetchAllPages();
  
  return pages.map((page) => ({
    locale: page.locale,
    slug: page.slug
  }));
}

성능 최적화 (SEO 영향 요소)
이미지 최적화

jsxCopy// Next.js Image 컴포넌트 사용
import Image from 'next/image';

export default function ProfilePage() {
  return (
    <Image
      src="/profile.jpg"
      alt="프로필 사진"
      width={400}
      height={300}
      priority={true} // LCP 이미지인 경우
    />
  );
}

폰트 최적화

jsxCopy// Next.js Font 최적화
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Layout({ children }) {
  return (
    <html lang="ko" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

코드 스플리팅 활용

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>로딩 중...</p>
});

구조화된 데이터 (Schema.org) 구현
리치 스니펫을 위한 JSON-LD

jsxCopy// components/JsonLd.js
export default function JsonLd({ data }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

// 페이지에서 사용
import JsonLd from '../components/JsonLd';

export default function CoursePage({ course }) {
  const courseSchema = {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": course.title,
    "description": course.description,
    "provider": {
      "@type": "Organization",
      "name": "Kolleges",
      "sameAs": "https://www.kolleges.net"
    }
    // ... 기타 속성
  };

  return (
    <>
      <JsonLd data={courseSchema} />
      {/* 페이지 내용 */}
    </>
  );
}

반응형 디자인 및 모바일 최적화
모바일 친화적 디자인 확인

cssCopy/* 반응형 디자인 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 0 1rem;
  }
  
  .nav {
    display: none; /* 모바일 메뉴는 별도 컴포넌트로 */
  }
}
터치 타겟 크기 최적화
cssCopy/* 터치 타겟 최소 48px */
.button, .link, .nav-item {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
}

사용자 컨텐츠 생성 사이트 SEO

동적 사이트맵 생성

jsxCopy// pages/sitemap.xml.js
import { getServerSideProps } from 'next';

const Sitemap = () => null;

export async function getServerSideProps({ res }) {
  // 기본 페이지 URL
  const baseUrls = [
    'https://www.kolleges.net',
    'https://www.kolleges.net/ko/kolleges',
    // ... 기타 고정 페이지
  ];
  
  // 사용자 생성 페이지 가져오기
  const customerPages = await fetchCustomerPages();
  const customerUrls = customerPages.map(page => 
    `https://www.kolleges.net/ko/customers/${page.id}`
  );
  
  // 모든 URL 결합
  const allUrls = [...baseUrls, ...customerUrls];
  
  // XML 생성
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${allUrls.map(url => `
        <url>
          <loc>${url}</loc>
          <lastmod>${new Date().toISOString()}</lastmod>
          <changefreq>weekly</changefreq>
        </url>
      `).join('')}
    </urlset>
  `;
  
  res.setHeader('Content-Type', 'text/xml');
  res.write(sitemap);
  res.end();
  
  return {
    props: {},
  };
}

export default Sitemap;

지속적인 모니터링 도구
개발자용 SEO 모니터링 설정

Lighthouse CI 구성
bashCopynpm install -g @lhci/cli
lhci autorun

GitHub Actions와 결합

yamlCopy# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Audit URLs
        uses: treosh/lighthouse-ci-action@v8
        with:
          urls: |
            https://www.kolleges.net/
            https://www.kolleges.net/ko/kolleges
          temporaryPublicStorage: true

실용적인 체크리스트
프론트엔드 개발자로서 다음 항목을 정기적으로 확인하세요:

모든 페이지에 고유하고 설명적인 타이틀 태그
적절한 메타 설명
모바일 뷰포트 설정
시맨틱 HTML 구조
논리적 헤딩 계층
이미지의 alt 텍스트
내부 링크의 정상 작동
페이지 로딩 속도 (Core Web Vitals)
구조화된 데이터 적용
반응형 디자인
robots.txt 및 sitemap.xml 정상 작동

이 체크리스트를 기반으로 정기적인 코드 리뷰를 진행하면 SEO 품질을 지속적으로 유지할 수 있습니다.

Lighthouse 진단 후, 직접 확인해야 하는 항목

이런 항목들을 직접 확인하는 방법
1. 키보드 탐색 테스트

Tab 키로 전체 페이지 탐색: 모든 상호작용 요소(버튼, 링크, 폼 컨트롤 등)에 접근 가능한지 확인
초점 표시기(Focus indicator): 요소에 포커스될 때 시각적 표시가 명확한지 확인
탭 순서: 논리적으로 순서대로 이동하는지, 갑자기 페이지 맨 위/아래로 점프하지 않는지 확인

상태 및 목적 표시 확인

버튼이 클릭 가능해 보이는지
링크가 일반 텍스트와 구분되는지
체크박스, 라디오 버튼 등의 선택 상태가 명확한지

DOM 순서와 시각적 순서 일치 확인

개발자 도구에서 HTML 구조를 확인하며 시각적 배치와 일치하는지 검사
특히 CSS 포지셔닝으로 시각적 순서를 변경한 경우 주의 필요

새 콘텐츠 포커스 확인

모달이 열릴 때 모달 내부로 포커스 이동하는지
동적으로 추가된 콘텐츠에 적절히 포커스가 이동하는지

랜드마크 요소 사용 확인

, , , , 등 시맨틱 HTML5 요소 사용 또는 적절한 ARIA 랜드마크 역할(role) 적용 확인

숨겨진 콘텐츠 확인

화면에 보이지 않는 요소가 스크린 리더에도 숨겨져 있는지 확인
display: none, visibility: hidden, aria-hidden="true" 속성 활용 확인

직접 확인을 위한 도구와 방법

키보드만으로 테스트

마우스를 사용하지 않고 Tab, Enter, Space, 화살표 키만으로 모든 기능 사용해보기

스크린 리더 테스트

VoiceOver(Mac), NVDA(Windows), JAWS(Windows) 등의 스크린 리더 사용해보기
콘텐츠가 논리적으로 읽히는지, 모든 중요 정보가 전달되는지 확인

개발자 도구 활용

Chrome DevTools의 "Accessibility" 탭 사용
접근성 트리와 ARIA 속성 확인

프로세스 문서화

접근성 문제 발견 시 체계적으로 기록
각 페이지별 접근성 검토 결과 문서화

이러한 수동 테스트는 자동화할 수 없지만 웹사이트의 전반적인 접근성과 사용자 경험에 매우 중요합니다. 정기적으로 직접 확인하는 습관을 들이는 것이 좋습니다.RetryY저게 SEO랑 관련 있어?Edit좋은 질문입니다. 이 체크리스트 항목들은 직접적인 SEO 요소라기보다는 주로 접근성(Accessibility) 관련 항목들입니다. 하지만 접근성과 SEO는 몇 가지 중요한 연관성이 있습니다:
접근성과 SEO의 연관성

간접적인 SEO 영향

구글은 페이지 경험(Page Experience)을 검색 랭킹 요소로 포함
접근성이 좋은 사이트는 사용자 경험 지표에 긍정적 영향

Core Web Vitals와의 관계

키보드 탐색 가능성, 포커스 트랩 방지 등은 사용자 상호작용에 영향
이는 FID(First Input Delay)와 같은 Core Web Vitals 지표와 간접적으로 연결됨

콘텐츠 구조화

시맨틱 HTML과 논리적 DOM 구조는 접근성과 SEO 모두에 중요
검색 엔진이 콘텐츠를 더 잘 이해하고 색인화 가능

브랜드 평판

접근성이 좋은 웹사이트는 더 많은 사용자에게 접근 가능
이는 방문자 수, 체류 시간 증가로 이어져 간접적 SEO 이점 제공

실제적인 구분
그러나 명확히 말씀드리자면, Lighthouse에서 언급한 이 특정 항목들은:

주로 접근성(Accessibility) 관련: WCAG(웹 콘텐츠 접근성 지침) 준수를 위한 항목
직접적인 SEO 요소는 아님: 검색 엔진이 직접 이러한 요소를 분석하지는 않음
사용자 경험 관련: 키보드 접근성, 포커스 관리는 특정 사용자층의 사용성 향상에 중요

결론
이 체크리스트는 SEO에 직접적인 영향을 주는 요소라기보다는, 웹사이트의 전반적인 품질과 접근성을 향상시키는 항목들입니다. 그러나 장기적으로는 더 나은 사용자 경험을 제공하여 간접적으로 SEO에 긍정적 영향을 줄 수 있습니다.
SEO에 직접 초점을 맞추려면, 앞서 논의했던 메타 태그, 구조화된 데이터, 사이트맵, 콘텐츠 품질, 페이지 속도 등의 요소에 더 집중하는 것이 좋습니다.

강연주

아무튼, 개발자

이전 포스트