Young Log

기왕 블로그 운영할거면 검색했을 때 나의 포스트가 나오면 좋을 것 같아서 찾아보고 적용 완료!

적용 방법

구글 로봇에게 지도 건네주기 (Sitemap)
글만 쓴다고 구글이 바로 찾아오지 않는다.
sitemap.ts를 만들어 구글 로봇에게 "내 블로그엔 이런 글들이 있어!"라고 지도를 그려주었다.

import { MetadataRoute } from 'next';
import { getAllPosts } from '@/lib/posts';
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
 
  const postUrls = posts.map((post: any) => ({
    url: `https://y0ung.dev/blog/${post.slug}`,
    lastModified: new Date(post.date),
  }));
 
  return [
    {
      url: 'https://y0ung.dev',
      lastModified: new Date(),
    },
    ...postUrls,
  ];
}

이 파일로 인해 새로 쓴 글을 구글이 빨리 찾게 돕고, 모든 페이지의 위치를 알려준다.
app/sitemap.ts를 통해 자동으로 모든 슬러그(Slug) 주소를 생성하여 준다.(내가 쓴 포스트가 매번 업데이트되어서 다 올라간다 이거야)
사이트맵이라는 건 구글 봇에게 전달하는 우리 웹사이트 URL의 전체지도다.
반영 후 배포하면 https://y0ung.dev/sitemap.xml 나의 사이트맵을 확인할 수 있다.

소유권 확인: DNS vs HTML 태그

그럼 이제 내 도메인을 구글에 등록을 해야겠죠?
사실 여기서 좀 애먹긴 했는데

시도 1 (DNS): 도메인 설정(TXT 레코드)을 건드려봤지만, 전파되는 시간이 너무 오래 걸려 실패! (이거 분명 되는 방법이 있는데 내가 못 찾은거라 본다..)
시도 2 (HTML 태그): app/layout.tsx에 구글이 준 메타 태그를 직접 박는 전략으로 변경. (이건 확인도 방법도 확실해서 왠만하면 될듯!)

구글에 등록 완료되었다!
구글이 내 페이지를 읽었고, 내부 검토 후 검색 결과에 보여줘도 좋겠다 라는 승인을 내린 상태

구글이 가져갈 수 있는 상태임을 나타낸다!
= 검색 장부에 넣을 수 있고 로봇 차단 설정도 없는 상태

"selected as canonical” ⇒ 이건 구글이 나의 주소를 공식 대표로 인정하겠다 라는 뜻! (인정해줘서 고마워ㅋㅎ)

HTML에 태그 적용시 확인 할 것!

메타 태그의 위치: <head> 태그는 반드시 <html> 바로 아래, <body> 위에 있어야 함.
서버 컴포넌트 필수: 메타데이터 작업은 서버 컴포넌트에서 하는 게 정석! (클라이언트 컴포넌트라면 <head> 태그를 직접 활용)

결국 모든 설정을 마치고 "소유권 자동 확인됨" 메시지 노출됨.

이 과정을 통해 이 블로그가 구글에 그냥 검색되어지는 것은 아니라는 것은 물론,
검색이 되어지기 위해서는 여러 절차가 있고 저마다에 점수를 매긴다는 것을 알게 되었다.

그럼 구글 봇은 대체 무얼 보고 어떻게 평가를 한다는 것일까?

우선 절차는 다음과 같다.

Crawl → Index → Rank

해당 페이지를 크롤링한다.(방문을 한다)
해당 페이지를 인덱싱한다.(저장한다)
점수를 매겨서 랭킹한다.(줄 세운다)

아무래도 구글 봇은 눈이 없으니 오직 텍스트와 코드 구조로만 파악할 수 있을 것이다.

서버 사이드 렌더링(SSR/SSG)이 왜 깡패인가?

이전 내용에서 이에 대한 내용을 다룬 적이 있다.
요약하자면, 빈 HTML(CSR) vs 이미 조립된 HTML(SSR)

<div></div> // CSR

코드 레벨의 최적화?

시맨틱 태그
<div /> 대신 <header />, <main />, <article />, <h1 />~<h6 />을 써야 로봇이 길을 잃지 않음.

// Bad example
<div className="header">
  <div className="title">내 블로그</div>
</div>
<div className="content">
  <div className="post-title">브라우저의 1초</div>
  <div className="post-body">내용...</div>
</div>

// Good example
<header>
  <h1>Young_Log</h1>
</header>
<main>
  <article>
    <h2>브라우저의 1초: URL을 치면 생기는 일</h2>
    <p>브라우저 렌더링 과정을 알아봅시다...</p>
  </article>
</main>

→ 구글 봇은 각 태그에 따라 어떤 부분에 집중해야할지 판단한다.

메타 데이터
<title>과 <meta description>이 검색 결과의 얼굴이다.

// blog/[slug]/page.tsx
export const metadata = {
  title: '브라우저의 1초 | Young_Log',
  description: 'URL 입력부터 화면 페인팅까지, 브라우저의 내부 동작 원리를 완벽하게 파헤쳐 봅니다.',
  openGraph: {
    title: '브라우저의 1초 | Young_Log',
    description: '프론트엔드 개발자라면 꼭 알아야 할 렌더링 가이드',
  }
};

→ 해당 태그가 사람들의 이목을 가져오게 하면 좋다!

이미지 Alt
alt 속성이 이미지의 이름표를 붙여주는 것!

// Bad example
<img src="/rendering-process.png" />
 
//Good example
<img 
  src="/rendering-process.png" 
  alt="브라우저가 HTML을 파싱하여 DOM 트리를 생성하는 과정 도표" 
/>

→ 눈이 없는 로봇에게 이 이미지가 무엇인지에 따라 이미지 검색에도 유리하다!
중요한건 시각 장애인들이 사용하는 스크린 리더에도 이 텍스트가 들어간다.

사용자 경험 점수(UX): 웹 성능 (Core Web Vitals)

구글은 빨리 렌더링 되는 사이트에 엄청난 가산점을 준다!
지표가 있는데, LCP(가장 큰 화면이 뜨는 속도), CLS(화면 흔들림 정도)
이 지표를 높게 쳐주는 것이 Next.js가 유리하다!

관련성 (Relevance): 사용자가 검색한 단어와 나의 블로그 내용의 <h1>, <h2> 제목, 본문 내용이 얼마나 일치하는가?
권위성 (Authority): 이 사이트가 믿을만한가? (다른 유명한 사이트가 나의 글을 링크(Backlink)했는가?)
와 이건 어떻게 알지? 했는데 구글 봇이 페이지에 있는 링크는 다 들어가보면서 거미줄과 같은 관계망을 형성한다고 함..
누가 이걸 악용해서 유령 페이지 만들어서 권위성 높이려고 했는데 요즘은 이런 스팸 블로그도 다 걸러낸다고 함
사용자 경험 (UX): 사이트가 얼마나 빨리 뜨는가? ( LCP, FID 같은 성능 지표 )

상단 노출의 실제 과정 (가상 시나리오)

사용자 검색: 누군가 구글에 Next.js 렌더링 원리라고 검색한다.
후보 선별: 구글 알고리즘이 도서관에서 해당 키워드가 들어간 페이지 만 개를 뽑는다.
점수 정렬:
- A 사이트: 내용은 좋지만 CSR이라 로딩이 5초 걸림 (감점)
- B 사이트: 내용은 부실하지만 광고가 너무 많음 (감점)
- 블로그: SSG라 0.5초 만에 뜨고, HTML 구조가 완벽함 (가산점 폭발!)
결과 발표: 구글이 나의 글을 1페이지 상단에 배치한다.(짝짝짝!!)

구글 봇이 우리에게 몇점을 주었는지 궁금하다면?

https://search.google.com/search-console

이 링크에 들어가면 다음과 같은 이미지를 볼 수 있다!
각각 구글 봇이 마지막으로 방문한 날짜, 발견된 페이지 수(이건 내가 5개의 포스트를 올렸는데 그건가?), 발견된 동영상(동영상 조만간 올려봐야겠다!)

구글 봇 아주 부지런하다(귀여워)
오늘도 와줘서 고마워~

결론

결국은 사용자를 위한 UX가 높은 점수를 얻을 수 있다!