[웹] 검색엔진최적화, SEO

CS 공부 - front

[웹] 검색엔진최적화, SEO

Nuri-KSLV-II 2023. 3. 9. 15:42

📌 검색엔진최적화란?(SEO, Search Engine Optimization)

검색엔진이 이해하기 쉽도록 홈페이지 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업

📌 검색엔진 최적화 가이드라인

1. 네이버

블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 동일한 내용의 콘텐츠일 때 네이버가 아닌 독립적인 홈페이지에 위치한 콘텐츠는 상위에 잘 노출되지 않음

2. 구글

홈페이지 관리자를 위한 '웹마스터'도구를 제공. 해당 도구를 통해 현재 구글 검색엔진이 자신의 홈페이지 콘텐츠를 어떻게 수집해가고 있는지, 각 페이지에 인덱싱이 잘 되고 있는지 등의 정보를 확인할 수 있음

→ 따라서 네이버와 구글 등 홈페이지를 어떤 브라우저에 더 중요하게 노출할 것인지 결정해서 SEO를 최적화하는 것이 중요.

📌 검색엔진 최적화 10가지 방법

1. 문법에 맞는 html 작성

- <title> 태그에는 사이트 제목을 기재하고, <div> 태그를 사용해 줄을 바꾸고, <strong>과 <em> 태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성

→ 검색엔진이 이해하기 쉬운 웹 문서가 되고, 유사한 내용의 웹 문서가 있을 경우 노출율이 높아짐

2. 구체적인 페이지 제목 만들기

- HTML 문서의 헤더에 들어가는 페이지 제목(title)은 구체적이고 간결하게 구성해, 검색 결과 화면에서 텍스트가 잘리지 않게함

- 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈( – ), 콜론( : ), 막대(ㅣ)

ex. 가비아 – 도메인등록, 도메인연장, 도메인이전, 도메인예약, 부가서비스

3. 메타 태그 활용하기

- 메타태그란, 문서의 정보를 담고 있는 태그

- 메타 디스크립션은 웹 페이지에 대한 간략한 요약을 제공하는 html 속성.

- <head>안에 위치하고, 검색엔진 로봇에게 해당 페이지에 대한 단서를 제공.

- Google 등 메타 태그 <meta> 정보를 검색 알고리즘 평가 대상에서 제외하는 검색엔진이 증가한다지만,

위 링커리어 예시처럼 검색엔진의 검색 결과에도 표시되고 있기 때문에 포함하는 것이 좋음.

- 활용예시

[구글에서 추천하는 디스크립션(description) 작성법]
– 웹사이트 내 모든 페이지에 동일한 디스크립션 적용은 효과적이지 않음
– 각 페이지의 내용을 전체적으로 요약해 서술한 내용을 넣는 것이 좋음
– 해당 페이지의 제목(title)과 중복되는 정보는 제외하는 것이 좋음
– 페이지가 많은 홈페이지의 경우, 최대한 잘 읽히고 스팸으로 구분되지 않게 구성해야 함
– 모든 페이지를 작성할 수 없는 상황이라면, 홈페이지 내 각 페이지에 우선순위를 두어 주요 페이지들만 작성하는 것을 추천

4. 이미지에 alt 속성 기재

- 검색엔진은 이미지 내 텍스트를 인지할 수 없음

- <img> 태그에 alt 속성을 넣어 적절한 대체 텍스트를 기재해야함

- alt 속성을 붙이면 HTML 코딩과 유용성 측면에서도 좋고, 시각장애인용 스크린리더가 사용될 때 이미지 대신 alt 속성 값을 읽어 대략 어떤 이미지인지 파악할 수 있도록 도움을 줌

- 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 함

- 이미지에 마우스 오버시, 풍선 도움말로도 활용 가능

5. 이미지 map에 중요한 링크 사용 피하기

- 이미지맵이란 이미지에 부분적으로 링크를 걸때 사용

- 이미지 한장에 여러 개의 링크 설치가 가능한데, 검색엔진이 링크를 따라 이동할 때 방해가 되는 요소이므로 중요한 링크를 걸지 않는다

ex. 여러 카테고리나 메뉴를 하나의 큰 이미지에 들어가게 만들어 놓고, 각 부분을 클릭하면 해당 페이지로 이동하도록 만든 사이트

6. 플래시 전용 페이지 피하기

- 대부분의 검색 엔진은 Flash 애니메이션의 텍스트를 수집할 수 없으며, 링크 또한 사용할 수 없음

7. anchor 태그를 활용한 적절한 키워드 배치

- 키워드가 본문에 기술되어 있지 않은 홈페이지는 검색 결과에 랭크되기 어려움

- 구글의 경우, ‘앵커 텍스트’ 링크로 해당 페이지에 키워드가 포함되어 있는지 체크함

- 앵커 텍스트란, 홈페이지에 삽입되는 링크 위에 있는 설명 문구(text)
- 앵커 태그란, 서로 다른 페이지 사이를 이동하거나 페이지 내부에서 특정한 위치로 이동할 때 사용

- 위와 같이 주요 키워드를 앵커태그 및 앵커텍스트로 삽입하면 seo에 도움이됨

8. 여러 개의 페이지로 나누어진 콘텐츠 검색 최적화 – 시리즈/연재

1) 전체보기 페이지를 만들어 제공

: 각각의 나누어진 페이지에 rel=”canonical” 링크를 삽입해 전체보기 페이지를 표시합니다.

ex. 티스토리 전체글에도 canonical태그로 티스토리 오리지널 사이트를 입력해 놓음

- 캐노니컬 태그를 쓰는 이유

구글에 아메리카노를 쳤는데 중복된 컨텐츠의 다른 사이트가 몇십개가 등장한다면 검색 사용자 경험이 떨어짐

→ 브라우저는 이에 따라 중복 컨텐츠를 다수 노출 시 패널티를 부여

→ 이러한 패널티를 피하기위해 하나의 페이지에서 중복 컨텐츠가 발생할 시 캐노니컬 태그에 적은 original 페이지로 보내서 전체보기 페이지를 만들어 제공함

2) rel=”next” 및 rel=”prev” 링크로 연재글 사이의 순서를 알림

Google에서는 해당 페이지를 논리적 순서로 처리하여 페이지의 링크 속성을 통합하고 검색자에게 주로 첫 번째 페이지를 표시해줌.

9. 모든 페이지가 유입페이지가 되도록 사이트 구성

- 사용자가 꼭 홈페이지의 메인 페이지만 방문하는 것은 아니기 때문에 가령, Google에서 키워드나 내용으로 검색하면, 검색 결과에는 원하는 정보가 있는 콘텐츠 페이지가 나타나고, 클릭하면 해당 페이지로 유입됨

- 따라서 홈페이지 내 어떤 페이지로 방문이 유입될지 모르기 때문에 모든 페이지에는 메인 페이지로 이동할 수 있는 링크를 설치해 전체 사이트의 ‘동선’을 개선

10. HTTPS 사용 권장

- 동일사이트라면 http로 서비스 하는 것보다, https로 서비스 할 경우 구글 검색엔진에서 전체 점수의 약 1% 정도에 해당하는 랭킹 가산점을 부여

출처, 가비아 테크블로그https://library.gabia.com/contents/domain/4359/

저작자표시

'CS 공부 - front' 카테고리의 다른 글

[웹] canonical url (0)	2023.04.06
[웹] Google AMP (1)	2023.04.06
[웹/최적화]Image Lazy Loading (2)	2023.02.27
[리액트] flux 패턴과, 미들웨어 종류 및 장단점 (0)	2023.02.23
[JS] 깊은복사 vs 얕은복사 (0)	2023.02.15

현재글[웹] 검색엔진최적화, SEO

Nuri-KSLV-II

🚀 Time waits for no one !! 🚀 #front-end developer #samsung software academy for youth

운영체제, createAsyncThunk, 2667 create-hello-world-function, CSSOM Tree, 가비아테크블로그, 자료구조, let, const, rest syntax, SSAFY, var, 오블완, mapStateToProps, OS, javascript, 티스토리챌린지, 리액트, JS, 브라우저 렌더링 과정, preconnect,

Today :
Yesterday :

일	월	화	수	목	금	토
			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

Nuri-KSLV-II