H1 vs H2 vs. 웹 사이트 제목 / 로고 및 SEO 용 기타


31

프런트 엔드 개발자는 웹 사이트 제목이나 로고를 H1 태그에, 제목을 H2에 넣는 것이 일반적입니다. 그러나 대부분의 경우 페이지 / 문서의 제목은 내용 값을 포함하므로 더 중요합니다. 그래서 내 질문은 의미 및 SEO 관점에서 가장 좋은 방법은 무엇입니까? 예 :

  • 로고-H1, 제목-H1
  • 로고-H1, 제목-H2
  • 로고-H2, 제목-H1
  • 로고-기타 태그, 제목-H1

더 큰 효과가 있다고 생각되면 다른 변형을 제공하십시오.

답변:


37

나는 보통 로고나 사이트 제목을 H1에 넣지 않습니다. 내가 보는 방식은 각 페이지가 문서라는 것입니다. 이 문서는 페이지 제목과 주요 제목에 반영된 특정 주제에 관한 것입니다. 웹 사이트 자체는 문서의 발행인 일뿐입니다. 따라서 의미 적으로 사이트 로고 또는 이름을 각 페이지의 기본 제목으로 사용하는 것은 올바르지 않습니다. 로고는 눈에 잘 띄게 표시되어 사용자에게 브랜드의 위치와 브랜드 목적을 알려주지 만 실제로는 내용이나 문서의 일부가 아닙니다.

뉴스 기사를 볼 때 모서리에 작은 뉴스 채널 로고가 표시 될 수 있지만 뉴스 기사의 제목은 "CNN"또는 "BBC News"가 아닙니다. 헤드 라인은 스토리를 게시하는 네트워크가 아니라 스토리에 관한 것입니다. 마찬가지로 잡지를 읽을 때 출판물 이름이 아닌 제목에 기사 제목 만 사용됩니다.

로고 / 사이트 이름에는 H1 태그를 사용하고 문서 제목에는 H1 태그를 사용하는 것도 의미 상 올바르지 않습니다. 표제는 페이지에서 컨텐츠의 계층 구조를 정의합니다. 사이트 이름과 문서 제목으로 하나를 사용하는 것과 마찬가지로이 페이지에는 "mydomain.com"과 "contact us"라는 두 가지 주요 섹션이 있습니다.


Chris Conway의 답변을지지하고 싶습니다. 100 페이지의 모든 사이트 제목에 H1을 추가 할 필요는 없습니다. 사이트 제목이 아닌 페이지 제목 내의 키워드에 대한 웹 사이트를 찾고자합니다. 또한 모든 대형 웹 사이트 (cnn.com, amazon.com, ebay.com)를 보면 사이트 제목에 대한 h1 태그가 없습니다. Google 웹 마스터 블로그 코드도 살펴보십시오. 사이트 제목에 H1 태그가없고 페이지 제목이 H2임을 알 수 있습니다. 따라서 사이트 제목에 클래스가 있고 페이지 제목에 H1 또는 H2가있는 div 태그 또는 스팬 제목을 사용하는 것이 좋습니다.
Nicolas Guérinet

1
@ NicolasGuérinet : 게시 한 후에 변경되었는지 확실하지 않지만 eBay에는 실제로 내부 로고가 h1있지만 기본 페이지 에만 있습니다. 특정 업체 정보로 이동하면 이제 업체 정보 제목이에 있습니다 h1.
Nelson Rothermel

22

Google SEO 보고서 카드 문서 의 37 페이지를 참조하십시오 .

대부분의 제품 메인 페이지는 <h1>위의 예와 같이 하나의 태그 를 사용할 수 있지만 현재 다른 제목 태그 ( <h3>이 경우) 또는 더 큰 글꼴 스타일 만 사용하고 있습니다 . 텍스트를 더 크게 보이도록 스타일을 지정하면 동일한 시각적 표현을 얻을 수 있지만 <h1>태그 와 동일한 의미를 검색 엔진에 제공 하지는 않습니다. 제품 이름 및 / 또는 기능에 대한 몇 마디 <h1>는 제품 기본 페이지 의 태그에 포함되어 있습니다.

Google이 제공하는 서비스에 대한 분석에 따르면 Google은 페이지 별 고유 한 값이 H1에 나타날 것으로 기대합니다 (링크 된 문서의 그림이이를 보여줍니다).


멋진 답변 및 매우 유용합니다.

5

좋은 근거는 다음과 같습니다. 로고는 <h1>이 아닌 이미지입니다.

의미 적으로 <h1>페이지 제목에 사용되어야하며 페이지 제목은 페이지마다 고유해야합니다. 귀하의 로고 또는 사이트 이름은 페이지 제목 이 아닙니다 (아마도 홈페이지 제외).

로고 / 사이트 이름은 ID가 'heading'인 일반 div 여야합니다. 또는 <header>HTML5를 사용 하는 경우 태그입니다.


1
내용이 아니라면 <img /> 태그를 사용하고 싶지 않습니다. 모든 페이지의 머리글에 반복되는 웹 사이트 로고는 내용이 아니라 레이아웃 세부 사항입니다.
cherouvim

1
@cherouvim : 이미지는 <img>태그 일 필요는 없으며 태그의 배경이 아니라 배경 일 수 있습니다 <h1>. 그러나 링크 된 기사에서 수 있듯이 로고 페이지 내용으로 볼 있습니다.
DisgruntledGoat

4

IMO 페이지에는 하나의 H1 만 있어야합니다. 콘텐츠의 올바른 계층 구조를 유지하려면 H1은 항상 H2보다 앞에 있어야합니다.

로고는 종종 모든 페이지에서 반복되며 대부분의 페이지에서 제목은 거의 항상 더 중요합니다.

홈페이지에서는 다음을 사용하는 것이 좋습니다.
logo / title-H1 [, title-H2]
비록 홈페이지에서는 로고가 귀하의 제목 일 수 있습니다.

그러나 모든 후속 페이지에서 나는
로고-다른 태그, 제목-H1 로 갈 것입니다.
적절한 경우 로고를 배경 이미지로 사용합니다.


1
대부분의 사이트가 홈 페이지와 내부 페이지에 동일한 레이아웃을 사용한다는 사실에 따라 개인적으로 두 번째 솔루션을 선호합니다
Ilian Iliev

@llian 예, 모든 페이지에 대해 하나를 선택해야하는 경우 두 번째 솔루션이 선호됩니다. 그러나 웹 사이트 제목 / 로고를 홈페이지 제목에 통합하는 것이 일반적입니다. 누군가 웹 사이트 제목 / 회사 / 로고를 구체적으로 검색 할 때 어떤 페이지를 찾아야합니까? 홈페이지?
MrWhite

3

H1 태그에서 실제로 찾고있는 것은 페이지 제목이거나이 페이지를 고유하게 만드는 것입니다. 이미지를 사용하는 경우 분해성을 위해 대체 방법으로 이미지를 사용해야합니다.

<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>

<h1><span>Unique Page Title</span></h1>

이렇게하면 사람들이 로고 영역으로 오용하는 H1에 대해 이미지가 나타나도록 설정하고 인터넷 환경이 저하 된 사람들을 위해 여전히 좋은 콘텐츠를 보유 할 수 있습니다. 또한 SEO 가치를 행복하게 만듭니다.


2

이것은 실습과 템플릿으로 인해 훌륭한 질문입니다.

개인적으로 저는 다음을 고려하여 "Outlining 101"논리를 참조하고 싶습니다.

H1은 제목과 같습니다 (확실히 HTML 제목을 보완하고 싶습니다). 페이지에 제목이 하나만있는 것처럼 페이지 당 하나만 있어야합니다.

H2는 개요에서 로마 숫자와 비슷합니다 : I., II., III. 등

H3는 A., B., C와 동등한 개요입니다.

종종이 논리를 실제로 사용하는 것은 웹 페이지에서 정확하게 시행하기가 어렵습니다. 즉, 해당 계층 구조로 롤업되지 않는 많은 부수적 인 정보가 있습니다. 그러나 당신이 앉아서 그 논리로 그것을 분해하려고하면, 나는 훈련에 이점이 있다고 생각합니다.


1

나는 h1주요 타이틀 사람입니다. 그리고 제목은 장식 된 사이트 이름 또는 로고라고합니다. 요점은 웹 사이트의 헤더에서 로고는 실제로 로고가 아니며 사이트의 헤더입니다. 디자이너는 로고로 디자인하는 것을 좋아합니다.

LOGO->의 문제점은 무엇입니까 H1?

<div>Google</div>
<h1>About Us</h1>

이제 h1방문자에게 모든 정보를 알려주는 가장 중요한 섹션과 마찬가지로 방문자 h1가 너무 구체적 이기 때문에 페이지를 이해할 수 없습니다 . 누구에 대해?

<h1>Google</h1>
<h2>About Us</h2>

이 페이지는 Google에 관한 것입니다. 여기에 대한 섹션이 있습니다. 보세요-질문이 없습니까? 아무 문제 없음.

두번째 요점.

페이지 구조. 사이트 메인 제목을 div 또는 p에 넣으면 관련이 없습니다.

<p>Google</p>
<h1>About us</h1>

h1이후에 "About U"를 Google에 연결하려면 어떻게해야하나요? AFTER 후에 오는 모든 H1것이 관련되어 있기 때문에 이전과 는 달라 지지 않습니다.

<h1>Google</h1>
<h2>About Us</h2>

"회사 소개"는 Google에 속합니다. 질문이 없습니다.

세번째 요점.

HTML은 정보를 설명하는 언어입니다. 따라서 정보를 표시하지 않고 설명합니다. 그리고 각 페이지는 독립적입니다. 따라서 페이지간에 연관이 없기 때문에 한 페이지를 설명합니다. 개별 페이지를 연결하는 링크 만 있습니다.

<p>Google</p>
<h1>About us</h1>

이 페이지는 회사 소개입니다. 누구 / 무엇입니까? 불분명합니다. 그것은 단지 "회사 소개"라는 것을 설명합니다.

<h1>Google</h1>
<h2>About Us</h2>

이 사이트는 구글을 설명합니다. 그리고 우리에 대한 섹션이 있습니다. 우리는 아마도 구글 일 것입니다.

나는 내 요점을 만들었기를 바랍니다 :)

추신! 당신은 사용할 수 없습니다 h2- h1- h3이 비논리적이기 때문에, 따라서 큰 실패합니다. w3c가 허용되지 않는다고 말했기 때문에 유효하지 않습니다. 비논리적입니다. 생각해보십시오.


0

h2 태그로 로고?

방금 일반 페이지와 블로그가 혼합 된 WordPress 블로그 인 SitePoint (www.sitepoint.com)를 둘러 보았습니다. 일반적으로 페이지 제목이 h1 태그이고 로고가 h2로 설정되어 있습니다. www.blogs.sitepoint.com/category/design/과 같은 블로그 페이지에서이를 확인할 수 있습니다. 사이트를 순회하면서 다른 설정을 찾을 수 있습니다. 기본 제품 페이지 (http://products.sitepoint.com/)에서 예로 h1 태그를 찾지 못했습니다. 해당 페이지에서 자세한 정보를 보려면 특정 제품을 클릭하면 www.sitepoint.com/books/design2/에서 h1이 페이지 제목이고 h2가 로고라는 것을 다시 알 수 있습니다. 일반적인 웹 페이지는 블로그와 유사합니다 (www.sitepoint.com/help/ 참조). 이 경우 FAQ의 주제는 모두 h2 태그입니다.

톰 로저스


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.