Google Search Console 색인 문제 해결하기 - SEO 최적화 완전 정복, jay.log

Google Search Console 색인 문제 발견

블로그를 운영하면서 가장 답답한 순간 중 하나는 열심히 작성한 글들이 Google 검색 결과에 나타나지 않는 것입니다. Google Search Console을 확인해보니 제 블로그의 색인 등록률이 현저히 낮았습니다.

VSCode Copilot과 함께 점검하면서 여러 SEO 관련 문제가 발생할 수 있는 부분들을 수정해보았습니다.

SEO 문제 진단

Copilot이 분석한 주요 문제점들은 다음과 같았습니다:

1. 메타데이터 부족

// 기존: 너무 간단한 메타데이터
export const metadata: Metadata = {
  title: 'jay.log',
  openGraph: {
    title: 'jay.log'
  }
};

대부분의 페이지에 description이 누락되어 있었고, Open Graph 데이터도 매우 제한적이었습니다. 검색 엔진이 페이지의 내용을 이해하기 어려운 상황이었죠.

2. URL 일관성 문제

robots.txt: https://jaylog.dev/sitemap.xml
sitemap.xml: https://www.jaylog.dev/posts/...

robots.txt와 sitemap.xml에서 서로 다른 도메인을 사용하고 있어 검색 엔진이 혼란을 겪고 있었습니다.

3. 구조화 데이터 부재

JSON-LD 형태의 구조화 데이터가 전혀 없어서 검색 엔진이 콘텐츠의 맥락을 파악하기 어려웠습니다.

SEO 최적화 구현

1. 메타데이터 대폭 개선

먼저 모든 페이지의 메타데이터를 대폭 개선했습니다:

app/layout.tsx

export const metadata: Metadata = {
  title: 'jay.log',
  description: '프론트엔드 개발자 이진웅의 기술 블로그',
  keywords: ['프론트엔드', '개발', 'React', 'Next.js', 'TypeScript', '블로그'],
  authors: [{ name: '이진웅' }],
  creator: '이진웅',
  openGraph: {
    title: 'jay.log',
    description: '프론트엔드 개발자 이진웅의 기술 블로그',
    url: 'https://www.jaylog.dev',
    siteName: 'jay.log',
    images: [
      {
        url: 'https://www.jaylog.dev/profile.webp',
        width: 400,
        height: 400,
        alt: '이진웅 프로필 이미지'
      }
    ],
    locale: 'ko_KR',
    type: 'website'
  },
  twitter: {
    card: 'summary',
    title: 'jay.log',
    description: '프론트엔드 개발자 이진웅의 기술 블로그'
  }
};

각 페이지별로도 상세한 메타데이터를 추가했습니다:

app/posts/page.tsx

export const metadata: Metadata = {
  title: 'posts, jay.log',
  description: '프론트엔드 개발, React, Next.js, TypeScript 관련 기술 포스트들을 확인하세요.',
  openGraph: {
    title: 'Posts - jay.log',
    description: '프론트엔드 개발, React, Next.js, TypeScript 관련 기술 포스트들을 확인하세요.',
    url: 'https://www.jaylog.dev/posts',
    siteName: 'jay.log',
    images: [
      {
        url: 'https://www.jaylog.dev/profile.webp',
        width: 400,
        height: 400,
        alt: '이진웅 프로필 이미지'
      }
    ],
    locale: 'ko_KR',
    type: 'website'
  }
};

2. JSON-LD 구조화 데이터 추가

검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 JSON-LD 구조화 데이터를 추가했습니다:

shared/JsonLD.tsx

export function WebSiteJsonLD({ name, url, description }: WebSiteProps) {
  const jsonLD = {
    '@context': 'https://schema.org',
    '@type': 'WebSite',
    name: name,
    url: url,
    description: description,
    author: {
      '@type': 'Person',
      name: '이진웅',
      url: 'https://www.jaylog.dev'
    },
    potentialAction: {
      '@type': 'SearchAction',
      target: `${url}/posts?search={search_term_string}`,
      'query-input': 'required name=search_term_string'
    }
  };
 
  return <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }} />;
}
 
export function BlogPostingJsonLD({ title, description, publishedDate, author, category, url }: BlogPostingProps) {
  const jsonLD = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: title,
    description: description,
    author: {
      '@type': 'Person',
      name: author,
      url: 'https://www.jaylog.dev'
    },
    publisher: {
      '@type': 'Organization',
      name: 'jay.log',
      url: 'https://www.jaylog.dev'
    },
    datePublished: publishedDate,
    dateModified: publishedDate,
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': url
    },
    articleSection: category,
    url: url
  };
 
  return <script type='application/ld+json' dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }} />;
}

3. URL 일관성 확보

robots.txt와 sitemap.xml의 URL을 모두 www.jaylog.dev로 통일했습니다:

robots.txt

User-agent: *
Allow: /
 
Sitemap: https://www.jaylog.dev/sitemap.xml

app/sitemap.ts

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://www.jaylog.dev',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1
    },
    {
      url: 'https://www.jaylog.dev/posts',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9
    },
    {
      url: 'https://www.jaylog.dev/portfolio',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8
    }
  ];
}

4. 개별 포스트 SEO 최적화

각 포스트 페이지에도 JSON-LD 구조화 데이터를 추가했습니다:

app/posts/[category]/[id]/page.tsx

export default async function Page({ params }: { params: Promise<{ category: string; id: string }> }) {
  const { category, id } = await params;
  const post = new PostImpl(category, id);
 
  return (
    <>
      <BlogPostingJsonLD title={post.data.title} description={post.data.description} publishedDate={post.data.createdAt} author='이진웅' category={category} url={`https://www.jaylog.dev/posts/${category}/${id}`} />
      <PostDetail post={post} />
    </>
  );
}

빌드 및 배포 테스트

모든 SEO 최적화 작업을 완료한 후 빌드 테스트를 실행했습니다:

npm run build

빌드가 성공적으로 완료되어 모든 변경사항이 문제없이 적용됨을 확인했습니다.

개선 효과 예상

이번 SEO 최적화 작업으로 다음과 같은 효과를 기대할 수 있습니다:

색인 등록률 향상: 구조화 데이터로 검색 엔진의 크롤링 효율성 증가
검색 노출 개선: 풍부한 메타데이터로 SERP(검색 결과 페이지) 품질 향상
소셜 공유 최적화: Open Graph 데이터로 SNS에서의 노출 개선
사이트 신뢰도 증가: 일관된 URL 구조와 완전한 메타데이터

배포 후 확인사항

SEO 최적화 작업을 완료하고 배포한 후에는 다음 사항들을 확인해야 합니다:

Google Search Console에서 색인 상태 모니터링
Facebook Debugger에서 Open Graph 데이터 검증
Twitter Card Validator에서 소셜 카드 확인
구조화 데이터 테스트 도구에서 JSON-LD 검증

결론

VSCode Copilot의 도움으로 체계적인 SEO 최적화를 진행할 수 있었습니다. 단순히 기술적인 구현뿐만 아니라 검색 엔진의 관점에서 사이트를 바라보고 개선점을 찾아가는 과정이 매우 유익했습니다.

앞으로도 지속적으로 Google Search Console을 통해 실제 개선 효과를 모니터링하고, 필요시 추가적인 SEO 최적화를 진행할 예정입니다. 블로그 운영에서 콘텐츠만큼이나 중요한 것이 SEO라는 점을 다시 한번 깨달았습니다.