이 글은 https://www.semrush.com/blog/semantic-html5-guide/을 번역한 문서입니다. 자세한 내용은 원문을 참고하세요.
What is semantic HTML5?
HTML에 대해 조금 안다면 HTML 태그가 (대부분) 내용을 형식화하는 데 사용된다는 것을 알게 될 것입니다.이 태그는 브라우저에 페이지에 내용을 표시하는 방법을 알려줍니다. 콘텐츠에 포함 된 콘텐츠의 유형이나 페이지에서 콘텐츠가 수행하는 역할에 대한 정보가 없습니다.
시맨틱 HTML5는 특정 태그를 정의함으로써 이러한 단점을 해결함으로써 태그에 포함 된 컨텐츠가 어떤 역할을하는지 명확하게 나타냅니다. 이 명시적인 정보는 Google과 Bing과 같은 로봇 / 크롤러가 중요한 콘텐츠 (자회사, 탐색 용 등)를 더 잘 이해할 수 있도록 도와줍니다. 의미 론적 HTML 태그를 페이지에 추가함으로써 Google 및 Bing이 페이지의 다른 부분의 역할 및 상대적 중요성을 이해하는 데 도움이되는 추가 정보를 제공합니다.
Examples
div and span tags. Non-semantic / generic.
비 의미 론적 HTML 요소의 예입니다. 이들은 콘텐츠를 표시하는 방법을 브라우저에 전달하기위한 소유자 역할 만합니다. 페이지에 포함 된 콘텐츠의 역할에 대한 정보는 제공하지 않습니다.
Examples of semantic tags.
이것들은 의미 론적 요소입니다. 그들은 그들이 담고있는 내용의 역할을 명확하게 정의합니다.
왜 이것을 사용해야 합니까?
보는 사용자에게 일반적으로 웹 페이지의 여러 부분을 한눈에 쉽게 식별 할 수 있습니다. 머리글, 메뉴 및 주요 내용이 모두 즉시 시각적으로 분명합니다. 이제 당신이 장님이라고 상상해보십시오.
Google과 Bing의 봇은 시각 장애인이 아니더라도 심각한 시력 장애인입니다. 그들에게는 시각적 인 단서를보고 이해하는 것이 상당히 어렵습니다.
그들은 당신의 도움이 필요합니다. 페이지의 어느 부분이 머리글인지, 그리고 바닥 글과 탐색 용으로 어느 부분이 성공적으로 Google 및 Bing과 통신 할 수 있으면 감사 할 것입니다. 가장 중요한 것은 가장 중요한 콘텐츠가 무엇인지 알려줌으로써 해당 콘텐츠의 우선 순위를 명시 적으로 지정합니다.
Here is our page.
독자적으로 시맨틱 HTML5를 사용하면 SEO 성능에 큰 변화가 없습니다 (미안합니다!). 아시다시피, 성공적인 SEO는 많은, 많은, 많은 작은 세부 사항의 누적입니다. 이것은 귀하의 콘텐츠에 대한 Google 및 Bing의 이해 (그리고 자신감에 대한 자신감)를 향상시키는 작은 세부 정보 중 하나이며 귀하의 SEO 노력에 도움이됩니다.
앞으로 SEO가 진화함에 따라 이러한 시스템과의 명확하고 일관된 의사 소통은 SEO / AEO 전략의 두 가지 기본 요소 중 하나가 될 것입니다 (아래 참조).
그것은 어떻게 보입니까?
의미 론적 HTML 태그의 예는 <nav>, <footer> 및 <section>을 포함합니다. 사용할 수있는 더 많은 의미 론적 HTML5 태그가 있습니다 (예 : <blockquote> 및 <em>).하지만이 기사에서는 페이지 내용을 기본 부분으로 나누는 데 필요한 의미 론적 HTML 태그만을 살펴보고 있습니다.
<div> 태그 대신 다음 HTML5 태그를 사용하여 페이지 콘텐츠를 특정 역할을 수행하는 식별 된 부분으로 분리 할 수 있습니다. 상상할 수 있듯이 Google과 Bing 같은 기계는 이것을 사랑합니다.
Semantic HTML5 tags we will be using in this article.
이 명확한 구분과 내용의 각 부분에 대한 역할의 명시적인 속성은 페이지를 훨씬 명확하고 쉽게 Google 및 Bing에 대해 올바르게 색인 할 수있게합니다.
NB는 이러한 태그 때문에 모든 정확히 단순히 레이아웃에 영향을주지 않고 페이지에 <div>의 기존 대체 할 수있는 <div> 태그처럼 동작합니다. 시맨틱 HTML5를 구현하는 많은 경우 <div>와 </div>의 올바른 쌍을 찾아 교체하는 것만 큼 쉽습니다.
시맨틱 HTML5 예제
슈퍼 간단한 의미 HTML5 예제 :
여기서 우리는 단순히 페이지의 각 부분이 어떤 역할을하는지 정의했습니다. HTML5를 적용하기 시작하면이 곳을 header, nav, main, footer 등 안전한 장소로 시작할 수 있습니다.
가장 중요한 요소 (머리글, 바닥 글, 탐색 및 기본)가있는 매우 간단한 예제입니다.
올바르지 않은 복잡한 구현보다는 100 % 정확하고 간단한 구현을하는 것이 좋습니다.
부정확 한 구현은 상충되고 혼란스러운 신호를 보내어 상황을 악화 시키거나 좋지 않게 만듭니다.
간단하고 올바른 구현은 이미 Google 및 Bing과의 커뮤니케이션에서 큰 진일보입니다. 지나치게 야심 차리지 마십시오. 잘못 받아들이면 해결할 문제보다 더 많은 문제를 만들 수 있습니다!
더 복잡한 예제
섹션 및 기사 사용 :
여기에서 우리는 주요 내용 내에서 계층 구조를 만들었습니다. 메인 태그 내의 중심 콘텐츠를 식별하는 포괄적 인 기사가 있습니다. 이 페이지의 해당 부분에 대한 개요를 제공합니다. 이 기사에서 중첩 된 섹션으로 식별되는 주요 주제를 개발하는 여러 하위 주제가 있습니다.
디자인 (주황색 블록)은 페이지의 의미 영역을 정의하는 데 사용되지 않습니다.
디자인 (주황색 블록)은 페이지의 의미 영역을 정의하는 데 사용되지 않습니다. 조금 혼란스러워 보이지만 레이아웃 HTML과 의미 HTML5에는 별개의 역할이 있음을 잘 보여줍니다.
실세계에서 의미 론적 마크 업은이 예보다 레이아웃을 따르는 경우가 많습니다. 일반 규칙 : 섹션은 다른 것의 일부를 형성합니다. 기사는 자체적 인 것입니다.
또한, 여기에 나는 footer에 nav 섹션을 추가했습니다. 논리적으로 헤더와 마찬가지로 바닥 글에는 탐색 요소가 포함되어 있습니다.
관련 정보
여기서 우리는 직접적으로 관련된 두 개의 콘텐츠를 주요 기사에 추가했습니다. asides를 사용하여 관련 콘텐츠 (옆으로)가 선택 사항임을 나타냅니다. 콘텐츠의 주요 부분은 별도로 표시 할 수 있지만 여전히 이해할 수 있습니다.
간접적 관련 정보
참고 사항: 별도로 기본 콘텐츠 옆에 사이드 바가있을 필요는 없습니다. 제목, 텍스트 및 다른 페이지에 대한 링크가 포함 된 주 콘텐츠 아래의 블록에도 사용할 수 있습니다
여기서는 간접적으로 관련있는 콘텐츠를 주요 기사 외의 페이지와 식별했습니다. 여기서 우리는 제쳐두고 내용이 주요 기사와 직접 관련이 없다는 것을 나타냅니다.
그것은 대부분의 요구에 충분합니다.
최종 버전
This is very good!
유용한 팁들
Section vs. Article
이것에 대해 많은 논의가 있습니다. 섹션과 기사에 대한 고정 된 규칙은 없으며 구현은 매우 유연합니다. 그것들은 어느 정도 동일하고 대부분의 경우 상호 교환 적으로 사용될 수 있습니다. 논리적이고 일관성을 유지하십시오.
개인 팁: 콘텐츠 기사 내의 중첩 섹션은 기계뿐 아니라 사람에게도 (HTML 코드는 개발자에게 더 읽기 쉽습니다) 논리적이라는 것을 알았습니다.
중첩 요소
요소는 다른 요소를 중첩 할 수 있습니다. 예를 들어 기사에는 자체 <header>, <footer>, <h1> (위에서 본) 및 <nav> (앵커 링크)이있을 수 있습니다. 나는이 “슈퍼 네 스팅 (super nesting)”에 대한 일러스트를 제공하지 않았고 그 이유가있다 : 이것은 SEO 블로그이며, SEO 관점에서 볼 때 의미 론적 HTML5의 논리를 지금까지 밀어내는 것이 실제로 도움이되지 않는다.
위에 언급 한 바와 같이 SEO 목적을 위해 견고하고 간단한 구조를 제공하는 데 집중해야합니다.
하지 말아야 할 것
경고 – 시각적 디자인을 사용하여 HTML5 구현을위한 가이드로 많은 사이트를 보았습니다. 위에서 볼 수 있듯이, HTML5의 의미 론적 의미가 아닙니다.
Semantic HTML5 is not for design.
이 (놀라 울 정도로 전형적인) 예제는 단순히 시각적 레이아웃을 복제합니다. 무의미한 것보다 더 나쁜 것은 페이지가 하나의 주제와 세 가지 하위 주제가 아닌 네 가지 주제를 포함하고 있음을 나타냅니다. 기계에 오해의 소지가있는 정보를 명시 적으로 제공하면 이해에 부정적인 영향을 미칩니다.
페이지에 의미 론적 HTML5를 구현하면 Google 및 Bing과의 커뮤니케이션이 향상됩니다. 그들은 모두 귀하의 사이트가 무엇인지 이해하고자합니다. 그들은 둘 다 당신이 그들의 언어로 명확하게 의사 소통하기를 원하며 둘 다 당신이 그들을 교육시키기를 원합니다.
커뮤니케이션
기계와의 커뮤니케이션 (HTML5는 중요한 역할을합니다)은 응답 엔진을 최적화해야하는 세계에서 성공할 장기적인 SEO 전략의 두 가지 기둥 중 하나입니다. 커뮤니케이션을 개선하기 위해 할 수있는 많은 것들이 있습니다. 시맨틱 HTML5는 하나입니다. 스키마 구조화 된 마크 업은 또 다른 구조입니다. 여기에 관한 기사가 있습니다. Here is an article about that.
신뢰성
두 번째는 신뢰성입니다. 또한 신뢰를 향상시키기 위해 할 수있는 많은 일들이 있습니다.
Communication + Credibility = winning strategy.
커뮤니케이션 + 신뢰성
모든 SEO (및 AEO)는 의사 소통과 신뢰성을 제공합니다. 저는 Google과 Bing과의 의사 소통 및 신뢰성 향상을위한 기술에 관해 SEMrush에서 계속 정기적으로 글을 쓸 것입니다. (그런데 빙은 커다란 복귀를 할 것입니다.)
아래의 댓글 섹션에서이 기사에 대한 귀하의 의견을 공유하십시오. 또한 SEO에서 커뮤니케이션 및 신뢰성에 대한 질문을 자유롭게 게시하십시오. 당신의 질문은 내가 무엇에 대해 글을 써야하는지의 우선 순위를 정의하는데 도움이 될 것입니다.
마감 : SEO를위한 시맨틱 HTML5 마크 업의 시사
구조, 중요성, 역할 및 계층 구조는 인간이 종종 디자인 / 레이아웃에서 본능적으로 이해하는 것입니다. <div> 대신 올바른 의미의 HTML 태그를 올바르게 사용하면 컴퓨터에서 쉽게 이해할 수 있습니다.
