[FEATURE] 검색엔진 최적화(Search Engine Optimization, SEO)
SeoMiYoung opened this issue · comments
📝 SEO 태그란?
검색엔진 최적화(Search Engine Optimization, SEO)란, 웹사이트의 내용, 구조, 링크 등을 최적화하여 검색엔진에서 높은 순위를 차지할 수 있도록 하는 작업입니다. 검색엔진 최적화를 위해 사용되는 메타 태그들을 소위 SEO 태그라고 통칭합니다.
1️⃣ SEO 태그 - title
가장 대표적인 SEO 태그로 웹페이지의 제목을 명시하는 <title> 요소를 들 수 있습니다. <title> 태그는 검색엔진 뿐만 아니라 브라우저에서도 중요한 역할을 하는데요, 바로 브라우저 탭의 파비콘(favicon) 이미지 옆에 표시되는 텍스트가 이 <title> 태그의 내용이기 때문입니다.
저희 프로젝트에서는 문서의 title을 바꿔주는 hook(src/hooks/useDocumentTitle.js)을 활용해서 title을 바꿀 수 있게 해놨습니다.
| 페이지 | title |
|---|---|
| Home(메인 페이지) | Karly - 멋쟁이사조처럼 |
| SignIn(로그인 페이지) | 로그인 - Karly |
| SignUp(회원가입 페이지) | 회원가입 - Karly |
| ProductDetail(제품 상세 페이지) | 제품명 - Karly |
| ProductList(제품 나열 페이지) | 상품 - Karly |
| Cart(장바구니 페이지) | 장바구니 - Karly |
2️⃣ SEO 태그 - Open Graph
요즘에는 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 좀 더 넓은 분야에서 활용되고 있습니다. Open Graph는 사이트를 공유했을 때, 사이트를 접속하기 이전에 사이트에 대한 정보를 미리 확인해 볼 수 있는 미리보기와 같은 것입니다. 카카오톡, 슬랙 등과 같은 SNS에 링크를 공유하면 저절로 이미지/링크/title/설명이 뜹니다.
✅ 로컬 환경(localhost)에서 Open Graph를 테스트하는 방법
localhost:3000의 경우, 아무리 SNS에 공유하더라도, Open Graph를 읽지 못합니다.
따라서 임시로 15분동안 firebase에 배포를 해주는 크롬 익스텐션인, Localhost Open Graph Checker (다운링크)를 사용합니다.
[STEP1] npm start로 로컬 환경 열기
[STEP2] 열린 로컬 환경에서 확장프로그램인 Localhost Open Graph Checker열기
[STEP3] 임시로 생성된 배포링크를 복사해서 SNS에 공유해서 Open Graph 확인
✅ public/index.html에 추가한 코드
The Open Graph Protocol 공식 문서에 의하면, Basic Metadata에 포함된 4가지(title, type, image, url)는 필수적으로 작성해야 한다고 안내되어있습니다.
<meta property="og:title" content="Karly" />
<meta property="og:description" content="멋쟁이사자처럼 프론트엔드 스쿨 4기 멋쟁이사조팀의 Final Project로 진행된 Karly입니다." />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://user-images.githubusercontent.com/112063987/235391728-8c652cd6-62bf-4af3-9d78-123e433382c5.png" />
<meta property="og:url" content="페이지 URL" />
✅ After...
3️⃣ 파비콘
김데레사 선생님으로부터 기존의 파비콘(강아지 사진)이 만든 웹페이지에 적합하지 않다는 피드백을 받았습니다.
✅ Before...
✅ After...
📝 추가로 생각해봐야 할 사항..
- Open Graph에서 페이지 URL 설정이 왜 필요한가(굳이 설정 안해줘도 잘 작동은 되기 때문) 정확히 찾아보기.
- 원래는 페이지별로 Open Graph를 다르게 해줘야한다. 만약에 추후에 시간이 주어진다면, title을 바꿔주는 useDocumentTitle.js처럼, Open Graph설정을 바꿔주는 훅을 따로 만들어서 페이지별로 다른 Open Graph를 주고 싶다.
- Open Graph의 이미지를 Public의 asset으로 설정이 안되는점