답변:
나는 보통 로고나 사이트 제목을 H1에 넣지 않습니다. 내가 보는 방식은 각 페이지가 문서라는 것입니다. 이 문서는 페이지 제목과 주요 제목에 반영된 특정 주제에 관한 것입니다. 웹 사이트 자체는 문서의 발행인 일뿐입니다. 따라서 의미 적으로 사이트 로고 또는 이름을 각 페이지의 기본 제목으로 사용하는 것은 올바르지 않습니다. 로고는 눈에 잘 띄게 표시되어 사용자에게 브랜드의 위치와 브랜드 목적을 알려주지 만 실제로는 내용이나 문서의 일부가 아닙니다.
뉴스 기사를 볼 때 모서리에 작은 뉴스 채널 로고가 표시 될 수 있지만 뉴스 기사의 제목은 "CNN"또는 "BBC News"가 아닙니다. 헤드 라인은 스토리를 게시하는 네트워크가 아니라 스토리에 관한 것입니다. 마찬가지로 잡지를 읽을 때 출판물 이름이 아닌 제목에 기사 제목 만 사용됩니다.
로고 / 사이트 이름에는 H1 태그를 사용하고 문서 제목에는 H1 태그를 사용하는 것도 의미 상 올바르지 않습니다. 표제는 페이지에서 컨텐츠의 계층 구조를 정의합니다. 사이트 이름과 문서 제목으로 하나를 사용하는 것과 마찬가지로이 페이지에는 "mydomain.com"과 "contact us"라는 두 가지 주요 섹션이 있습니다.
h1
있지만 기본 페이지 에만 있습니다. 특정 업체 정보로 이동하면 이제 업체 정보 제목이에 있습니다 h1
.
Google SEO 보고서 카드 문서 의 37 페이지를 참조하십시오 .
대부분의 제품 메인 페이지는
<h1>
위의 예와 같이 하나의 태그 를 사용할 수 있지만 현재 다른 제목 태그 (<h3>
이 경우) 또는 더 큰 글꼴 스타일 만 사용하고 있습니다 . 텍스트를 더 크게 보이도록 스타일을 지정하면 동일한 시각적 표현을 얻을 수 있지만<h1>
태그 와 동일한 의미를 검색 엔진에 제공 하지는 않습니다. 제품 이름 및 / 또는 기능에 대한 몇 마디<h1>
는 제품 기본 페이지 의 태그에 포함되어 있습니다.
Google이 제공하는 서비스에 대한 분석에 따르면 Google은 페이지 별 고유 한 값이 H1에 나타날 것으로 기대합니다 (링크 된 문서의 그림이이를 보여줍니다).
좋은 근거는 다음과 같습니다. 로고는 <h1>이 아닌 이미지입니다.
의미 적으로 <h1>
페이지 제목에 사용되어야하며 페이지 제목은 페이지마다 고유해야합니다. 귀하의 로고 또는 사이트 이름은 페이지 제목 이 아닙니다 (아마도 홈페이지 제외).
로고 / 사이트 이름은 ID가 'heading'인 일반 div 여야합니다. 또는 <header>
HTML5를 사용 하는 경우 태그입니다.
<img>
태그 일 필요는 없으며 태그의 배경이 아니라 배경 일 수 있습니다 <h1>
. 그러나 링크 된 기사에서 알 수 있듯이 로고 는 페이지 내용으로 볼 수 있습니다.
IMO 페이지에는 하나의 H1 만 있어야합니다. 콘텐츠의 올바른 계층 구조를 유지하려면 H1은 항상 H2보다 앞에 있어야합니다.
로고는 종종 모든 페이지에서 반복되며 대부분의 페이지에서 제목은 거의 항상 더 중요합니다.
홈페이지에서는 다음을 사용하는 것이
좋습니다.
logo / title-H1 [, title-H2]
비록 홈페이지에서는 로고가 귀하의 제목 일 수 있습니다.
그러나 모든 후속 페이지에서 나는
로고-다른 태그, 제목-H1 로 갈 것입니다.
적절한 경우 로고를 배경 이미지로 사용합니다.
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 가치를 행복하게 만듭니다.
이것은 실습과 템플릿으로 인해 훌륭한 질문입니다.
개인적으로 저는 다음을 고려하여 "Outlining 101"논리를 참조하고 싶습니다.
H1은 제목과 같습니다 (확실히 HTML 제목을 보완하고 싶습니다). 페이지에 제목이 하나만있는 것처럼 페이지 당 하나만 있어야합니다.
H2는 개요에서 로마 숫자와 비슷합니다 : I., II., III. 등
H3는 A., B., C와 동등한 개요입니다.
종종이 논리를 실제로 사용하는 것은 웹 페이지에서 정확하게 시행하기가 어렵습니다. 즉, 해당 계층 구조로 롤업되지 않는 많은 부수적 인 정보가 있습니다. 그러나 당신이 앉아서 그 논리로 그것을 분해하려고하면, 나는 훈련에 이점이 있다고 생각합니다.
나는 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가 허용되지 않는다고 말했기 때문에 유효하지 않습니다. 비논리적입니다. 생각해보십시오.
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 태그입니다.
톰 로저스
로고를 제목에 중첩시킬 필요는 없습니다. 간단한 링크 된 이미지로 header
충분합니다. 그러나 사이트 제목과 페이지 / 문서 제목은 모두이어야합니다 <h1>
. 이 기사는 유익합니다 : HTML5 시대의 여러 H1 태그에 대한 진실 .