| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- raect typescript #react #typescript #styled-component
- axios
- react fragment
- React-Query
- React #controlled component #비제어 컴포넌트 #제어 컴포넌트
- 빡킹독
- npm #not being able to find a file #npm install Error
- #useRef #언제 쓰는데?
- DP #c++
- 이친수
- donwstream #upstream #origin
- react
- React #Hook rules #Hook 규칙
- 백준 #직각삼각형
- 코드스테이츠 #알고리즘 #그리디
- React #리액트 이벤트 주기 #리액트 이벤트
- html entities
- rate limit
- 플로이드 #c++
- 노마드 코더 #타입스크립트 #typescript #class
- React #effect hook #useEffect
- 다익스트라 #파티 #백준
- 버블링 #갭쳐링 #이벤트 #JS
- 얕은 복사 #깊은 복사 #shallow copy #deep copy
- react #useCallback #react Hook
- interceptors
- RateLimit
- JWT #토큰 #refreshToken #accessToken #Token #token #localStorage #sessionStorage
- useState #Hooks
- 백준 #적록색약
- Today
- Total
꿈꾸는 개발자
SEO(Search Engine Optimization, 검색 엔진 최적화) 본문
웹 페이지를 열심히 만들었다고 가정했을 때 구글이나 네이버 검색을 통해 사용자들에게 노출되지 않는다면, 그것만큼 허무한 것은 없을 것이다. 이와 같은 불상사를 방지하기 위해서 검색 엔진의 작동 방식에 따른 최적화 작업이 곧 SEO(Search Engine Optimization, 검색 엔진 최적화)이다. SEO를 통해 자신이 개발한 웹 사이트를 더 상위로 노출시키게끔 작성할 수 있다.
SEO의 분류: (SEO는 크게 On-page SEO와 off-Page SEO 두 가지로 나뉜다)
- On-Page SEO: 페이지 내부에서 진행하는 SEO, 제목, 콘텐츠, 핵심 Keyword의 배치 등 HTML 요소 사용법을 이용하는 방식이다.
- Off-Page SEO: 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법이다 (웹 페이지의 구조와는 관련이 없음)
본 글에서는 웹 페이지를 작성할 때 주로 활용하는 On-page SEO에 대해서 다루고자 한다.
SEO 예시:
일반적으로 구글 검색창에 위와 같이 입력을 했을 때 가장 상단에 뜨는 링크를 타고 들어가면
- 각 <meta> 요소와 <title> 요소에 '자바스크립트'와 'Deep Dive'가 들어가 있는 것을 확인할 수 있습니다. 이처럼, 웹 페이지에 사용되는 HTML 요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 주고 있음을 확인할 수 있다. (수많은 요소 중 일부에 불과) 이 외에도 On-page SEO는 다양한 방법으로 검색 최적화를 실현하려고 한다.
<title> 요소
title요소는 검색 결과창 중 제목에 해당한다. <head>의 요소의 자식으로 작성되며, 사용자들에게도 가시적으로 가장 먼저 보이는 부분이기 때문에 중요한 역할을 차지한다.
- 명료한 title 내용이 유입률을 높일 수 있다
- 핵심 키워드가 포함되면 상위에 노출될 확률이 올라간다 (하지만, 제목에 한 번만 포함하는 것을 권장함)
<Meta> 요소
<Meta>요소는 데이터를 담는 요소이다. Meta요소는 해당 웹 사이트에서 어떠한 데이터를 다루고 있는지 브라우저에게 알려주는 데이터를 담고 있다. 보통 <head>의 자식요소로 작성된다.
- 링크로 표시된 부분의 아랫 부분이 바로 <Meta> 요소 안에 들어있는 내요들이다. <Meta>태그의 내용은 단순히 웹 페이지에서만 보이는 것이 아니라, 채팅 애플리케이션에서 링크를 보낼 때 미리보기와 관련된 정보도 <Meta>요소와 연관돼 있다.
두 가지 경우 모두 <Meta>를 사용하지만
- 첫 번째: name 속성을 사용 - SEO를 위해 사용
- 두 번째: property 속성을 사용 - 다른 사용자와 공유 목적으로 사용 (Open Graph)라고 한다
SEO를 위한 meta 요소
<meta name="속성값" content="내용" />- 주로 사용되는 속성값은 description, keywords, author 등이 있다
오픈 그래프 (open graph) - Meta(전 페이스북)에서 게시물 공유를 위해 만든 기능
<meta property="속성값" content="내용" />
이렇게만 보면 Open Graph를 작성하는 건 단순히 게시물 공유 목적으로만 생각하기 쉽디ㅏ. 하지만, 게시물에 대한 적절한 정보는 간접적으로 웹 유입률에 연관되기 때문에 SEO에 중점을 두고 개발을 한다면, SEO 최적화를 중점으로 하되, Open Graph도 잘 작성해주느 것이 중요하다.
<hgroup> 요소
<hgroup>은 <h1>~<h6>까지 제목을 표시하는 용도로 사용하며, 주로 제목은 핵심 키워드를 담고 있기 때문에 검색 엔진 또한 이를 중시한다. 따라서, 이를 의식해서 핵심 키워드를 작성해주면 효율적이다. 하지만, 동일한 키워드의 반복은 비효율적이며, 다양한 키워드의 사용이 권장된다.
콘텐츠
주의점:
복+붙: 을 주로 할 경우 검색 엔진에서는 중복 문서로 간주 후 아예 검색 결과에서 배제할 수도 있다. 타 사이트의 글을 인용하고 싶다면 일부만 가져오고 링크를 첨부하여 출처를 밝히는 것이 좋다.
이미지를 넣을 경우:
검색 엔진의 경우 이미지를 내에 있는 내용을 읽을 수 없으니 필히 alt 속성을 명시해주는 것이 좋다. 하지만, 너무 길게 작성할 경우 스팸으로 인식할 수 있으니 주의하자!
추가로 학습하길 원하는 경우 아래 링크 참고: (SEO최적화 가이드만 구글링해도 양질의 자료들이 많이 있음)
Reference:
https://library.gabia.com/contents/domain/4359/
가비아 라이브러리
IT 콘텐츠 허브
library.gabia.com
https://ko.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94
검색 엔진 최적화 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 검색 엔진 최적화(영어: search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.[1] 웹
ko.wikipedia.org
https://yozm.wishket.com/magazine/detail/1540/
검색엔진 최적화(SEO)란? | 요즘IT
웹 기반 서비스를 운영하다 보면, 단순히 서비스의 사용성 자체에만 치중하는 경우가 더러 생깁니다. 하지만 잘 살펴보면 유저 사용성만큼이나 집중해야 할 부분이 있습니다. 바로 SEO(Search Engine
yozm.wishket.com
