7월부터 계속해서 개인 프로젝트를 성장시키는 중이다. 딱 어떠한 서비스 같은 토이 프로젝트가 아니고, 확장성을 최대한으로 할 수 있는 도메인을 판 것이다. 자세한 내용은 이 전 포스트를 참고하면 될 것이다.
개인프로젝트에 대한 생각
2022년 연초에 올해의 목표라던가 계획을 세웠었다. 사실 대강 몇년 후 까지도 적어보긴 했는데, 대부분 개발자로서의 성장에 관련된 내용이다. "개인 프로젝트를 만들어서 서비스하고, 거기서
blog.okdohyuk.dev
만들었으면, 아니 만들고 있는 중이지만, 나만 알고 있는 것 보단 알리는 것이 좋을 것 같다고 생각했다.
목표로 설정한 것은 내 아이디인 "okdohyuk"를 구글에 검색하였을 때 1위를 차지하는 것이었다. 애초에 도메인에도 그 키워드가 들어가 있어서 구글 search-console에 robots.txt 정도만 잘 갖다 줘도 될 것이라고 생각하였다.
next-sitemap
최대한 쉽게 만들 수 있고, 자주 변경될 수 있으면 좋을 것 같아서, 빌드시 자동으로 생성될 수 있게 하는 next-sitemap을 발견하여 추가하였다.
사용 방법은 아래와 같고, 특정 페이지는 노출시키지 않음과 같은 내용은 해당 패키지를 참고하면 좋을 것 같다.
npm install next-sitemappackage.json
"scripts": {
"postbuild": "next-sitemap", // 추가
},next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: 'https://okdohyuk.dev',
changefreq: 'daily',
generateRobotsTxt: true,
robotsTxtOptions: {
policies: [
{
userAgent: '*',
allow: '/',
},
],
},
};이후 /robots.txt 와 /sitemap.xml을 구글 서치 콘솔에 업로드하였다.
analytics
혹시 같은 구글이니까 애널리틱스를 추가하면 도움이 되지 않을까 싶기도 하였고, 그냥 달아두고 나중에 지표라도 보고 싶어서 추가하였다.
아래는 nextjs에서 analytics를 추가하는 코드이다. 클라쪽에서만 실행되어야 하는 것과, nextjs에서 페이지가 이동되었을 때 그것을 인식할 수 있게 한다.
lib/gtag.ts
export const GA_TRACKING_ID = 'analytics 개인 ID';
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL) => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
});
};
type GTagEvent = {
action: string;
category: string;
label: string;
value: number;
};
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: GTagEvent) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value: value,
});
};_document.tsx
<Head>
<Script
src={'https://www.googletagmanager.com/gtag/js?id=' + GA_TRACKING_ID}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {page_path: window.location.pathname});
`}
</Script>
</Head> _app.tsx
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url: URL) => {
gtag.pageview(url);
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
일단 "okdohyuk" 키워드로 okdohyuk.dev 사이트가 뜨긴 하였다. 하지만, 순위는 아래쪽에 있었고, 깃헙이라는 큰 산이 있었다.
openGraph
적어도 카톡에 링크를 공유했을 때 링크 한 줄 나오는 것보다 이미지와 설명이 있으면 멋질 것 같고, 결국 SEO에서 인식률을 높일 수 있겠다 싶어 빠르게 작업했다.
이번 작업에서는 딱히 다른 정보들은 찾아보지 않았고, openGraph에 관련된 meta 태그만 검색하였다.
OpenGraph - Preview Social Media Share and Generate Metatags
OpenGraph is the easiest way to preview and generate open graph meta tags for any website.
www.opengraph.xyz
개발하면서 3000포트를 ngrok에 띄어 위 오픈그래프를 테스트할 수 있는 사이트에 테스팅을 하면서 개발했다.
간단히 페이지별로 제목과 설명을 추가할 수 있게 하였고, 아직 썸네일 이미지를 바꿀만한 페이지는 없어서 그 부분은 통일시켰다.
opengraph.tsx
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
type Opengraph = {
isMainPage?: boolean;
title: string;
ogTitle: string;
description: string;
};
function Opengraph({ title, ogTitle, description, isMainPage = false }: Opengraph) {
const router = useRouter();
const withMe = ' with okdohyuk';
const URL = 'https://okdohyuk.dev';
return (
<Head>
<title>{isMainPage ? title : title + withMe}</title>
<meta name="description" content={isMainPage ? description : description + withMe} />
<meta property="og:url" content={URL + router.asPath} />
<meta property="og:type" content="website" />
<meta property="og:title" content={isMainPage ? ogTitle : ogTitle + withMe} />
<meta property="og:description" content={isMainPage ? description : description + withMe} />
<meta property="og:image" content="/opengraph_image.png" />
{...}
</Head>
);
}
export default Opengraph;
결과
오픈그래프를 설정 후 주기적으로 해당 키워드를 검색해보며 변화하는 검색 결과를 느낄 수 있었다. 그때마다 사진을 찍어두지 않은 것이 아쉽지만, 처음엔 제목으로 설정해둔 developer okdohyuk가 떴지만, 점점 제목이 바뀌고, 썸네일이 추가되고, 깃허브를 넘어스며 1착을 차지하였다.🤣🤣
아직 아쉬운 점이 있다면, 내 이름 "유도혁"을 적어 둔 곳이 없어서 그런지 한글로 검색하면, 나오질 않는다. 그렇기 때문에 다음 목표는 이름으로 검색하였을 때 상위 노출시키는 것이고, 다른 서비스를 추가하며 발전시킬 생각이다.
'프론트엔드 > React | Next' 카테고리의 다른 글
| SSR 서비스에서 반응형 웹 개발 이야기(SSR이 필요한 이유) (0) | 2022.10.01 |
|---|---|
| nextjs 다국어, 로컬라이제이션(localization) 지원하기 next-i18next 사용 (0) | 2022.08.28 |
| Nextjs에서 React Testing Library + Mobx 사용하기 (0) | 2022.08.15 |
| [React] 스무스한 가로스크롤 버튼 (0) | 2022.02.23 |
| React 웹 계산기 만들기 (0) | 2020.05.13 |
'프론트엔드/React | Next'의 다른글
- 현재글nextjs에서 원하는 키워드로 구글검색 상위노출시키기