(SEO 최적화를 위한) 잊고 있는 HTML 태그 10가지

프론트엔드 개발자로서 SEO 최적화를 위해 시맨틱 태그를 활용하여 마크업을 하는 습관이 필요하다. <header>, <nav>, <main>, <aside>, <article>, <section>, <footer> 등은 시맨틱 마크업의 기본이라 할 수 있는데, 그 외의 수많은 태그들은 사용할 일이 많지 않아 쉽게 떠오르지 않는 것 같다. 그럴 때를 위해 잊기 쉬운 태그 10가지를 복기해 보자.

 

 

1. 반응형 이미지: <picture>

이미지를 반응형으로 다루기 위해 보통 CSS를 조작하는 경우가 많은데, 이외에 <img> 태그에 srcset 속성 및 sizes 속성을 이용하는 방법과 <picture> 태그와 <source> 태그를 조합하는 방법도 있다. <picture> 태그의 경우, 하나의 <img> 태그에 대해 여러 개의 반응형 이미지를 제공하는 0개 이상의 <source> 태그를 삽입하여 대역폭을 절약하고 페이지 로드 시간을 단축할 수 있다. 적절한 조건에 해당하는 이미지 소스가 없는 경우에는 <img> 태그의 대체(fallback) 이미지가 표시된다.

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/fallback-img.jpg" alt="Fallback">
</picture>

 

 

2. link의 rel 속성: <link rel="canonical"> 또는 <link rel="alternate">

link 태그를 작성할 때 rel 속성을 활용하여 페이지의 표준(canonical) URL을 정의하거나, 대체(alternate) URL을 정의할 수 있다. media 속성을 함께 활용하여 스크린의 가로길이가 좁을 때(모바일 환경)의 페이지를 정의함으로, 환경에 따라 검색 결과를 개선할 수도 있다.

<!-- 데스크탑 페이지 (표준) -->
<link rel="canonical" href="https://something.com" />

<!-- 모바일 페이지 (대체) -->
<link rel="alternate" href="https://m.something.com/" media="only screen and (max-width: 640px" />

 

 

3. 용어 및 이름과 그 설명: <dl> + <dt> + <dd>

용어(term)나 이름(name)을 설명하는 리스트를 나타내는 dl 태그는 dt(이름)와 dd(설명) 태그로 이루어진다. 

<dl>
    <dt>{용어 이름}</dt>
    <dd>{설명}</dd>
    
    <!-- 예시 -->
    <dt>toddler</dt>
    <dd>- 걸음마를 배우는 아이</dd>
</dl>

 

 

4. 용어 및 이름과 그 설명(인라인): <dfn>

3번의 경우 용어와 설명을 표처럼 분리하지만, 인라인으로 용어를 정의할 경우 <dfn> 태그를 사용할 수 있다.

<p>
  <dfn>HTML</dfn>은 HyperText Markup Language의 약자로, 웹 페이지를 구조화하고 내용을 표시하는 데 사용되는 마크업 언어입니다.
</p>

 

 

5. 이미지와 그 설명: <figure> + <img> + <figcaption>

이미지가 보이지 않을 때 alt 태그에 이미지에 대한 대체 설명을 작성하는 것은 SEO의 기본이다. 간혹, 그 설명을 드러내야 할 때가 있는데, 그럴 때에 figure과 figcaption을 사용하자.

<figure>
  <img src="/images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

 

 

6. 텍스트 강조: <em> or <strong> or <mark>

텍스트에서 문맥상 특정 부분에 의미론적으로 강조할 때 <em>과 <strong>을 사용할 수 있다. <em>은 기울임체가 적용되고, <strong>은 굵은 글씨가 적용된다. <em> 태그의 경우, 텍스트를 강조하여 의미나 어조를 바꿀 때 유용하다. <strong> 태그는 한 페이지 내에 최대 2회 정도만 사용하는 것이 SEO에 좋다고 한다. 이 두 태그는 아래와 같이 중첩하여 사용할 수도 있다.

<p>이 버튼을 <strong><em>절대</em></strong> 누르지 마세요!</p>

 

<mark>의 경우, 검색 결과나 중요한 문서 내용을 강조할 때 사용하며, 노란색으로 하이라이트 되는 것이 특징이다.

 

 

7. 인용: <blockquote> or <q> + <cite>

<blockquote> : 긴 텍스트의 인용을 별도의 블록으로 처리하는 인용문으로, 전체가 들여 쓰기 된다. 전체 문장이 인용일 때 사용.

<q> : 줄 바꿈 필요 없는 짧은 인용에 사용하는 인라인 인용문으로, 자동으로 " "(quotation marks)가 붙는다. 문장 내에서 사용.

<cite>: 작품의 제목이나 출처를 참조할 때 사용.

<!-- q 태그 -->
<p>
  Albert Einstein once said, <q>Imagination is more important than knowledge.</q>
</p>

<!-- blockquote 태그와 cite 속성 -->
<blockquote cite="https://www.goodreads.com/quotes/94596">
  "The only limit to our realization of tomorrow is our doubts of today."
  <footer>— Franklin D. Roosevelt</footer>
</blockquote>

<!-- cite 태그 -->
<p>
  For more insights on this topic, you can read 
  <cite>The Art of War</cite> by Sun Tzu.
</p>



 

8. 입력 장치 관련 태그: <kbd>

이런 태그가 있었다고? 'keyboard'의 약자인 <kbd> 태그는, 키보드뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 입력 장치로부터의 사용자의 텍스트 입력을 위한 태그다.

<p>
    복사하려면
    <kbd>Ctrl</kbd> + <kbd>C</kbd>를 누르세요.
</p>

 

 

9. 사용자가 세부 정보를 열고 닫을 수 있는 태그: <details>

기본적으로 세부 정보를 숨겨 놓고, 토글 버튼을 통해 사용자가 열고 닫을 수 있다.

<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>

요약 내용

추가 정보나 세부 내용

 

 

10. 스크립트가 안될 때를 대비: <noscript>

<noscript> 태그는 브라우저에서 현재 페이지에서 실행되는 스크립트를 지원하지 않거나, 스크립트를 사용하지 않는 사용자를 고려하여 대체 콘텐츠를 나타내기 위해 사용한다.

<script>
    /* 일반적으로 스크립트가 사용될 때 */
</script>
<noscript>
	<h1>대체 콘텐츠는 두 가지 목적으로 제공될 수 있다.</h1>
    <p>
		1) 스크립트를 사용하지 못할 때 콘텐츠가 작동하지 않거나 표시되지 않음을 사용자에게 알림
        2) 스크립트를 사용하지 못할 때 정적인 콘텐츠를 표시할 경우 대체 콘텐츠 제공
    </p>
</noscript>