시맨틱 마크업(HTML)이 웹사이트 SEO에 중요한 이유와 이 중요한 SEO 요소를 전문가가 아니더라도 올바르게 얻는 것이 얼마나 간단한지 이야기해 보겠습니다.
대부분의 사람들은 SEO(검색 엔진 최적화)에 대해 들어봤고 그것이 무언가라는 것을 알고 있습니다. 귀하의 웹사이트는 검색 엔진 결과 페이지(SERP)를 통해 찾을 수 있어야 합니다. 그 이상을 알고 있다면 "키워드"가 SEO의 가장 중요한 요소 중 하나라는 것을 알 수 있습니다. 시맨틱 마크업이 키워드에 왜 그렇게 중요한지 곧 이해하게 될 것입니다.
많은 웹사이트 소유자가 SEO에 대해 모르고 있는 것은 웹사이트가 구성(마크업)된 HTML 요소가 검색 엔진(Google, Bing, Yahoo)이 검색, 색인 생성 및 귀하의 웹사이트는 최종 사용자(물건을 검색하는 사용자)와 관련이 있습니다.
HTML(Hypertext Markup Language)에는 많은 내장 태그가 있습니다. 웹 개발자가 페이지에 요소를 만드는 데 사용하는 요소는 다음으로 구성됩니다.
- 여는 HTML 태그
- 콘텐츠
- 닫는 HTML 태그
여는 HTML 태그와 닫는 HTML 태그 둘러싸기 콘텐츠를 만들고 HTML 요소를 정의합니다.
따라서 HTML 요소는 (여는 태그) - 콘텐츠 - (닫는 태그)입니다.
콘텐츠는 제목, 단락, 목록, 링크, 버튼, 이미지, 버튼 등이 될 수 있습니다. 다음은 단락 요소의 예입니다.
지금 읽고 있는 바로 그 텍스트가 단락 요소입니다. 여는 단락 태그 <p> 안에 있습니다. 및 닫는 단락 태그 </p> .
위의 설명이 사실인지 확인하려면 단락(또는 이 문서의 다른 텍스트 블록)을 직접 마우스 오른쪽 버튼으로 클릭하고 검사를 클릭하세요.
요소 검사 방법을 보여주는 빠른 비디오 예:
시맨틱 마크업을 사용한다는 것은 단순히 적절한 내장 HTML 태그를 사용하여 콘텐츠를 가장 잘 나타내도록 콘텐츠를 감싸는 것을 의미합니다.
예를 들어, 당신이 읽고 있는 이 튜토리얼에는 "왜 시맨틱 마크업이 SEO에 중요한가"라는 제목이 있습니다. 헤드라인은 <h1>의 여는 부분과 닫는 부분으로 래핑됩니다. 태그(자신을 확인하십시오). H1 태그는 제목이나 기사 헤드라인과 같이 웹 페이지에서 가장 큰 텍스트를 정의하는 데 사용됩니다.
검색 엔진 AI(봇)는 특정 기사 또는 제품 페이지가 검색자와 관련이 있음을 시사하는 관련 패턴을 찾도록 연결되어 있습니다. 헤드라인은 검색자가 링크를 클릭하여 콘텐츠를 소비하도록 설득하는 데 사용하는 콘텐츠에 대한 가장 큰 단일 애피타이저(또는 매우 짧은 요약)이기 때문에 가장 중요한 신호 중 하나입니다.
위에서 볼 수 있듯이 헤드라인 뒤에는 콘텐츠의 첫 번째 단락(리드 단락)이 옵니다. 즉, 기사 또는 제품 페이지의 첫 번째 텍스트 블록을 구성하는 방법이 중요합니다. 검색 결과 페이지에는 짧은 텍스트 스니펫만 표시되므로 중요하게 생각하십시오.
시맨틱 마크업이 아닌 것은 무엇입니까?
요점을 빠르게 전달하기 위해 극단적인 예를 들어 설명하겠습니다. HTML 언어에는 버튼 요소를 정의하기 위한 태그가 있으며 <button>라는 적절한 이름이 지정됩니다. . 예:
<button>Add to Cart</button>위의 HTML 마크업이 실제 생활에서 어떻게 보이는지 보여줍니다.
위의 버튼은 스타일이 지정되지 않은 버튼이지만 올바른 의미를 사용합니다. 마크업.
하지만 재미있고 대신 위의 내용(장바구니에 추가)을 단락 태그 <p>Add to Cart</p> 안에 래핑한다고 가정해 보겠습니다. .
의미상 올바르지 않을 뿐만 아니라 기술적으로 작동하지 않습니다. 단락 요소는 웹 브라우저에서 클릭할 수 없기 때문입니다. 버튼, 링크 및 양식과 같은 몇 가지 HTML 요소만 클릭할 수 있습니다.
비의미적 마크업
의미 없이 콘텐츠를 마크업할 수 있는 몇 가지 방법이 있으며 이전 예와 달리 웹사이트의 기술적 기능을 손상시키지 않습니다.
적절한 H1 태그 대신 단락 태그 안에 기사의 헤드라인을 래핑한다고 가정해 보겠습니다. 헤드라인이 단락이 아니기 때문에 이것은 의미상 올바르지 않습니다. 그러나 기술적으로 웹 사이트를 심각하게 손상시키지는 않습니다. 방문자는 여전히 텍스트를 읽을 수 있습니다.
시각적 스타일이 무엇인지 사이트의 기술적 요소이며 이 경우 단락 태그로 헤드라인을 래핑하면 다소 (단락은 항상 머리글보다 작기 때문에) 제목의 글꼴 크기와 글꼴 두께가 예상보다 작아진다는 점에서 기술적으로 사이트에 피해를 줍니다.
일반 및 비의미적 마크업
HTML의 일반 HTML 태그 중 하나 안에 단락을 래핑할 수도 있습니다. 클래식 <div 꼬리표. <div 사용 단락, 헤드라인 또는 기타 텍스트를 둘러싸는 것은 의미상 올바르지 않지만 사이트의 기술적 기능을 파괴하지는 않습니다. 귀하의 사이트는 계속 작동하지만 위의 머리글/단락 예시와 마찬가지로 타이포그래피(텍스트 서식)가 엉망이 될 것입니다.
콘텐츠에 잘못된 마크업을 사용하는 것은 Google과 같은 검색 엔진에 자신이 무엇을 하고 있는지 알 수 없도록 하는 좋은 방법이며, 이는 검색 결과 페이지(SERP)에서 높은 순위를 차지할 수 있는 능력을 직접적으로 손상시킵니다. .
SEO 친화적인 HTML 마크업은 간단합니다. 다음은 간단한 체크리스트입니다.
- 제목은
<h1>로 정의해야 합니다. 태그 — 하나만 페이지당. - 소제목은
<h2>로 정의해야 합니다. ,<h3>또는<h4>태그.<h5>를 사용할 수도 있습니다. 및<h6>그러나 일반적으로 제목 태그를 너무 많이 사용하지 않는 것이 좋습니다(더 많은 SEO를 제공하지 않음). - 단락은
<p>로 정의해야 합니다. - 목록은
<ul>로 정의해야 합니다. - 목록 항목은
<li>로 정의해야 합니다. 항상<ul>안에 앉아 태그.
전체 HTML5 문서를 보려면 여기를 클릭하십시오.
