⚡ SEO, 검색엔진 최적화
검색 엔진 최적화 (Search Engine Optimization)는 웹 사이트의 가시성을 향상시키고
검색 엔진 결과 페이지(SERP)에서 상위에 노출되도록 하는 노력을 의미합니다.
즉, 네이버나 구글 검색 결과 상위에 노출되도록 하는 일련의 과정이나 행위입니다.
사이드 프로젝트를 진행하며 이왕 만든거 많은 사람들에게 노출되고 사용 되었으면 하는 마음에 SEO를 알아보고 적용해봤습니다.
그럼 제가 프로젝트를 검색엔진에 최적화 시키기 위해 어떠한 것들을 적용했는지 소개합니다.
📌 Meta Tag
메타 태그는 검색 엔진 최적화 (SEO)의 중요한 요소 중 하나로서,
웹 페이지의 콘텐츠를 검색 엔진에게 설명하고 해석할 수 있는 정보를 제공합니다.
메타 태그를 적절하게 설정하면 검색 엔진은 웹 페이지의 주제, 내용 및 의도를 이해하고
사용자의 검색 쿼리와 관련성 있는 결과로 표시하는 데 도움이 됩니다.
저는 리액트로 만든 프로젝트이기 때문에 public/index.html 에서 메타 태그를 추가했습니다.
설정할 수 있는 메타 태그는 다음과 같습니다.
🔎 메타 타이틀
<title>제목</title>메타 타이틀은 페이지의 제목을 나타내며, 검색 결과에서 링크의 제목으로 표시되기 때문에 클릭률에 큰 영향을 미칩니다.
페이지의 내용과 핵심 주제를 관통하는 키워드로 설정해야 합니다.
🔎 메타 설명
<meta name="description" content="설명입니다" />페이지의 간략한 요약을 표현합니다.
검색 결과에서 설명으로 표시되기 때문에 관련성 있는 키워드를 포함해 사용자에게 페이지의 내용을 파악할 수 있도록 작성해야 합니다.
즉, 구글에 제가 올린 프로젝트를 검색 했을 때 다음과 같은 결과가 표시됩니다.
meta title : 링모(LINGMO) - 당신의 링크 모음
meta description : 개성 있는 나만의 링크 모음을 만들어보세요!
🔎 메타 키워드
<meta name="keywords" content="link, 링크, 링크모음, ..." />메타 키워드는 페이지와 관련된 키워드들을 표현합니다.
요즘 들어 검색 엔진은 키워드를 고려하지 않는다고 합니다.
하지만 안하기엔 찝찝하니 키워드들을 꽉꽉 채워서 적어줬습니다.
🔎 Open Graph(OG) 메타 태그
OG 메타 태그는 소셜 미디어에서 웹 페이지가 공유될 때 미리보기 정보를 제공하는 데 사용됩니다.
특히 카카오톡이나 페이스북 같은 소셜 미디어 플랫폼에서 페이지를 공유할 때
제목, 설명, 이미지 등을 포함하여 페이지의 콘텐츠를 시각적으로 나타내기 때문에 바이럴에 가장 중요한 요소라고 생각됩니다.
일반 메타 태그와 작성 방법이 거의 비슷합니다.
<meta property="og:title" content="미리보기 제목"><meta property="og:description" content="미리보기 설명입니다."><meta property="og:image" content="미리보기_이미지_경로.jpg"><meta property="og:type" content="website"><meta property="og:locale" content="ko_KR">
이 외에도 다른 OG 메타 태그가 있고, 소셜미디어 별로 다르게 설정해줄 수도 있지만 저는 이 정도로만 작성했습니다.
📌 robots.txt
robots.txt파일은 웹 사이트의 검색 엔진 크롤러나 로봇에게 어떤 페이지나 디렉터리를
크롤링하거나 색인화해도 되는지를 알려주는 파일입니다.- 검색 엔진 로봇이 웹 페이지를 방문할 때 먼저 해당 파일을 확인하여 어떤 경로를 크롤링할지 결정합니다.
저는 React 프로젝트 생성 시 기본적으로 제공되는 public/robots.txt 파일을 그대로 사용하여 모든 크롤링을 허용했습니다.
📌 sitemap.xml
sitemap.xml 파일은 웹 사이트의 페이지 목록을 구글 및 기타 검색 엔진에 제출하여 페이지 색인화를 돕는 파일입니다.
검색 엔진은 sitemap.xml 파일을 확인하여 웹 페이지를 더 효과적으로 색인화하고 검색 결과에 표시합니다.
Create your Google Sitemap Online - XML Sitemaps Generator
Installable version We offer a server-side script written in PHP language that you can install on your server and create sitemap for your website. The script doesn't have the limit on number of pages included in sitemap, although server resources depend re
www.xml-sitemaps.com
저는 위 페이지에서 URL을 입력하고 sitemap.xml 파일을 받은 후 public 폴더 밑에 넣어주었습니다.
📌 Google Search Console
- 메타 태그를 public/index.html의 <head> 안에 넣어주어 서치 콘솔을 등록했습니다.
- 위에서 생성하고 서버에 올려둔 사이트맵을 https://lingmo.me/sitemap.xml URL을 통해 인증했습니다.
- 마지막으로 색인 요청을 통해 구글 측 크롤링을 요청했습니다.
📌 Google Analytics
사용자 분석을 위해 구글 애널리틱스가 필요했습니다.
제공하는 스크립트를 index.html에 붙여넣기해서 구글 애널리틱스 인증을 진행했습니다.
📌 Naver Search Advisor
한국 검색시장 1위 네이버를 빼놓을 수 없죠.
네이버는 네이버 서치 어드바이저를 통해 크롤링을 허용하고 요청합니다.
📌 모바일 최적화
구글과 같은 주요 검색 엔진은 모바일 우선 인덱싱을 적용하고 있기 때문에
모바일 버전의 웹 페이지를 기준으로 색인화하고 순위를 매깁니다.
이러한 이유 때문에 설계 단계부터 모바일 기준으로 요소들을 쌓고,
미디어 쿼리를 적극 사용해 모바일 디바이스에 최적화 된 화면을 만들었습니다.
덕분에 서치 콘솔의 모바일 사용 편리성에서 모바일 지원 페이지 검증을 통과했습니다.
📌 https 적용
구글은 https를 사용하는 웹 사이트를 검색 결과에서 우선적으로 표시하는 경향이 있습니다.
https는 구글의 검색 알고리즘에서 가중치를 받고 있으며,
웹 사이트의 순위를 향상시키는 데 도움을 줄 수 있기 때문에 https를 적용했습니다.
React SPA 프로젝트의 번들 파일을 서빙할 떄 사용하는 nginx에 https를 적용하는 방법은 작성해둔 글을 참고해주세요.
[Docker + Nginx] Proxy Server에 Certbot으로 SSL 인증서 발급 받고 Https 적용하기
[Docker + Nginx] Proxy Server에 Certbot으로 SSL 인증서 발급 받고 Https 적용하기
⚡️ Certbot으로 SSL 인증서 발급받고 Https 적용하기 개인 리액트 프로젝트를 8080 포트로 올리고, 80 포트에는 Nginx를 이용해 프록시 서버를 올려 언제든 80 포트를 바꿀 수 있도록 했습니다. 그다음
lasbe.tistory.com
📌 Lighthouse 검사
이 외 등등 자잘한 것들을 포함해서 브라우저 Lighthouse에서 SEO 항목을 모두 만족시켰습니다.
'React' 카테고리의 다른 글
| [React] 선언적으로 유저 행동 이벤트 추적하기 with React.cloneElement() (0) | 2023.08.29 |
|---|---|
| [React, 사이드 프로젝트] 링모(LINGMO), 당신의 링크 모음 (0) | 2023.08.21 |
| [React] 스크롤 애니메이션, IntersectionObserver + styled-components (0) | 2023.08.06 |
| [React] Whitelabel Error Page 에러, 리액트로 간단하게 해결하기 (0) | 2023.08.04 |
| [React+TS] styled-components, ThemeProvider 타입 정의하기 (0) | 2023.05.28 |
오픈 채팅
댓글