워드프레스를 통해 글을 쓰고 기본적인 블로그 사이트 확인이 가능한 상태가 되었다면 이제 본격적으로 애드센스를 적용하기 좋은 환경으로 바꾸어 보고자 한다.
개인적으로 이전 티스토리에서 사용한 북클럽 테마 형태가 적절하다고 생각한다.
일단, 애드센스 고시를 통과하기도 하였고, 피드 광고를 구성하고 애드센스 코드를 재활용하기에 좋을 것이라고 판단된다.
https://kindjm.tistory.com
위 블로그가 티스토리에서 사용하던 내용이다.
그러나 Gatsby 의 워드프레스 테마들을 살펴보면 기본적으로 2~5년 동안 업데이트가 되지 않아서 빌드가 잘 안되는 케이스도 많다.
레이아웃도 해당 형태로 된 테마는 없다. 반응형으로 만들고 싶은데 입맞게 맞는 것도 없다.
이런 저런 테마들을 설치해서 테스트 하였지만 복잡하기만 하고 적응이 안된다.
이럴바엔 그냥 코드들을 참고하여 새롭게 구성하는게 더 빠르겠다고 판단하였다. 이런 판단은 어느 정도 진도를 나가는데 도움이 되었다.
인덱스 페이지, 포스트, 카테고리 페이지 구성
Gatsby 는 정적 페이지 프레임워크이기 때문에 사실상 대부분의 페이지가 빌드될 때에 구성이 된다.
이렇게 페이지를 생성하는 처리는 gatsby-node.js 의 createPages 모듈에서 시작이 된다.
그리고 이런 페이지들을 지탱하는 주변 요소들이 css, pages, template, component, static 폴더를 구성하고 있다.
그리고 graphql 을 통해서 데이터들을 조합하는 작업을 할 수 있다.
사이트를 처음 진입할 때에 보이는 인덱스 페이지는 워드프레스 기본테마에서 어느 정도 윤곽을 확인할 수 있다.
그런 레이아웃이나 이미지 썸네일 같은 내용이 나타나지 않아서 이런 부분들은 적절히 코드를 통해 튜닝을 해준다.
Gatsby 에 대해 책을 보거나 공부를 하지는 않았기 때문에 다른 샘플 코드를 참고하여 대부분 감으로 작업을 진행하였다.
gatsby-node.js 에 페이지 path 를 구현하고 template 에 실제 페이지를 graphql 과 코드를 통해 페이징 되는 리스트 목록으로 구성하였다.
(페이징 처리는 그냥 있는 것을 활용하였다. 앞, 뒤로만 이동하는 형태로 구성한다.)
인덱스 페이지를 PC 형태로 구성하고 포스트 템플릿을 확인해보니 이거는 별로 수정할 내용이 없는 것을 확인하였다.
일부 디테일한 CSS 디자인, 메타 정보를 업데이트하면 된다. 다시 인덱스 페이지를 더 업데이트하기 위해서 반응형 코드를 적용하기 위해 작업을 했다.
CSS 에서 media 키워드를 사용해 화면 크기에 맞게 모바일인 경우는 상하 스크롤 네비게이션 되는 구조로 변경하였다.
나중에 인피드 광고 등을 적용할 때에 활용도가 있을 것이다.
인덱스 페이지를 꾸미면서 카테고리를 구성하고자 하는 욕심이 생기게 되었다.
이걸 할까 말까 하다가 페이징 처리가 번거로운 부분이 될 것 같아서 망설였는데 일단 통페이지로 구성하고자 한다.
시간이 될 때에 페이징 처리까지 작업하는 것으로 계획하고 카테고리 페이지 작업을 진행했다.
마땅한 참조 코드가 없어서 여러 코드를 조합하였다.
일단 Graphql 로 카테고리 정보를 만들고 해당 내용으로 페이지 목록을 생성하도록 했다.
category: allWpCategory {
edges {
node {
id
name
slug
}
}
}이런 식으로 전체 카테고리 목록을 구해서 UI요소를 만들고 클릭하면 해당 카테고리 페이지로 이동하게 만들었다.
카테고리별 페이지도 템플릿으로 구성하여서 글목록을 구조화하였다.
아무래도 검색엔진의 링크 지수를 높이기 위해서는 되도록 연결 링크등을 활성화하는 것이 도움이 될 것이라 판단에 적용하였다. (페이징 처리는 추후 작업 예정)
기본 사이트 정보 정리
Graphql 이나 사이트 메타정보를 구성할 때에 기본 사이트 정보를 잘 정리해 두면 좋다.
gatsby-config.js 의 siteMetadata 항목을 충실하게 채워 넣어 보자.
siteMetadata: {
title: `Kind JM`,
description: `Inspiring your thinking - 일상의 궁금함을 알아보고 공유하는 블로그`,
author: `Kind JM`,
siteUrl: `https://kindjm.com`,
social: {
twitter: ``,
facebook: ``,
github: ``,
linkedin: ``,
email: `jeminad2@gmail.com`
},
}, 위와 같이 사이트 정보를 채워두면 Seo 작업의 기본 데이터들을 잘 채워 넣을 수 있다.
그리고 gatsby-plugin-manifest 를 사용하여 favicon 세팅을 잘 해두면 나중에 검색엔진의 인덱싱에 도움이 될 것이다.
favicon 이미지의 원본은 가능하면 256 픽셀이상 해상도로 준비하는 것을 추천한다.
SEO 업데이트
Gatsby SEO 작업을 위해 살펴보자. 먼저 robots.txt 처리를 위해 gatsby-plugin-robots-txt 를 설치한다.
설치 후에 gatsby-config.js 세팅을 해주면 된다. 이건 몇번 해보면 검색으로 정보를 확인하면서 작업이 가능할 것이다.
(후에 알게 되었지만 간단하게 static 폴더에 robots.txt 를 생성해도 된다.)
다음으로 좋은 플러그인은 사이트맵 구성을 위해 gatsby-plugin-yoast-sitemap 을 추천한다.
워드프레스 플러그인에 Yoast SEO 가 설치되어 있어야 동작한다. Yoast SEO 는 sitemap 을 풍부하게 구성해 준다.
Gatsby 의 다른 사이트맵 플러그인도 있는데 제대로 사용하려면 Graphql 로 손질을 해야한다.
이것도 살짝 까다로운데 yoast seo 가 만든 sitemap 을 도메인만 바꿔치기하면 너무나 쉽게 사이트맵을 구성할 수 있다.
SEO 작업을 하면서 생각해보니 사이트맵의 URI Path가 도메인 유지만 잘하면 활용도가 높을 것 같다.
만약 Gatsby 사이트를 이전하는 상황이 생기면 도메인을 통해서 동일한 워드프레스 페이지 PATH 유지가 된다.
이렇게 되면 검색엔진의 효율을 그대로 이어받아서 사용할 수 있을 것이라는 예측을 할 수 있다.
물론, 실제 전환 후에 어떤 일이 벌어질지는 겪어봐야 알겠지만 이론 상으로는 긍정적인 결과가 나올 것으로 보인다.
아무튼 여기까지 잘 구성하면 뿌듯한 나만의 블로그를 마련하게 될 것이다.
드디어 내집마련의 꿈을 이루는 것이다. ㅎㅎ
혹시라도 여기까지 글을 읽었는데 너무 러프하게 지나가서 어렵다고 생각되시는 분들이 있다면 언제든지 댓글이나 제 메일로 문의주시기 바란다.
이런 분들을 위해 커뮤니티를 구성하여 도움을 드리기 위한 서비스를 구성하여 지인들에게 도움을 주고 있다.
물론 시간이 꽤 소모되기 때문에 커뮤니티 유지를 위한 최소한의 장치를 마련하고 가능한 수준에서 함께 연구하고 있다.