네이버 블로그 SEO 프로젝트 - 개발계획, 기술

네이버 블로그를 운영하면서 주제를 찾거나 정보를 찾는데 어려움이 많았습니다. 그래서 나를 위한 네이버 블로그 SEO 웹페이지를 만들어보자고 계획합니다. 오늘은 이 웹페이지 서비스를 어떻게 계획하였고 어떤 기술을 사용했던 것인지 소개하는 시간을 가지도록 하겠습니다. 

---

[목차]

1. 구현하고자 했던 것
2. SEO 프로젝트 개발에 필요한 기술
3. 개발환경 설정

---

 

반응형

 

1. 구현하고자 했던 것

 

네이버 SEO(검색 최적화)는 제대로 경험해본 사람이 제대로 할 수 있지만 저는 블로그도 운영하면서 동시에 알아보려고 만들었습니다. SEO는 네이버에서 꾸준히 변해갈 수밖에 없으며 매일 바뀝니다. 하지만 언제든 블로그 상위권을 유지하는 인플루언서는 있고 그들을 분석하는 툴을 만들면 SEO에 이르는 힌트를 얻지 않을까 생각했습니다. 

 

어떤 주제든 1페이지에는 무조건 자신의 포스팅이 떠야하고 1페이지가 넘어가면 검색률이나 클릭율은 현저히 줄어든다는 사실을 깨닫고 있었습니다. 그러므로 1페이지에 있는 포스팅을 체류시간이라던지 정보의 양이라던지 새로운 정보로 어떻게든 이겨야합니다.

 

사람들이 원하는 정보나 키워드도 확실하게 따로 있기 때문에 1페이지 포스팅에 대한 분석은 확실하게 중요하다고 판단했습니다. 

네이버 블로그 SEO 프로젝트

기능은 원하는 키워드를 검색하면 연관 검색어, 사이트 수, 검색량 비율이 나옵니다. 그리고 연관 검색어가 뜨며 1페이지의 블로그 제목이 뜹니다. 

 

연관 검색어 박스를 검색하면 키워드는 연관검색어에서 클릭한 것으로 변경됩니다. 연관 검색어는 SEO에 있어서 사람들이 어떤 것에 관심이 있는지 서브키워드로 놓으면 좋을 것들로 나열되어 있습니다. 구글의 경우는 조금 알고리즘이 다르지만 네이버나 다음의 경우는 연관 검색어로 유입을 높일 수 있습니다. 

 

사이트 수 대비 검색량 비율은 블로그의 SEO는 상대적인 거라서 경쟁자(키워드당 사이트 수)가 중요한 의미를 가진다고 생각했습니다. 검색량은 말이 필요없는 중요한 수치입니다. 검색량 비율이 높을수록 좋지 않다는 것이고 낮을수록 SEO에 유리하다는 의미를 가집니다. 테슬라를 쳤더니 0.7정도가 나오네요. 아주 좋은 수치입니다. 

 

네이버 블로그 SEO 분석

분석을 누르면 타이틀에 있는 키워드가 포함된 문장을 모두 파싱해서 보여줍니다. 한 눈에 어떤 내용인지 파악할 수 있게 만들어보려고 노력했습니다. 키워드에 포함된 문장 중심으로 모았으며 이 문장만으로 어떤 것을 설명하는지 간략하게 파악할 수 있습니다. 

 

그 밖의 링크, 구글검색은 전체적인 포스팅 형태를 보기 위해서 추가하였습니다. 각 키워드는 인기 순위에 드는 포스팅 형태와 키워드가 다르기 때문에 확인해줘야합니다. 

 

구글 검색량에서는 별다른 효과가 없음을 확인했습니다. 하지만 네이버나 다음에서는 SEO되는데 상당한 도움이 되었고 키워드를 위한 브레인스토밍에도 도움이 되었습니다.

 

 

 

2. SEO 프로젝트에 필요한 기술

 

우선 웹사이트 기반으로 되어 있고 크롤링, 파싱이 주된 기술이기 때문에 웹페이지 언어와 크롤링이 쉬운 언어를 선택해야했습니다. 사용한 기술은 다음과 같습니다.

 

언어, 프레임워크 : Javascript, React.js

SSR, Routing 프레임워크 : Next.js

크롤링, 파싱 : Axios, cheerio, puppeteer

호스팅: vercel

 

여기서 중요하게 봐야하는 것은 크롤링 자체는 api를 사용해야하므로 CSR(클라이언트 사이드 렌더링)보다는 SSR(서버 사이드 렌더링)이 중요했습니다. Next.js는 SSR을 지원하기도 하고 파일구조를 정해주면서 라우팅도 쉽게 해줍니다. 특히 제가 원하는 것은 유저별로 크롤링해서 모두가 사용할 수 있게 구성하는 것이었습니다. 그 기능을 구현하기에 API 라우팅도 쉽게 해주는 Next.js를 선택하였습니다.

 

next.js 장점

웹 크롤링 부분에 있어서 Axios와 cheerio, puppeteer 의 용도는 각각 다릅니다. Axios는 보통 node.js에서 Promise 기반의 API를 제공하는 HTTP 클라이언트입니다. API 호출할 때 아주 많이 사용됩니다. 이 Axios의 대입값에 홈페이지를 넣으면 해당 HTML을 가져오게 됩니다. 

 

가져온 HTML 데이터를 cheerio 라이브러리를 통해서 쉽게 파싱할 수 있습니다. JQuery와 유사한 형태로 DOM을 쉽게 사용하여 원하는 정보를 얻을 수 있습니다. 인공지능을 위한 데이터가 없을 때 Axios와 Cheerio 같은 크롤링을 사용하여 훈련시킬 데이터를 모으는 것은 좋은 공부가 될 수 있습니다. 

 

cheerio와 puppeteer 다른 점은 puppeteer는 순차적으로 UI를 동작시킬 수 있으며 cheerio와 다르게 동적인 마우스 핸들링이나 클릭 같은 이벤트를 발생시키고 그 DOM에 접근할 수 있습니다. 하지만 속도가 느리고 동기화를 해야하는 단점이 있습니다. 예를 들어 네이버에서 뉴스탭의 기사를 접근하려고 할 때 처음 페이지가 무조건 네이버이면 뉴스를 클릭하고 기사로 들어가서 기사를 크롤링해야합니다. 이 부분에서 뉴스 탭 클릭 -> 기사 크롤링 같은 순차적인 동작제어를 가능하게 하는게 puppeteer입니다.

 

반면 cheerio는 단순히 가져온 HTML태그나 데이터에서 알맹이(원하는 데이터)를 분류시키는 파싱 라이브러리라고 보면 됩니다. 

 

호스팅을 Vercel을 통해 하였습니다. 파이어베이스 호스팅도 요즘에는 간단하게 원버튼으로 가능합니다. Vercel 또한 파이어베이스 호스팅처럼 원버튼 식으로 특히 next.js를 잘 지원해서 이용하게 되었습니다. (Next.js를 만든 회사도 vercel)

 

 

 

3. 개발환경 설정

 

우선 React.js와 Node.js를 사용하므로 node설치가 필요합니다. IDE는 VSCode를 사용하겠습니다. 무료이면서 호환도 좋고 UI가 직관적이며 편합니다. 

 

2023.02.27 - [프로그래밍_] - Node.js 데이터 파싱 1) cheerio 설치 및 파싱

Node.js 데이터 파싱 1) cheerio 설치 및 파싱

그리고 뼈대는 Next.js로 설정해야합니다. 

npm install next react react-dom //next.js 설치 

npm install axios // Axios 설치 

npm install cheerio // cheerio 설치

npx create-next-app [프로젝트명] // next.js로 프로젝트 만들기

npm run dev // next.js 웹페이지 시작하는 명령어

 

기본적인 설치가 완료되었으면 개발환경은 끝났습니다. 다음 포스팅에서는 실질적으로 데이터를 모으는 크롤링, 데이터를 분류해서 꺼내오는 파싱 부분 구현과 분석에 대해서 다루겠습니다. 

 

 

반응형

 

---

[함께 읽으면 좋은 글]

2023.02.27 - [프로그래밍_] - Node.js 데이터 파싱 1) cheerio 설치 및 파싱

Node.js 데이터 파싱 1) cheerio 설치 및 파싱

2022.12.03 - [프로그래밍_] - 파이어베이스로 간단한 웹페이지 호스팅 해보기, firebase hosting

파이어베이스로 간단한 웹페이지 호스팅 해보기, firebase hosting

2022.11.26 - [프로그래밍_] - 웹사이트 만들기,서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR), 검색최적화(SEO)

웹사이트 만들기,서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR), 검색최적화(SEO)

 

---