티스토리 뷰

HTML

검색엔진 최적화(SEO)

Front_end 2022. 1. 31. 23:45

검색엔진 최적화(SEO)란?

검색엔진 최적화(SEO)란 검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 작업을 말합니다. 기본적인 작업 방식은 특정 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것입니다.

검색엔진에 알고리즘이?

SEO의 첫 단계는 구글, 네이버 등 타겟팅 하고 있는 검색엔진이 어떻게 동작하는지, 홈페이지 내 콘텐츠를 검색봇이 잘 인식해 수집해갈 수 있게 하려면 어떻게 구성해야 하는지를 알아야 합니다.

네이버의 경우, 블로그/카페/지식인 위주로 콘텐츠가 노출되기 때문에 독립적인 홈페이지에서 제공하는 콘텐츠로는 노출이 쉽지 않습니다. 즉, 동일한 내용의 콘텐츠라도 네이버 서비스 내에 자리잡은 콘텐츠가 네이버 밖 홈페이지에 위치한 콘텐츠보다 검색 결과 상위에 더 잘 노출된다는 것입니다.

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

=> 따라서 네이버와 구글 중 홈페이지를 어디에 더 중요하게 노출할 것인지 결정해, SEO를 최적화하는 것이 중요합니다.

[검색엔진최적화(SEO)로 구글 상위에 랭크되는 5가지 방법]

1. 문법에 맞는 HTML 작성하기

<title> 태그에는 사이트 제목을 기재하고, <div> 태그를 사용해 줄을 바꾸고, <strong>과 <em> 태그를 활용해 강조하고 싶은 키워드에 붙이는 등 적절한 HTML 소스로 홈페이지를 구성하는 것은 결과적으로 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 유사한 내용의 웹 문서가 있을 경우 상대적으로 이러한 문서의 순위가 높아집니다.

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

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

  • 유인 키워드 반복 삼가 (예) café, ca fe, 카페, 카 페
  • 복적이고 틀에 박힌 제목 삼가
  • 목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 하이픈( - ), 콜론( : ), 막대(ㅣ)
  • (예) 가비아 - 도메인등록, 도메인연장, 도메인이전, 도메인예약, 부가서비스

3. 메타 태그 활용하기

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

<meta name="keywords" content = "키워드 1, 키워드2">
<meta name = "description" content = "페이지 내용을 정리한 소개 글(검색 결과 프리뷰로 나타나는 영역)">

의 정보는 검색엔진의 검색 결과에도 표시되고 있기 때문에 포함하는 것이 좋습니다.

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

4. 이미지에 alt 속성 기재

alt 속성이란, alternative의 의미로 이미지가 로딩되지 못했을 때 대신 표시되는 텍스트입니다.

주로 홈페이지 내부에는 기업명/로고/배너/상품명/카피 등을 이미지로 표현하는데, 이 경우 반드시 <img> 태그에 alt 속성을 넣어 적절한 대체 텍스트를 기재해야 합니다. 이미지 속에 그려진 문자는 검색엔진에 의해 인식되지 않기 때문입니다.

alt 속성을 붙이면 HTML 코딩과 유용성 측면에서도 좋고, 시각장애인용 스크린리더가 사용될 때 이미지 대신 alt 속성 값을 읽어 대략 어떤 이미지인지 파악할 수 있도록 도움을 줍니다. 검색엔진 또한 이미지를 발견하면 alt 속성 안의 텍스트를 통해 인덱싱 작업을 하기 때문에 SEO에 좋습니다.

(예) <img src=그림이름/gif border=0 alt=“그림설명”> 이미지에 마우스오버 했을 때, 풍선 도움말로도 활용할 수 있습니다.

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

이미지 맵은 <map> 태그와 <area> 태그를 이용해 한 장의 사진에 여러 개의 링크를 설치하는 것입니다. 이미지 맵은 검색엔진이 링크를 따라 이동할 때 방해가 될 수 있으므로, 중요한 링크 설치는 피합니다.

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

'HTML' 카테고리의 다른 글

웹 사이트 이미지 표현 방법  (1) 2022.02.03
그리드 시스템  (0) 2022.02.03
시맨틱 태그  (0) 2022.01.27
HTML의 기초문법과 웹표준, 접근성, 호환성  (0) 2022.01.27
HTML의 구성요소 4가지  (3) 2022.01.20
댓글
© 2018 webstoryboy