블로그에 remark와 rehype 플러그인 추가해서 그에 맞게 개발을 끝낸 뒤, 블로그에 붙인 구글 GA를 봤는데 거의 저만 들어온 것 같았어요(방문자수 1-2명 🥲). 그래서 SEO를 통해 노출될 수 있도록 Next.js가 제공하는 방식을 추가했어요.
sitemap 생성하기#
NEXT.js - sitemap.xml에 설명된 것 중 Generating a sitemap using code (.js, .ts) 를 통해 만들었어요. 맨 처음에는 Generating multiple sitemaps도 적용했는데 상세 페이지를 갖는 posts, books 메뉴에 sitemap.ts를 만들었으나 제대로 되지 않더라구요. 그래서 방법을 찾다가. app/sitemap.ts 파일을 변경했어요.
import { allBooks, allPosts } from "@/.contentlayer/generated";
import { BASE_URL } from "@/app/lib/definitions";
import { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: `${BASE_URL}/`,
lastModified: new Date(),
changeFrequency: "yearly",
priority: 1,
},
{
url: `${BASE_URL}/about`,
lastModified: new Date(),
changeFrequency: "monthly",
priority: 0.8,
},
{
url: `${BASE_URL}/tags`,
lastModified: new Date(),
changeFrequency: "weekly",
priority: 0.5,
},
{
url: `${BASE_URL}/get912000won`,
lastModified: new Date(),
},
...allPosts.map((post) => ({
url: `${BASE_URL}/posts/${post.slug}`,
lastModified: post.date,
})),
...allBooks.map((book) => ({
url: `${BASE_URL}/books/${book.slug}`,
lastModified:
book.start_read_date === book.finish_read_date
? book.start_read_date
: book.finish_read_date,
})),
];
}저는 contentlayer를 사용하고 있어서 이미 마크다운으로 작성한 게시글들에 대한 정보를 담은 객체들이 있어요. 그래서 편하게 allPosts와 allBooks를 불러와서 글을 데이터를 추가할 수 있었어요.
robots 생성하기#
NEXT.js - robots.txt에 설명된 것 중 Generate a Robots file를 사용했어요. sitemap 설정할 때보다 더 쉬워요.
app/robots.ts 파일에 아래와 같이 만들었어요.
import { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
},
sitemap: "https://get6.github.io/sitemap.xml",
};
}검색엔진 사이트에 등록하기#
AI 답변을 통해 알게된 건 이렇게 만들면 끝나는 게 아니라 이제 크롤링될 수 있도록 검색엔진 사이트에 추가해야 한다고 하더라구요.
그래서 여러 검색엔진 사이트에 직접 등록해야해요. 자동으로 수많은 검색엔진에 등록해주는 서비스가 있는 것 같으나 제대로 해주는 지 테스트해보지 않았어요. 그래도 인터넷상에서 유명한 사이트에 추가할 수 있는 링크를 아래에 제공할게요!
- 구글 - Google Search Console
- 네이버 - Search Advisor
- 빙 - Webmasters Tools
- 바이두 - 百度站长工具
- 얀덱스 - Webmaster
저는 일단 구글과 네이버만 추가했어요. 모든 사이트들은 로그인 후 진행하는 걸 기본으로 하고 있어요. 원하는 사이트가 있다면 회원가입을 하시고 진행해주세요!
저는 구글과 네이버 모두 HTML 태그를 추가하는 형식을 골랐어요. HTML 파일을 업로드하는 방식은 NGINX 같은 웹 서버용에 해당한다고 생각돼요.
일반적이라면 태그를 header 태그 사이에 추가하면 되지만 저는 Next.js를 사용하고 있어서 따로 설정해줘야 했어요.
export const metadata: Metadata = {
// ...다른 설정들은 생략
verification: {
google: "복사하라고 알려준 태그에서 content 부분",
other: {
// 복사하라고 알려준 태그에서 name 부분을 왼쪽에 적어주세요.
'naver-site-verification': "복사하라고 알려준 태그에서 content 부분",
},
},
};호스팅되는 곳에 태그들이 올라간 뒤, 소유자 확인 버튼을 눌러주시면 완료돼요!
이후 각 사이트에서 제공하는 웹마스터 도구를 보면서 수집되는 데이터로 어떤 글이 인기가 많은지 보셔도 좋을거예요.
God gave us the gift of life; it is up to us to give ourselves the gift of living well.
— Voltaire
