[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정
🔍 Brolog 검색 엔진 최적화(SEO) 적용 시작
Brolog를 처음 공개했을 때는 단순히 Vercel에 배포만 하면 Google이나 네이버 같은 검색 엔진에서 자연스럽게 검색될 것이라고 생각했다.
하지만 실제로는 배포만으로는 검색 엔진이 사이트를 바로 인식하지 않았다.
검색 결과에 노출되기 위해서는 검색 엔진이 사이트를 방문하고(Crawling), 페이지를 분석한 뒤(Indexing), 검색 결과에 반영하는 과정이 필요하다.
즉, 단순히 웹사이트를 공개하는 것과 검색 엔진에 노출되는 것은 전혀 다른 이야기였다.
이번 작업에서는 Brolog를 실제 검색 엔진에서 정상적으로 수집하고 노출할 수 있도록 SEO 환경을 구성했다.
이번 글에서 진행한 작업은 다음과 같다.
robots.txt 추가
↓
sitemap.xml 생성
↓
Google Search Console 등록
↓
Canonical URL 확인
↓
SEO Metadata 정리
↓
대표 OG Image 제작
↓
favicon 및 manifest 적용
↓
검색 엔진 최종 점검
🤔 검색 엔진은 어떻게 내 사이트를 찾을까?
검색 엔진은 모든 사이트를 사람이 직접 등록하는 것이 아니라 크롤러(Crawler)가 인터넷을 돌아다니며 웹사이트를 수집한다.
대표적으로 Google에서는 Googlebot이 이러한 역할을 수행한다.
전체적인 흐름은 다음과 같다.
웹사이트 배포
↓
Crawler 방문
↓
robots.txt 확인
↓
페이지 수집
↓
sitemap.xml 확인
↓
Index 생성
↓
검색 결과 노출
즉, 검색 엔진이 사이트를 제대로 이해할 수 있도록 여러 가지 정보를 제공하는 것이 SEO의 시작이다.
🤖 robots.txt 추가
가장 먼저 적용한 것은 robots.txt였다.
robots.txt는 검색 엔진 크롤러가 사이트에 방문했을 때 가장 먼저 확인하는 파일이다.
이 파일을 통해
- 어떤 경로를 탐색할 수 있는지
- 어떤 경로를 탐색하지 말아야 하는지
- 사이트맵이 어디에 있는지
등을 알려줄 수 있다.
Brolog는 대부분의 콘텐츠를 검색 엔진에 공개하는 기술 블로그이므로 특별히 차단해야 할 영역은 없었다.
따라서 다음과 같이 매우 단순한 robots.txt를 작성했다.
User-agent: *
Allow: /
Sitemap: https://brolog.co.kr/sitemap.xml
각 설정의 의미는 다음과 같다.
| 설정 | 의미 |
|---|---|
| User-agent | 적용할 크롤러 지정 |
| Allow | 모든 페이지 접근 허용 |
| Sitemap | 사이트맵 위치 안내 |
🚫 Disallow는 언제 사용할까?
robots.txt를 찾아보면 대부분 다음과 같은 설정도 함께 등장한다.
User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /api/
Disallow는 특정 경로를 크롤링하지 말아 달라고 요청하는 옵션이다.
하지만 중요한 점은
Disallow는 보안 기능이 아니다.
검색 엔진에게
"이 경로는 수집하지 말아주세요."
라고 요청하는 기능일 뿐이며 실제 접근 자체를 막지는 않는다.
따라서
- 관리자 페이지
- 내부 API
- 로그인 페이지
같은 영역은 robots.txt가 아니라 서버 인증과 권한 관리로 보호해야 한다.
Brolog처럼 대부분의 콘텐츠를 공개하는 블로그라면 Disallow를 사용할 일이 거의 없기 때문에 이번 프로젝트에서는 별도로 추가하지 않았다.
🗺️ Sitemap 생성
검색 엔진이 사이트를 방문한다고 해서 모든 페이지를 자동으로 발견하는 것은 아니다.
특히 페이지 수가 많아질수록 일부 문서는 링크를 따라가지 못해 검색 엔진이 발견하지 못하는 경우도 발생할 수 있다.
이를 해결하기 위해 사용하는 것이 Sitemap이다.
Sitemap은 말 그대로
"우리 사이트에는 이런 페이지들이 있습니다."
를 검색 엔진에게 알려주는 목록이다.
검색 엔진은 Sitemap을 참고하여 새로운 글이나 수정된 페이지를 더욱 빠르게 수집할 수 있다.
⚙️ Nuxt에서 Sitemap 적용
Brolog는 Nuxt 기반 프로젝트이므로 Sitemap Module을 사용했다.
먼저 모듈을 설치한다.
npm install @nuxtjs/sitemap
이후 nuxt.config.ts에서 모듈을 등록한다.
export default defineNuxtConfig({
modules: [
'@nuxtjs/sitemap'
],
sitemap: {
siteUrl: 'https://brolog.co.kr'
}
})
설정을 완료하면 다음 주소에서 사이트맵을 확인할 수 있다.
https://brolog.co.kr/sitemap.xml
🌐 Nuxt가 아닌 일반 웹사이트에서는?
Sitemap은 Nuxt에서만 사용하는 기능은 아니다.
정적 HTML 사이트나 다른 프레임워크에서도 동일하게 사용할 수 있다.
가장 기본적인 Sitemap 형태는 다음과 같다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://brolog.co.kr/</loc>
</url>
<url>
<loc>https://brolog.co.kr/note</loc>
</url>
</urlset>
즉,
어떤 프레임워크를 사용하든
도메인/sitemap.xml
만 제공된다면 검색 엔진은 이를 활용하여 페이지를 탐색할 수 있다.
🔎 Google Search Console 등록
robots.txt와 Sitemap만 추가한다고 해서 Google이 바로 사이트를 검색 결과에 반영하는 것은 아니다.
Google에게
"이 사이트는 내가 운영하는 사이트입니다."
라는 사실을 알려주는 과정이 필요하다.
이를 위해 사용하는 서비스가 Google Search Console이다.
Google Search Console에서는
- 사이트 등록
- 검색 노출 현황
- 색인 상태
- 검색 키워드
- 크롤링 오류
등을 확인할 수 있다.
🔐 소유권 인증
도메인을 등록하면 가장 먼저 사이트 소유권을 확인하는 과정이 진행된다.
여러 인증 방법이 있지만 이번에는 HTML 파일 업로드 방식을 사용했다.
Google은 다음과 같은 이름의 HTML 파일을 제공한다.
googlexxxxxxxxxxxxxxxx.html
이 파일을 프로젝트의 public 디렉터리에 그대로 추가했다.
public/
└── googlexxxxxxxxxxxxxxxx.html
파일 내용도 Google이 제공한 그대로 유지한다.
google-site-verification: googlexxxxxxxxxxxxxxxx.html
이후 Search Console에서 확인 버튼을 누르면 Google이 해당 파일에 접근하여 사이트 소유권을 인증한다.
🗺️ Google Search Console에 Sitemap 등록하기
소유권 인증을 완료한 이후에는 검색 엔진이 사이트의 페이지를 효율적으로 수집할 수 있도록 Sitemap을 등록했다.
Sitemap은 사이트에 존재하는 페이지 목록을 검색 엔진에게 알려주는 역할을 하며, 새로운 글을 작성하거나 페이지가 추가될 때 검색 엔진이 이를 빠르게 인식하는 데 도움을 준다.
Google Search Console 좌측 메뉴의 Sitemaps 항목으로 이동한 뒤, 생성해둔 Sitemap 경로를 입력하여 등록했다.
Google Search Console
↓
Sitemaps
↓
새 사이트맵 추가
↓
sitemap.xml 입력
↓
제출
Brolog에서는 @nuxtjs/sitemap 모듈을 적용해 Sitemap을 자동 생성하도록 구성했기 때문에 별도의 XML 파일을 직접 관리할 필요는 없었다.
등록이 완료되면 Google은 해당 Sitemap을 주기적으로 확인하면서 새로운 페이지나 변경된 페이지를 자동으로 수집한다.
Sitemap이 정상적으로 등록된 이후에는 각 게시글이 실제로 색인(Index)에 포함되는지 확인하기 위해 URL 검사 기능을 이용했다.
🔍 URL 검사와 색인 요청
사이트 소유권 인증을 완료했다고 해서 바로 검색 결과에 노출되는 것은 아니다.
Google은 사이트를 다시 방문하여 페이지를 수집(Indexing)해야 실제 검색 결과에 반영한다.
Search Console에서는 이를 위해 URL 검사(URL Inspection) 기능을 제공한다.
이번에는 Brolog의 메인 페이지와 주요 문서들을 직접 검사했다.
https://brolog.co.kr/
https://brolog.co.kr/note
https://brolog.co.kr/project
https://brolog.co.kr/error
URL을 입력하면 Google이 현재 페이지의 상태를 분석하여 다음과 같은 정보를 제공한다.
- Google 색인 여부
- 마지막 크롤링 시점
- robots.txt 차단 여부
- Canonical URL
- 모바일 사용성
- 페이지 접근 가능 여부
색인이 아직 이루어지지 않은 페이지는 색인 생성 요청(Request Indexing) 기능을 통해 Google에게 다시 크롤링을 요청할 수 있다.
🔗 Canonical URL 확인
기술 블로그를 운영하다 보면 하나의 콘텐츠가 여러 URL에서 접근 가능한 상황이 생길 수 있다.
예를 들어
https://example.com/post/1
https://www.example.com/post/1
https://example.com/post/1?ref=home
검색 엔진 입장에서는 모두 동일한 글처럼 보이지만 서로 다른 페이지로 인식할 수도 있다.
이 경우 SEO 점수가 분산되는 문제가 발생할 수 있다.
이를 방지하기 위해 사용하는 것이 Canonical URL이다.
Canonical은 검색 엔진에게
"이 페이지의 대표 주소는 이것입니다."
라고 알려주는 역할을 한다.
Brolog에서는 이미 Layout에서 Canonical URL을 자동 생성하도록 구성해 두었기 때문에 별도의 추가 작업은 필요하지 않았다.
현재 적용된 코드는 다음과 같다.
useHead({
link: computed(() => {
const links = []
if (canonicalUrl.value) {
links.push({
rel: 'canonical',
href: canonicalUrl.value
})
}
return links
})
})
Google Search Console의 URL 검사에서도 Canonical URL이 정상적으로 인식되는 것을 확인했다.
📝 SEO Metadata 정리
검색 엔진은 HTML뿐 아니라 페이지 메타데이터도 함께 분석한다.
기존에는 단순한 title 정도만 설정되어 있었지만, 이번 작업에서는 모든 게시글에 SEO Metadata를 추가했다.
현재 모든 게시글은 다음과 같은 형태를 가진다.
---
title: "게시글 제목"
description: "게시글 설명"
seo:
title: "SEO Title"
description: "SEO Description"
image: "/images/thumbnail.png"
---
이렇게 작성하면
- 브라우저 제목
- 검색 결과 설명
- Open Graph
- SNS 미리보기
등이 모두 함께 구성된다.
특히 Brolog에서는 SEO 정보를 기반으로 Open Graph 메타 태그도 자동 생성되도록 구현되어 있어 별도로 OG 태그를 작성하지 않아도 된다.
🖼️ 대표 Open Graph 이미지 제작
검색 엔진뿐 아니라 Discord, KakaoTalk, Slack, X(Twitter) 같은 SNS에서는 페이지를 공유할 때 Open Graph 이미지를 사용한다.
처음에는 별도의 대표 이미지가 없어 링크를 공유하면 원하는 형태로 출력되지 않았다.
그래서 이번에 Brolog 전용 대표 이미지를 새롭게 제작했다.
이후 모든 페이지에서 동일한 대표 이미지를 사용할 수 있도록 메타데이터에 적용했다.
image: "/images/ogimage.png"
덕분에 링크를 공유했을 때 Brolog만의 브랜드 이미지를 함께 전달할 수 있게 되었다.
🎨 favicon 변경
SEO와 직접적인 관련은 없지만 브랜드 아이덴티티 측면에서 favicon도 함께 교체했다.
기존 브라우저 기본 아이콘 대신 Brolog 전용 아이콘을 제작하여 적용했다.
프로젝트 구조는 다음과 같다.
public/
├── favicon.ico
├── favicon.svg
└── apple-touch-icon.png
브라우저 탭에서도 Brolog를 쉽게 구분할 수 있게 되었다.
📱 manifest.webmanifest 추가
PWA를 위한 필수 요소는 아니었지만 브라우저와 검색 엔진이 사이트 정보를 더욱 잘 이해할 수 있도록 Manifest 파일도 함께 추가했다.
{
"name": "Brolog",
"short_name": "Brolog",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "/favicon.svg",
"sizes": "512x512",
"type": "image/svg+xml"
}
]
}
Manifest를 추가하면
- 앱 설치 정보
- 아이콘
- 브라우저 표시 방식
등을 정의할 수 있다.
✅ 최종 SEO 점검
모든 작업을 마친 후 다음 항목들을 다시 확인했다.
✔ robots.txt
✔ sitemap.xml
✔ Google Search Console 등록
✔ HTML 파일 소유권 인증
✔ URL 검사
✔ 색인 요청
✔ Canonical URL
✔ SEO Metadata
✔ Open Graph
✔ 대표 OG Image
✔ favicon
✔ manifest.webmanifest
Google Search Console에서도 robots.txt와 Sitemap이 정상적으로 인식되고, URL 검사 결과 역시 문제없이 확인할 수 있었다.
💡 개발을 마치며
이번 작업을 진행하기 전에는 SEO를 단순히 검색 결과에 잘 나오게 만드는 기술 정도로만 생각했다.
하지만 실제로 적용해 보니 검색 엔진이 사이트를 이해할 수 있도록 여러 정보를 체계적으로 제공하는 작업이라는 점을 알 수 있었다.
특히 이번 작업을 진행하며 가장 크게 느낀 부분은 다음과 같다.
배포
≠
검색 노출
웹사이트를 배포했다고 해서 검색 엔진이 자동으로 모든 페이지를 수집하는 것은 아니다.
robots.txt와 Sitemap을 제공하고, Google Search Console에 사이트를 등록하고, Canonical과 메타데이터를 정리하는 과정을 통해 검색 엔진이 사이트를 올바르게 이해할 수 있는 환경을 만들어 주어야 한다.
이번 SEO 적용을 통해 Brolog는 단순히 접속 가능한 웹사이트를 넘어 검색 엔진에서도 정상적으로 수집되고 공유 시에도 브랜드 아이덴티티를 유지할 수 있는 형태로 한 단계 발전하게 되었다.
앞으로도 새로운 콘텐츠가 추가될 때마다 Search Console과 Sitemap을 함께 관리하며 지속적으로 검색 노출을 최적화해 나갈 예정이다.