웹 표준과 SEO

Rosevillage·2023년 2월 28일
0

웹 표준과 SEO에 대해 간략하게 정리한다.

웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙으로,
W3C(World Wide Web Consortium)에서 권고하며, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 포함한다.

최신 웹 브라우저들은 모두 웹 표준을 지원하기 때문에 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다.

장점

  1. 유지 보수의 용이성
    웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드가 많았지만 웹 표준에 의해 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하게 되었다.

  2. 웹 호환성
    웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.

  3. 검색 효율성 증대
    적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문에 검색 엔진에서 높은 우선 순위로 노출될 수 있다.

  4. 웹 접근성 향상
    향상된 호환성으로 다양한 환경의 사용자들의 웹 접근성을 향상시킨다.

SEO (search engine optimization)

검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정으로, 웹사이트가 검색결과의 상위권에 나오도록 최적화하는 것을 의미한다.

검색엔진은 웹을 크롤링하면서 페이지에서 페이지링크로 따라가고, 찾은 콘텐츠의 색인을 생성한다.

이 크롤러는 일련의 규칙을 따르기 때문에 규칙과 밀접하게 웹사이트를 만들면 웹사이트가 검색결과의 상위에 노출돼 수익으로 연결될 수 있다.

  • 색인(index)
    검색엔진이 만드는 웹페이지에 대한 정보의 목록으로, 각페이지의 색인 항목은 해당 페이지의 콘텐츠 및 위치(URL)을 명시한다.

  • 크롤링(crawling)
    크롤러가 하는 웹 탐색 작업을 지칭하며, 신규 또는 업데이트된 웹페이지를 찾는 프로세스다.

  • 크롤러(crawler)
    조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램으로 크롤러는 대체로 방문한 사이트의 모든 페이지 복사본을 생성하는 데 사용되며, 검색 엔진은 이렇게 생성된 페이지를 보다 빠른 검색을 위해 인덱싱한다.

    또한 크롤러는 링크 체크나 HTML 코드 검증과 같은 웹 사이트의 자동 유지 관리 작업을 위해 사용되기도 하며, 자동 이메일 수집과 같은 웹 페이지의 특정 형태의 정보를 수집하는 데도 사용된다.

최적화의 분류

최적화 하는 방법에 따라 크게 2 가지로 분류된다.

  • On-Page SEO
    웹 사이트 내에서 검색엔진 최적화를 위해 하는 일련의 작업으로,
    H태그, 메타태그, 이미지 최적화, 콘텐츠 최적화, 글자의 수, 내부 링크등의 요소들이 포함된다.
  • Off-Page SEO
    웹 사이트 외부에서 검색 엔진 최적화를 위해 하는 일련의 작업으로
    관련성, 신뢰성 및 권한이 포함되고, 사이트로 향하는 백링크(다른 사이트에서 연결되는 링크)가 주된 작업이다.

웹 페이지를 개발할때 할 수 있는 최적화 방법은 주로 on-page seo이다.

On-Page SEO 방법

1. head 태그

  1. Off-Page SEO

  2. On-Page SEO

  3. html title 태그

  4. hmtl meta(name: description) 태그

위의 사진에서 확인할 수 있듯이 1번은 Off-Page SEO를 통해 검색결과 상단에 노출된 것이고,
2번은 On-Page SEO를 통해 노출된 것이다.

검색 결과에서 보이는 사이트들의 제목과 설명은 크게 title과 meta 태그에 의해서 정해진다.

title

<head>의 자식 요소로, 주로 탭에 나타나는 제목과 검색 결과에 나타나는 제목을 보여준다.

  • 검색 결과에서 가장 도드라지게 보이는 부분이기에 어떻게 작성하느냐에 따라 유입을 유도할 수 있다.

    제목이 너무 길거나 짧으면 제목으로 사이트를 파악하기 어려워지기 때문에 유입률이 떨어진다.

  • 핵심 키워드가 포함되면 상위에 노출될 확률이 높아진다.

    하지만 같은 키워드를 남발하면 검색시 불이익이 있을 수 있기 때문에 핵심 키워드는 한 번만 포함시키는 것이 좋다.

<head>
  <title>키워드가 반복되지 않으면서 핵심의 유추가 가능한 적절한 길이의 제목</title>  
</head>

meta

<head>의 자식 요소로, 메타 데이터(해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터)를 나타내는 요소로

  1. 웹 상의 검색 결과(SEO)

  2. 메신저를 통한 링크 공유시 미리보기

등의 상황에서 모두 사용된다.

첫 번째 경우는 name 속성을 사용하며, 두 번째 경우는 property 속성을 사용한다.

property 속성을 사용하는 경우는 오픈 그래프(Open Graph) 라고 하며, 페이스북(현 Meta)에서 게시물을 공유하기 위한 목적으로 만들었다.
각 속성값 앞에는 오픈 그래프를 뜻하는 “og”가 붙는다.

SEO
<meta name="속성값" content="내용" />
name설명
description콘텐츠에 대한 간략한 설명, 검색결과 제목 하단의 설명
keywords웹 페이지의 관련 키워드들을 나열할 때 사용
author콘텐츠의 제작자를 표시
오픈 그래프(open graph)
<meta property="속성값" content="내용" />
property설명
og:url페이지의 표준 URL
og:site_name사이트의 이름
og:title콘텐츠의 제목
og:desciprtion콘텐츠에 대한 간략한 설명, 미리보기 하단의 설명
og:image미리보기로 표시될 이미지
og:type콘텐츠 미디어의 유형. 기본 값은 website.
video, music 등의 유형 표시가능
og:local리소스의 언어. 기본값은 en_US. 한국은 ko_KR

2. 콘텐츠

개성있는 브랜딩

아이디어나 이름이 겹치지 않는다면, 관련 키워드를 검색했을 때 해당 웹 사이트가 상위권에 뜰 가능성이 매우 높다.
따라서 애초에 해당 웹 사이트만 검색될 수 밖에 없는 아이디어를 내는 것도 아주 좋은 SEO 전략 중 하나다. 꼭 이름이나 서비스의 종류가 아니더라도, 웹 사이트만의 독특한 이벤트나 콘텐츠를 만들어내는 것도 훌륭한 방법이다.

고유 콘텐츠

타 사이트의 글을 그대로 복사해서 사용하면 검색 엔진은 중복 문서로 판정하여 아예 검색 결과에서 생략해버릴수 있기 때문에 타 사이트의 글을 복사 붙여넣기 하는 방식은 지양해야하며, 타 사이트의 글을 인용때는 일부만 가져오고, 링크를 첨부하여 출처를 표기하는 것이 좋다.

명확한 제목과 설명글

해당 사이트의 기능과 의도를 명확하게 나타내는 제목과 길지 않은 설명글이 사용자의 방문을 더 이끌어 낼 수 있으며, 반대로 검색결과만을 위해 상관없는 제목과 설명글, 혹은 태그를 남발할 경우 스팸요소가 있는 사이트로 분류되거나 사용자들에게 나쁜 인식으로 새겨질 수 있다.

글자의 높은 활용

적절한 이미지의 사용은 콘텐츠의 품질을 높여주지만 필요 외의 과한 이미지사용은 SEO에 불리하다. 검색 엔진은 이미지 내에 존재하는 글자를 읽을 수 없기 때문이다.

이미지가 필수적인 상황이라면 alt 속성을 사용하여 해당 이미지에대한 설명을 텍스트로 작성하는 것이 좋다. 하지만 이 역시 너무 길게 작성하면 스팸 요소로 인식할 수 있으니 꼭 필요한 설명만 작성해야 한다.

3. hgroup

h태그로 이루어진 주제목 부제목을 포함할 수 있는 요소로 몇년 전에 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있으며 현재 hgroup의 의미는 이론적으로만 유효하다.

그래서 hgroup이 SEO에 영향을 주는지에 대한 명확한 증거를 가지는 의견을 찾지 못했기에 소개 정도만 하고 넘어간다. 추후에 이와 관련된 답을 얻게 된다면 수정하겠다.


Reference

위키백과-검색 엔진 최적화

MDN-Crawler

google-google 검색 센터-검색엔진 최적화(SEO) 기본 가이드

MDN-hgroup

코드 스테이츠

0개의 댓글