SEO에 관련된 것들을 구현해보자

개발은 필받으면 한번에 몰아하지만 포스팅은 천천히 쓰는 나란 사람, 결국 포기하고 아무렇게나 하기로 했다.

오늘은 이 블로그의 seo를 위해 한것들을 알아보고자 한다.

대략

메타테그
rss
sitemap

순서로 간략하게만 알아보려고 한다.

1. 메타테그

<meta>

이 테그는 이 html문서의 메타데이터를 표기하는 테그로 알고있다(?)

우리가 흔히 <head> 테그 안에 들어가는 <title> 테그라던가 <link> 테그들에서 표현하지 못하는 값들을 표시하게 되는데

필자는 description 과 keyword를 사용했다.

사실 좀 더 많이 사용하긴 했지만 이건 OpenGraph지원을 위한것이니 다음 포스팅에서 다뤄보도록 하겠다.

이 다음은 코드를 보면서 이야기 해보고자 한다.

const router = useRouter();
const meta = {
  title: metadata.title,
  description: metadata.description,
  author: metadata.author,
  site_name: metadata.site_name,
  siteUrl: metadata.siteUrl,
  url: router.asPath,
  ...props.customMeta,
};

<head>에 들어갈 내용들은 가장 먼저 json 의 형태로 담아둔다. 꼭 메타데이터를 만들기 위한것이 아니라 이것저것 사용될 여지가 많기 때문에 쓰는것이다.

참고로 metadata는 data폴더에 있는 단순한 타입스크립트 파일이다.

const metadata = {
	title: "크리의 끄적끄적",
	description: "간단한 개발을 하는 크리의 블로그 입니다",
	site_name: "[크리의 끄적끄적]",
	author: "Cree",
	siteUrl: "https://cree-devblog.kro.kr",
	email: 이거 왜적어놨더라,
};

export default metadata;

그리고 내 블로그의 <head>테그가 있는 컴포넌트에서 <meta>테그를 사용한 부분이다.

<Head>
	<meta name="description" content={meta.description} />
	{meta.keyword !== undefined ? (
		<meta name="keyword" content={meta.keyword} />
	) : null}
<Head/>

상당히 보잘것 없다... 머 그래도 SEO에겐 좀 중요한 부분이다.

2.RSS

RSS(Really Simple Syndication, Rich Site Summary)란 블로그처럼 컨텐츠 업데이트가 자주 일어나는 웹사이트에서, 업데이트된 정보를 쉽게 구독자들에게 제공하기 위해 XML을 기초로 만들어진 데이터 형식입니다.

구글에 그냥 검색해봤더니 기상청에서 이렇게 설명해 주더라

(따란...)

즉 그냥 내 블로그 이렇게 생겼어요~~ 하고 말해주는 거라고 생각하면 된다.

이와 유사하게 ATOM 도 있는데 이 역시 비슷하다.

현제 나의 블로그의 rss는 https://cree-devblog.kro.kr/rss/rss.xml로 들어가면 볼수있다.

이 rss를 매번 내가 작성할수는 없기 때문에 feed라는 플러그인? 페키지를 사용했는데

손쉽게 rss와 atom은 물론 Json Feed도 만들어주는 친구이다... 만

Json피드는 아직 지원하는곳이 많이 없는듯 하다

나는 이 블로그를 vercel을 통한 정적페이지로 배포중이기때문에 빌드시에 이 rss를 생성하며

"build": "next build",
"postbuild": "next-sitemap && npm run rss",
"rss": "ts-node --project tsconfig.node.json ./scripts/generate-rss.ts"

그렇기에 이러한 빌드 커멘드를 사용한다.

그리고 저기서 실행하는 generate-rss.ts를 살펴보자면

import { Feed } from "feed";
import { writeFileSync } from "fs";

import PostJson from "../.contentlayer/generated/Post/_index.json";
import metadata from "../data/metadata";

const master = {
  name: metadata.author,
  link: metadata.siteUrl,
  email: metadata.email,
};

const feed = new Feed({
  title:
    metadata.title.length > 0
      ? `[크리의 끄적끄적] ${metadata.title}`
      : metadata.site_name,

  description: metadata.description,
  id: metadata.siteUrl,
  link: metadata.siteUrl,
  language: "ko",
  image: `${metadata.siteUrl}/images/그냥크리.jpg`,
  copyright: `All rights reserved since 2023-03-29, ${master.name}`,
  generator: "generate-rss",
  feedLinks: {
    json: `${metadata.siteUrl}/rss/feed.json`,
    atom: `${metadata.siteUrl}/rss/rss-atom.xml`,
  },
  author: master,
});

PostJson.forEach((post) => {
  feed.addItem({
    title: post.title,
    id: post._id,
    link: `${metadata.siteUrl}/blog/${post._raw.flattenedPath}`,
    description: post.description,
    content: post.body.raw,
    author: [master],
    image:
      post.image !== undefined
        ? `${metadata.siteUrl}/${post.image}`
        : `${metadata.siteUrl}/images/그냥크리.jpeg`,
    contributor: [master],
    date: new Date(post.date),
    category: post.tags.map((tag) => ({ name: tag, term: "Technologies" })),
  });
});
// Output: RSS 2.0
writeFileSync("public/rss/rss.xml", feed.rss2(), "utf-8");
// Output: Atom 1.0
writeFileSync("public/rss/rss-atom.xml", feed.atom1(), "utf-8");
// Output: JSON Feed 1.0
writeFileSync("public/rss/feed.json", feed.json1(), "utf-8");

Feed에 기본 정보를 넣고, 각 포스트의 정보를 읽어와 추가 한 다음 wirteFileSync로 작성해주기만 하면 된다.

sitemap

어찌보면 이게 rss보다 먼저 나오는게 좋을것 같은데.. 머

아까 본 빌드커멘드에서 next-sitemap이라고 적힌걸 봤을것이다.

이게 그거다

이친구도 대부분의 플러그인들이 그러하듯 config에 따라 작동하며

자동으로 사이트맵과 robot.txt를 만들어주는 역할을 한다.

robot.txt

킹갓 크롤러님께 이 사이트를 어떻게 해주세요 라고 적어두는 문서이다. 어떤 크롤러에게 허용할까, 어디까지만 읽게 할까 등등을 기입할수있따.

다음은 next-sitemap의 설정 파일이다

module.exports = {
	siteUrl: "https://cree-devblog.net",
	generateRobotsTxt: true,
	changefreq: "hourly",
	sitemapSize: 7000,
	priority: 1,
	robotsTxtOptions: {
// 정책 설정
		policies: [
			{
				userAgent: "*", // 모든 agent 허용
				allow: "/", // 모든 페이지 주소 크롤링 허용
				disallow: [
					"/exclude", // exclude로 시작하는 페이지 주소 크롤링 금지
				],
			},
// 추가 정책이 필요할 경우 배열 요소로 추가 작성
		],
	}, // robots.txt 옵션 설정
};

이것으로 포스팅을 마친다.. 다들 고생..