HTML 검색 엔진 최적화와 웹 표준성

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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

Archives

Today

Total

관리 메뉴

kohigowild

HTML 검색 엔진 최적화와 웹 표준성 본문

HTML | CSS

HTML 검색 엔진 최적화와 웹 표준성

kohi ☕ 2022. 11. 2. 14:37

💭 SEO란?

검색 엔진 최적화(search engine optimization, SEO)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다.
검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하기 때문에 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화한다.

💭 Semantic Tag

Semantic Tag란 사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다. 시맨틱 태그를 사용하면 다음과 같은 효과를 얻을 수 있다.
- 검색 엔진 최적화: 특정 키워드로 검색 시 검색창에 사이트가 노출된다. 즉, 검색 엔진에 어떤 검색 결과에 웹 사이트를 띄워야 하는지 알려줄 수 있다.
- 웹 접근성: 스크린 리더가 시맨틱 태그를 만나면 특정 효과가 발생한다. 적절한 시맨틱 태그로 잘 만들어진 웹 사이트라면 스크린 리더, 키보드만을 이용할 때에도 문제 없이 동작한다.
- 유지 보수: 가독성이 좋고 다른 개발자들이 코드를 유지 보수하기 편해진다!

💭 Semantic Tag의 종류와 특징

strong

<div>바쁘다 <strong>바빠</strong> 현대사회</div>
<div>바쁘다 <b>바빠</b> 현대사회</div>
<div>바쁘다 <span style="font-weight: bold">바빠</span> 현대사회</div>

스타일은 모두 똑같이 적용되나, strong 태그를 활용한 구문만이 스크린 리더기가 강조하며 읽고, 나머지 태그는 일반 문장으로 인식한다. strong 태그를 활용한 구문은 검색 엔진에도 강조된 문장으로 전달된다.

em

<div>바쁘다 <em>바빠</em> 현대사회</div>
<div>바쁘다 <i>바빠</i> 현대사회</div>
<div>바쁘다 <span style="font-style: italic">바빠</span> 현대사회</div>

strong 태그와 마찬가지로 em 태그를 활용한 구문만 스크린 리더기가 강조하며 읽고, 검색 엔진에 강조된 문장으로 전달된다.

mark

<div>바쁘다 <mark>바빠</mark> 현대사회</div>

del

<div>바쁘다 <del>바빠</del> 현대사회</div>
<div>바쁘다 <span style="text-decoration: line-through">바빠</span> 현대사회</div>

style 적용 태그의 경우 의미 전달은 불가하다.

ins

<div>바쁘다 <ins>바빠</ins> 현대사회</div>
<div>바쁘다 <span style="text-decoration: underline">바빠</span> 현대사회</div>

style 적용 태그의 경우 의미 전달은 불가하다.

blockquote

<blockquote cite="출처 기입">That which we persist in doing becomes easier for us to do; not that the nature of the thing itself is changed, but that our power to do is increased.</blockquote>

장문의 인용글 삽입 시 사용, cite에는 출처를 기입한다.

q

<q>There is no royal road to Rome.</q>

짧은 인용글 삽입 시 사용

abbr

<abbr title="Falling off my chair laughing">FOMCL</abbr>

약어 삽입 시 사용, title에는 풀네임을 기재한다. 위 예시에서 FOMCL에 커서를 올리면 title 내용의 툴팁이 생긴다.

address

<address>
	<div>전라남도 여수시 시전동</div>
	<div>https://trustmitt.tistory.com/</div>
</address>

💭 왜 Semantic Tag를 써야 할까?

페이지 내 모든 요소를 div로 작성하는 경우에도 웹 페이지의 UI에서는 차이가 없으나, 웹 페이지에 접근하는 것은 일반 사용자뿐만 아니라 웹 크롤러와 검색 엔진 스파이더도 포함된다는 것을 간과하지 말아야 한다. 크롤러와 스파이더는 사전 지식 없이 웹 페이지를 자동으로 읽고, 이것이 곧 검색 엔진 순위로 이어지기 때문에 웹 페이지의 의미론적 명확성을 위해 시맨틱 태그 사용은 필요하다.

시맨틱 HTML은 시맨틱 태그를 사용하는 것뿐만 아니라 모든 사용자가 쉽게 탐색할 수 있도록 각 요소에 올바른 태그를 사용하는 것이다.

💭 Alt Text

Alt Text(대체 텍스트)는 alternative text의 축약으로, 브라우저가 이미지를 렌더링 하지 못할 때 웹 페이지에 표시되는 설명 문구이다. 태그라기보다는 이미지 속성이다.
Alt Text의 핵심 기능은 스크린 리더를 사용하는 시각 장애인을 위해 웹 이미지 접근성을 향상하는 것이다. 또한 검색 엔진이 이미지를 올바르게 색인화하고, 유기적 트래픽을 유도하는 데 도움이 되는 이미지에 더 나은 콘텍스트를 제공하여 SEO 순위를 향상한다.

💭 WAI-ARIA

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)는 W3C에서 정의한 기술로 웹 접근성을 위해 지원되는 여러 특성들을 의미한다. 일반 사용자가 보기에 정상인 화면들도 HTML 요소에 따라 스크린 리더 등의 보조기기에서 제대로 읽히지 않을 수 있으므로, WAI-ARIA는 이를 개선하기 위해 웹 애플리케이션에 역할, 속성, 상태 정보를 추가할 수 있다.

Role

<input type="text" role="searchbox" />

Role은 HTML 요소의 역할을 정의한다. 태그가 암묵적으로 가지고 있는 role이 있고, 각 태그별로 적용할 수 있는 role도 있다.

Properties & States

<input type="text" role="searchbox" aria-required="true" />

요소가 기본적으로 가진 특징 or 상황, “aria-”라는 접두어를 갖는다.

💭 스크린리더가 이미지를 무시하는 방법

// css의 background 속성
{background-image: url("bg.gif");}

// alt 속성을 빈 값으로 사용
<img src="spacer.gif" alt="">

// aria-hidden 사용
<img src="bg.jpg" aria-hidden="true">

// role = "presentation" 사용
<img src="bg.jpg" role="presentation">