시맨틱 (Semantic) 이란 ?

시맨틱 ( Semantic )

HTML 요소를 어떻게 작성하는것이 중요할까?

여러가지가 있겠지만 제일 중요한 것은 시맨틱 (Semantic) 하게 작성해야 한다는것.

'Semantic' 하게 작성한다는 의미는 무엇일까?

semantic 의 사전적인 의미는 '의미의', '의미론적인' 으로 해석된다.

즉 의미에 맞는 태그를 사용해 문서를 작성하는것을 말한다.

특별한 의미가 없는 <div> 태그를 대신해 <section> <article> <footer> <nav> 등 의미있는 태그를 상황에 따라 사용하는것을 의미 하는것이다.

시맨틱 하게 HTML 을 작성하면 요소에 쉽게 의미를 부여할 수 있다.

각 요소가 자체적인 의미를 가지기 때문에 개발자 입장에서 가독성이 높아지고 유지 보수가 쉬워진다.

또한 장치에서 콘텐츠의 계층 구조를 더 쉽게 이해할수 있다.

검색엔진은 HTML 의 계층 구조에 따라 키워드들의 중요도를 파악하기 때문에 시맨틱 하게 작성된 HTML 구조는 크롤러에 더 구체화한 정보를 제공할수 있게 됨.

어떻게 해야 시맨틱 하게 작성하는것일까?

태그들이 만들어진 목적을 이해하고 그것에 맞게 사용.

<h1> ~ <h6> : 각 섹션의 제목을 나타냄.
<header> : 제목이나 대표 이미지가 들어가는 요소. <body>의 하위로 작성되면 웹 페이지의 전체 헤더를 정의하는 영역이며, <article> 또는 <section> 등 Sectioning Content 의 하위로 사용되면 해당 영역의 헤더만을 의미. 일반적으로 <h1>, <h2> 등의 요소나 로고등을 포함.
<footer> : <header> 요소와 마찬가지로 전체 문서 또는 Sectioning Content 의 바닥글로 쓰입니다. 이 영역에는 작성자나 관련 문서 링크, 라이선스, 색인 등의 데이터가 들어간다.
<main> : 페이지의 콘텐츠 영역을 의미. <main> 은 페이지당 한번 사용하며 <body> 아래 직접 추가. 이 요소는 다른 요소내에 중첩되지 않아야 함.
<article> : 요소 자체가 하나의 의미있는 콘텐츠 블록 영역. 즉 이 요소만으로 단일 게시물을 나타낼때 사용. 이 요소의 내용은 독립적으로 배포하거나 재사용 됨. 블로그 항목이나 게시물, 기사, 위젯등에 사용.
<section> : 아티클과 유사하지만 페이지의 단일 부분을 그룹화 하는데 유용한 요소. 예를 들어 기사의 헤드라인을 모으거나 각 블로그의 피드정보가 나타나는 영역으로 사용. 요소의 콘텐츠를 함께 묶는 것이 합리적일때 <article> 대신 <section> 요소를 사용하는것이 좋다. 섹션은 일반 컨테이너 요소가 아니기 때문에 단순 스타일링을 위한 요소로 사용할땐 <div> 를 사용하는것을 권장.
<aside> : 기본 컨텐츠와는 직접 관련이 없지만 간접적으로 관련된 추가 정보를 포함하는 요소. <nav> 요소나 광고, 인용처럼 분리된 컨텐츠를 나타낼때 사용.
<nav> : 다른 페이지 또는 내 문서의 특정 영역 ( 탐색링크가 있는 섹션 ) 으로 이동시키는 링크를 나타냄.

SEO ( Search Engine Optimization )

많은 사람이 이용하길 바라는 서비스를 만들었다면 네이버나 구글 같은 검색 엔진의 상위에 노출시키고 싶을 것 이다.하지만 이미 시장에 수많은 경쟁 서비스가 있어 그중에서 검색 결과의 상단에 나오게 하는것은 매우 어려운 일.검색 사이트의 상단에 노출시키는 것은 개발의 영역이 아닌 서비스의 인기, 마케팅과 광고의 영역 이라 생각할수 있지만, 일부는 맞는말이고 일부는 아니다. 개발자의 몇가지 노력으로 서비스가 적절한 키워드에 더 많이 노출되도록 하수 있다.이렇게 우리의 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색엔진 최적화 ( SEO ) 라고 부른다.구글과 네이버 같은 각각의 검색 포털 사이트는 선호하는 키워드 추출 방식, 검색 메커니즘이 있다. 여기서는 각 사이트에 적합한 방법 보다는 일반적으로 적용하는, 요즘 사이트 개발에서 필수로 적용하는 방법을 살펴보자.

시멘틱하게 HTML을 작성하자

시맨틱하게 코드를 작성함으로써 검색 엔진과 크롤러는 각 영역이 어떤 의미의 정보를 담는지 기계적으로 읽을수 있다.

페이지의 개요와 구성, 본문 등을 파악하고, 키워드 등을 이해해 검색시 사이트가 노출되는것에 도움을 줌.

<title> 을 놓치지 말고 적절하게 작성

<title> 에 작성된 제목은 검색될때 그 사이트의 이름이다. 따라서 사이트를 가장 잘 나타내는 브랜드명, 키워드를 작성하는것이 좋다. <title>을 자주 바꾸거나 길이가 너무 길면 검색 엔진에서 불이익을 받는다.

<meta name="description"> 을 이용해 페이지 설명을 남기자

사용자의 흥미를 유발하며 검색이 되었을때 완전히 노출되도록 적는것이 좋다. 이를 기준으로 이후에 검색이 될때 키워드에 맞춰 선택됨.

이를 기준으로 이후에 검색이 될때 키워드에 맞춰 선택됨.

<meta charset="UTF-8"/> 를 사용해 인코딩 방식을 지정하자

open graph, twitter 태그를 사용해 외부 사용자를 유인하자

og ( open-graph ) 태그는 페이스북에서 만든 프로토콜 이며 여러 상황에서 동일한 메타 정보를 쉽게 표시하도록 만들어졌다. 우리가 많이 사용하는 카카오나 네이버 또한 링크 공유시 og 태그에 작성된 정보로 노출되며 트위터는 자체 twitter 프로토콜을 가진다.

<meta property="og:title" content="페이지 이름" />
<meta property="og:description" content="페이지에 대한 간략한 한 두줄 설명" />

og 태그는 예제 코드의 og:title, og:description 처럼 값에 og: 가 붙으며 프로퍼티에 값을 지정한뒤 content 프로퍼티에 값을 주어 작성함. 요즘은 링크 공유를 통한 유입이 중요하기 때문에 open graph 태그를 작성하는 것은 필수다. 자세한 작성 방법 및 다양한 태그 정보는 open graph 공식 사이트 ( https://ogp.me/ ) 를 참고.

저작자표시 비영리 변경금지

'Front-End > SEO' 카테고리의 다른 글

HTML 5 시맨틱(semantic) 태그, 레이아웃 (0)	2021.12.20

윤바다 의 개발항해

시맨틱 (Semantic) 이란 ? - (1)