일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- useEffect
- VanillaJS
- 완전탐색
- webpack
- prettier
- seo
- Permutations
- 코테
- useState
- 프로그래머스
- 환경설정
- react internals
- pjax
- venv
- BFS
- Hook
- canvas
- 그리디
- react
- web
- Custom Hook
- useMemo
- 비동기
- eslint
- 코딩테스트
- python
- await
- React.memo
- VanillJS
- useCallback
- Today
- Total
Amada Coding Club
[Front-End] SEO의 개념과 중요성 본문
원래는 웹 라우팅에 대한 글을 먼저 쓰려고 했다가 참조 블로그에서 SEO와 SSR에 대한 내용을 다뤄 이 부분에 대해 먼저 이야기를 적어보고자 한다.
이 게시글은 SEO에 대한 내용이다.
SEO란?
SEO는 Search Engine Optimization의 약자로 검색엔진최적화, 즉 구글, 네이버, 다음과 같은 검색엔진에서 사이트를 쉽게 찾도록 하는 프로세스, 작업, 절차를 말한다.
검색 엔진이 사이트를 쉽게 찾도록 하는 건 왜 중요할까?
우리가 검색어를 입력해 검색할 때 검색 엔진은 크롤링 후 자체적으로 정한 기준을 바탕으로 우선순위를 부여해 페이지 순서를 결정한다. 만약 제작한 사이트가 검색 엔진의 기준에 부합할수록 높은 우선 순위를 가질 수 있고 페이지의 상단에 위치 할 수 있다.
일반적으로 검색을 할 때 1-2페이지 안에 대부분의 정보를 찾고 검색을 종료하는 경우가 대다수이다.
다음 결과와 같이 페이지가 1에서 2로 넘어갈 때 트래픽 수(해당 페이지를 이용하는 횟수)가 급격하게 줄어드는 모습을 볼 수 있다. 그래서 사이트가 1페이지에 올라가야 더 많은 고객을 모을 수 있다고 이해할 수 있다.
또한, 같은 페이지라도 어느 위치에 있냐에 따라 접속 횟수가 달라진다.
위 결과는 사이트 별 클릭 횟수를 비율로 나타낸 사진이다. 보면 페이지가 하단으로 갈수록 접속자 수가 급격히 줄어드는 모습을 볼 수 있다. 이는 가급적 높은 페이지, 상단에 위치해야 더 많은 사용자를 모으고 홍보효과를 높일 수 있다는 것을 보여준다.
그러면 어떻게 해야 페이지 상단에 위치할 수 있을까?
2가지 방법이 있다
1. 광고
- 페이지 상단에 위치시킬 수 있는 확실한 방법
- 그러나 비용이 많이 듦
2. SEO 향상
- 비용이 적게 들며 지속적으로 상단에 위치시킬 수 있음
- 상단에 위치시키기 위한 작업이 많이 필요함
두 가지 방법 중에서 단기간에 확실한 효과를 얻을 수 있는 방법은 광고이지만 지속적인 효과를 나타내기 위해선 SEO를 최대한 적용하는 방법을 사용해야한다.
SEO 적용 방법
각 검색엔진은 자체적인 SEO 기준을 가지고 있다.
일단 구글의 경우를 살펴보자
구글의 크롤링 봇은 사용자가 페이지를 인식하는 방식과 비슷하게 페이지를 인식한다. 그래서 크롤링 봇이 페이지를 더 쉽게 이해하기 위해서 개발할 때 아래 내용을 참고해서 작업해야 한다.
- <title>을 이용해 고유하고 정확한 페이지 제목 만들기
- 검색 결과에서 시선을 끄는 제목 링크와 스니펫 제작하기
- <meta> 설명 태그 작성하기
- 표제 태그를 이용해서 중요한 부분 강조하기
- 구조화된 데이터 마크업 추가하기
- 모바일에 최적화하기
위 내용들을 무조건 반영할 필요는 없다. 필요에 따라 적절히 적용하는 것이 중요하다. 그러나 적용을 많이 할 수록 구글 봇이 사이트를 찾기 쉬워져 상단에 올라갈 가능성이 높아진다는 점 참고바란다.
위 내용 이외에도 검색엔진이 페이지를 더 쉽게 찾을 수 있는 방법이 여러가지가 있다. 그 내용들은 구글 SEO 사이트를 참고하자.
만약에 구글 봇이 어떤 페이지를 탐색하는 걸 막고 싶다면 robots.txt를 제작해 크롤링을 막을 수 있다.
# brandonsbaseballcards.com/robots.txt
# Tell Google not to crawl any URLs in the shopping cart or images in the icons folder,
# because they won't be useful in Google Search results.
User-agent: googlebot
Disallow: /checkout/
Disallow: /icons/
이 부분은 구글의 robot.txt 설명을 참고하면 좋다
구글에서는 robot.txt는 안전한 방법은 아니기 때문에 개인정보 등 민감한 내용을 숨기고 싶을 경우 <noindex>태그를 사용하거나 비밀번호를 등록하는 방법을 사용하도록 권장하고 있다.
SEO에 대해 간략하게 이야기 해봤다.
원래는 그냥 사이트를 만드는 것만 신경썼었는데 수익성이나 사용자 유치를 위해선 SEO에 대해서도 신경써야 한다는 사실을 느낄 수 있었다. 다음 프로젝트에선 한번 SEO에 대해 생각해봐야겠다.
<다음 게시글>
<참고>
'Front-End > 관련 지식들' 카테고리의 다른 글
[SPA SSR] SSR을 통한 SEO 문제 해결 / 언제 쓸까? (0) | 2023.01.12 |
---|---|
[SPA SEO] SPA에서의 SEO 문제 (0) | 2023.01.12 |
[Eslint & Prettier] Eslint와 Prettier에 대해 알아보자 (0) | 2023.01.04 |
[node.js npm] package.json은 뭘까? (0) | 2023.01.04 |
WebPack에 대해 알아보자 (0) | 2023.01.04 |