검색엔진 최적화(search engine optimization)
검색 엔진 최적화는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.
검색엔진이 웹 페이지의 자료들을 수집해서 검색 우선순위를 매기고
순위에 따라 상위에 노출되는 것이다.
왜 최적화가 필요할까
결국 사람들은 무언가 필요한 게 생길 때 검색하여 찾는다.
백화점에 있는 나이키 아디다스 매장은 어디 구석탱이에 박아놔도 사람들이 알아서 갈 것이다.
신생 브랜드라던가 아직 널리 알려지지 않았고, 같은 테마나 이념을 가진 경쟁 브랜드가 많은 어떤 브랜드의 매장이 입점해야 한다고 할 때
사람들이 많이 다니는 정 중앙에 위치할 때와 구석탱이에 박혀있을 때 추후의 인지도가 어떻게 변화될 지 생각해보자
어떤 상황에서는 실제 퀄리티보다 브랜드 노출도와 접근성을 높이는 게 더 유효할 수 있다!
장기적으로 보았을 때 검색엔진 최적화는
브랜드(예: 스타트업의 신생 서비스)의 인지도를 올려주고 트래픽 그 자체를 높여주어 매출에 영향을 줄 확률이 높기 때문에 매우 중요하다.
최적화 규칙
핵심 키워드 만들기
SEO를 위한 가장 첫 번째 단계는 바로 핵심 키워드를 찾고, 분석을 한 후 나의 페이지에 가장 적합한 키워드를 선택하는것이다.
키워드 선정에 도움을 주는 도구들이 있다고 한다!
H태그 잘 사용하기
H1 ~ H6 까지 중요도 우선순위가 있으니 잘 선정할 것
제목의 경우 되도록 핵심 키워드만 포함시키고 4단어 안에 포함시키자
핵심 키워드 또는 부가적 키워드들을 하위 헤드라인(H2~H6; 헤드라인 크기)에 사용하는 것은 매우 중요하다.
각 페이지는 하나의 H1을 사용하고, 추가적인 키워드들에는 H2-H을 사용하는 것이 좋다.
URL 네이밍
의미없는 단어보다는 핵심 키워드가 있다면 좋다
메타 데이터 작성하기
title, tag, description 등 메타 정보를 적절하게 잘 작성한다
핵심 내용을 앞부분에 작성하기
핵심 키워드가 작성 중인 전체 글의 초반 10% 포함되도록 하자
일정 이상의 분량은 반드시 있어야 한다
내용물이 부실하면 유용한 사이트라고 생각하지 않아 우선순위에서 밀린다.
이미지 활용
구글은 이미지가 첨부된 콘텐츠의 신뢰도를 높게 평가하기 때문에 글 사이에 적절한 이미지 사용을 권장합니다
작성하는 글에 이미지를 사용하는 경우에 상위 노출에 효과적인 요소는 바로 첨부한 이미지를 부가적으로 설명하는 Alt text를 추가하는 것이다. 검색 엔진은 사용자가 추가한 Alt text를 통해 첨부한 이미지가 무엇인지 이해할 수 있다.
지나친 키워드 중복 작성 지양하기
핵심 키워드 사용을 컨텐츠의 1%~2.5%로 유지하기
특정 키워드를 너무 자주 사용하게 되면 키워드 남용으로 오해를 받아 검색엔진의 정확도 측면에서 낮게 평가되고 몰입감 또한 떨어질 수 있습니다.
유사어를 적극 활용할 것!
링크 활용하기
외부 링크, 내부 링크를 삽입하는 것은 최적화에 긍정적일 수 있다.
리액트와 SEO
그래서 핵심 키워드를 추출하여 메타 태그를 잘 작성하고 적절한 헤딩과 컨텐츠를 구성해야 되는 건 알겠는데
리액트 같은 클라이언트 사이드 렌더링 방식의 앱은 엔진 봇이 읽을 내용물이 없고
하나의 페이지라 현재 상황에 맞도록 적절하게 메타태그를 변경해줄 수 없는데 어떻게 해야할까?
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"/><title>React Todolist</title><script defer="defer" src="/static/js/main.f2482da5.js"></script><link href="/static/css/main.a636d597.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>위에처럼 앱을 만들어 구성해도 내부 내용물은 전부 비어있다..!!
NextJS
리액트에서 서버사이드 렌더링을 가능하게 하며 쉽게 페이지 라우팅을 구현할 수 있으며
프론트 앱에 백엔드를 붙여서 풀스택 앱으로도 만들 수 있게 해주는 프레임워크다.
사용하여 적용하는 부분은 다음에 다루겠지만
라우터별로 적절한 메타데이터를 동적으로 삽입해 줄 수 있고
원하는 곳에 원하는 것들에 대해 서버사이드 렌더링을 적용하여
크롤러가 모두 로드된 상태의 페이지를 읽게 해줄 수 있다.
Reference
