TelegramH1 태그는 웹 페이지 제목을 표시하는 데 가장 일반적으로 사용되는 HTML 제목입니다. 대부분의 웹 사이트는 CSS를 사용하여 H2, H3등과 같은 작은 제목에 비해 H1이 페이지에서 눈에 띄게됩니다.
그러나 H1 태그가 중요한 이유는 무엇입니까, 어떻게 추가합니까, 그리고 어떤 모범 사례가 있습니까?
이 가이드에서는 다음 모든 질문에 대한 답을 배울 수 있습니다.
- SEO에 H1 태그가 중요한 이유는 무엇입니까?
- H1 태그를 추가하려면 어떻게 해야 합니까?
- H1 태그의 SEO 모범 사례는 무엇입니까?
SEO에 H1 태그가 중요한 이유는 무엇입니까?
세 가지 이유는 다음과 같습니다.
- 1. H1 태그는 검색 엔진이 페이지를 이해하는 데 도움이 됩니다.
- 2. H1 태그는 사용자 환경을 개선합니다.
- 3. H1 태그로 접근성 향상
H1 태그는 검색 엔진이 페이지를 이해하는 데 도움이 됩니다.
구글의 존 뮬러는 H1 태그는 구글이 페이지의 구조를 이해하는 데 도움이 있다고 말했다. 따라서 Google에서 페이지 제목이나 콘텐츠 제목에 대한 권장 대로 H1s를 사용하는 경우 H1이 Google에 "내 페이지가 무엇인지"를 효과적으로 알려줍니다.
H1 태그는 사용자 환경을 개선합니다.
H1 태그는 웹 페이지의 계층 구조의 일부라는 점에서 사용자 환경을 개선합니다. H1은 페이지에서 가장 눈에 띄는 제목, 다음 H2,다음 H3등입니다.
H1 태그 및 기타 제목을 제대로 사용하지 못하고 페이지가 탈지 및 소화가 어려워집니다.
H1 태그로 접근성 향상
시각 장애인의 수백만 은 웹 페이지 사본과 이미지를 오디오로 변환하기 위해 화면 판독기를 사용합니다. webAIM에 의해이 연구에 따르면, 60% 화면 리더 사용자의 페이지 제목H1 태그 를 선호.
H1 태그를 추가하려면 어떻게 해야 합니까?
대부분의 CMS'를 사용하면 페이지에 H1 태그를 쉽게 추가할 수 있습니다. 몇 가지 인기있는 것들에서 그것을 수행하는 방법을 살펴 보자.
워드 프레스에 H1 태그를 추가하는 방법
대부분의 워드 프레스 테마는 페이지 또는 게시물 제목을 H1로사용하도록 코딩됩니다.
Wix에서 H1 태그를 추가하는 방법
대부분의 Wix 테마에는 각 페이지에 H1 태그가 하나 있습니다. 이 텍스트가 확실하지 않은 경우 테마 편집기에서 H1 태그의 스타일을 일시적으로 변경합니다. 이렇게 하면 페이지 빌더의 H1이 효과적으로 강조 표시됩니다.
스퀘어스페이스에 H1 태그를 추가하는 방법
대부분의 Squarespace 테마에는 각 페이지에 H1 태그가 하나 있습니다. 이 위치가 확실하지 않은 경우 "제목 1" 스타일이 있는 텍스트 상자가 표시될 때까지 눈에 띄는 텍스트 상자를 클릭하기만 하면 됩니다.
HTML에서 H1 태그를 추가하는 방법
오프닝 H1 태그(<h1>)를 사용하여 페이지 제목을 입력한 다음 닫는 H1 태그(</h1>)를 추가합니다.
본보기:
<h1>This is the H1</h1>
H1 태그 SEO 모범 사례
모범 사례를 실행하기 전에 이러한 사례를 깨는 것은 웹 사이트에 SEO 혼란을 일으키기 위해 극히 드물지 않을 것입니다. 그래서 이러한 것 들 중 일부를 하지 않는 경우 당황 하지 마십시오. 그것은 확실히 구글 페널티 처럼 무서운 아무것도 이어질 하지 않습니다.
Google의 임무는 웹 콘텐츠를 이해하고, 색인화하고, 순위를 매기는 것입니다. H1 태그가 없는 페이지와 같은 비이상적인 상황을 처리하는 메커니즘 없이는 이 작업을 수행하는 것이 불가능합니다.
즉, SEO에모든 작은 도움이 되므로 가능한 경우 모범 사례를 따르는 것이 유용합니다.
다음은 H1 태그에 대한 9가지 모범 사례입니다.
- 1. 페이지 제목에 H1 태그 사용
- 2. H1에 제목 케이스 사용
- 3. H1을 제목 태그에 일치시
- 4. 중요한 모든 페이지에서 H1 태그 사용
- 5. 페이지당 하나의 H1만 사용
- 6. H1 태그를 짧게 유지
- 7. 계층 구조에 대한 스타일 제목
- 8. 대상 키워드 포함
- 9. H1 태그가 매력적으로 확인
페이지 제목에 H1 태그 사용
Google은 "기사 제목을 <h1>tag"와 같이 기사 본문 위의 눈에 띄는 장소에 배치합니다.
많은 웹 사이트 플랫폼과 CMS가기본적으로이 작업을 수행하는 동안, 이것은 특정 테마에 대해 재정의 할 수 있습니다.
테마가 이 문제를 처리하는 방법을 궁금해하는 경우 브라우저에서 제목을 마우스 오른쪽 단추로 클릭하고 "검사"를 선택하는 것이 가장 쉬운 방법입니다. 강조 표시된 부분에 <h1>가 포함된 경우 H1 태그로 래핑됩니다.
H1에 제목 케이스 사용
제목 사례는 4개 이상의 문자가 포함된 모든 단어를 활용하는 곳입니다.
CMS가 H1 태그와 제목 태그 모두에 페이지 제목을 사용하는 경우 페이지 제목에 대한 제목 사례를 사용하면 검색 결과에서 깔끔하게 보이는 것을 유지하는 데 도움이 됩니다. 일반적으로 소문자 또는 문장 케이스를 사용하는 포럼 게시물만 있습니다.
H1을 제목 태그에 일치시
구글은 H1과제목 태그를 일치말한다 .
대부분의 CMS'워드 프레스처럼 자동으로이 작업을 수행, 하지만 요아스트 같은 SEO 플러그인H1에 다른 무언가로 제목 태그를 설정할 수 있습니다.
이렇게 하는 가장 일반적인 이유는 페이지 제목이 H1에대해 완벽하게 괜찮지만 제목 태그에 너무 길기 때문입니다.
예를 들어, 우리의 제목과 H1은이 게시물에대해 약간 다릅니다 .
제목과 H1이 약간 다르지만 위의 경우와 같이 동일한 금형에서 캐스팅된 경우 괜찮습니다. 제목이 H1과크게 다른 경우 정렬로 다시 가져올 가치가 있습니다.
왜? 검색자는 SERP의 제목 태그로 부분적으로 판매됩니다. 페이지에 완전히 다른 관련이 없는제목(H1)으로인사하는 경우, 그들은 속는 느낌이 듭니다.
제목 태그는 정의 주위에 기울어져 있는 반면 H1은 스터디 주위에 기울어져 있습니다. 이 페이지를 클릭한 후 검색자가 약간 속거나 혼란스러워보일 수 있으므로 일관된 각도를 고수하는 것이 합리적일 수 있습니다.
중요한 모든 페이지에서 H1 태그 사용
위의 페이지에서 일부 페이지가 H1이 누락되어 있음을 확인할 수 있습니다.
이것이 모범 사례인가요? 설마. 그러나 이러한 페이지는 SEO 관점에서 특별히 중요하지 않기 때문에 큰 거래가 될 가능성은 거의 없습니다. 그들은 단지 블로그 홈페이지와 어쨌든 브랜드 트래픽을 유치 할 가능성이 아카이브 페이지입니다.
그래서 우리의 개발자는 몇 분 만에이것을 "수정"할 수 있지만 페이지가 방문자에게 완벽하게 잘 보이기 때문에 시간을 낭비할 가치가 없을 것입니다.
페이지당 하나의 H1만 사용
구글의 존 뮬러는 페이지 당 여러 H1s를 사용하는 것은 괜찮다고 말한다.
HTML5를사용하는 경우 엄격하게 사실입니다. 여러 섹션에서 여러 H1 태그를 사용하는 데 기술적으로 문제가 없습니다.
예를 들어 이 HTML5 페이지에는 H1 태그가 4개 있으며 기술적으로 괜찮습니다.
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h1>Taste</h1>
<p>They taste lovely.</p>
<section>
<h1>Sweet</h1>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>
거의 모든 현대 브라우저가 올바르게 렌더링되며 중첩 된 <section>elements에 H1 태그를 중첩 된 수준에 표시합니다. 즉, 첫 번째 < 섹션>H2s, H1s는 다른 < 섹션>H3등등에서 중첩된 H1s처럼 보입니다.
그러나 HTML5에서도 W3C는 "섹션의 중첩 수준에 적합한 순위의 제목"을 사용하는 것이 좋습니다.
예를 들어:
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
일부 레거시 브라우저는 명시적 CSS 규칙 없이 올바르게 렌더링하는 데 문제가 있기 때문입니다.
그러나 웹 사이트가 HTML5를사용하지 않는 경우 어떻습니까?
존 뮬러는 여러 H1 태그는 여전히 괜찮다고 말한다 :
HTML5 사용 여부에 관계없이 페이지에 여러 H1 요소를 사용하는 것은 괜찮습니다.
이것이 W3C 표준에 의한 모범 사례가 아니라는 점을 감안할 때, 왜 이 Google의 조언은 무엇입니까?
답변: 웹 페이지에서 여러 H1의 일반적인 문제를 처리하는 메커니즘을 개발했기 때문입니다.
따라서 하나 또는 여러 H1 태그를 사용하든 SEO에게는 그다지 중요하지 않지만 대부분의 웹 사이트에 가장 적합한 방법은 여전히 있다고 생각합니다.
H1 태그를 짧게 유지
많은 CMS'는 H1 및 제목 태그에 동일한 복사본을 사용합니다. 모든 페이지와 게시물에 대한 고유한 제목 태그를 작성하지 않는 한 페이지 제목을 짧게 유지할 가치가 있습니다.
얼마나 짧은? 엄지 손가락의 일반적인 규칙은 70 자 이하입니다.
이 규칙을 어기는 페이지는다음과 같습니다.
이 페이지의 H1은 페이지 자체에 완벽하게 잘 보이는 80 자입니다. 그러나 워드 프레스는 제목 태그에 대해동일한 복사본을 사용하기 때문에 검색 결과에 트렁크리십됩니다.
제목 태그를 H1 태그의 짧은 버전으로 설정하여 이 문제를 해결할 수 있습니다. 하지만 처음에 짧은 타이틀을 만들기 위해 노력했다면 이 문제가 없을 것입니다.
계층 구조에 대한 스타일 제목
제목은 웹 페이지에서 계층 구조를 만드는 데 사용됩니다. H1 태그는 일반적으로 페이지에서 가장 중요한 제목이기 때문에 CSS 스타일이 이를 반영해야 합니다.
즉, H1은 페이지에서 가장 눈에 띄는 태그여야 합니다.
이것은 분명 보일 수 있지만 H1과 H2 s 사이에 는 눈에 띄는 구별이 거의없는 많은 웹 사이트가 있습니다.
대상 키워드 포함
구글의 존 뮬러는 2020 년에 말했다 :
H1이 일반적으로 페이지 제목을 감싸고 있다는 점을 감안할 때 페이지에서 가장 중요한 제목이라고 할 수 있습니다. 따라서 일반적으로 페이지 의 주제를 Google과 검색자 모두에게 두 배로 명확하게 만들기 위해 주요 키워드를 포함하는 것이 합리적입니다.
이것은 우리가 거의 모든 블로그 게시물에 대 한 할 뭔가.
항상 이 작업을 수행하는 것이 합리적입니까? 물론 아니에요.
경우에 따라 가독성을 위해 대상 키워드의 가까운 변형을 사용하는 것이 좋습니다.
예를 들어 이 게시물의 주요 키워드는 "YouTube에서 더 많은 조회수를 얻는 방법"입니다. 그러나 우리가 listicle를 작성으로, 그것은 H1에서이것을사용하는 것이 의미가 없었다 . 그래서 우리는 대신 가까운 변형을 사용했다.
또한 결합을 사용하고 단어를 중지하여 자연스럽게 들리는 것을 두려워해서는 안됩니다.
H1 태그가 매력적으로 확인
H1 태그를 설명해야 합니다. 그건 말할 이면 간다. 하지만 블로그 게시물에 대 한 제목을 작성 하는 경우, 그들은 또한 클릭을 유혹 하는 충분히 설득력 있어야.
매력적인 게시물 제목은 어떻게 만들 수 있습니까?
이러한 블로그 게시물 제목 생성기중 하나를 사용하는 것을 생각하기 전에 게시물의 목적을 고려하십시오. 검색 엔진에서 유기적 트래픽을 유도하는 것이 존재하고 CMS가 H1 및 제목 태그에 대한 페이지 제목을 사용하는 경우 검색 엔진 사용자를 위해 게시물 제목을 작성해야 합니다.
그들이 원하는 것을 어떻게 알 수 있습니까?
대상 키워드의 상위 순위 결과에서 영감을 얻으십시오.
예를들어"SEO 기술"의 상위 페이지를 보면 검색자가 검색 트래픽을 개선하는 데 도움이 되는 실행 가능하고 효과적인 SEO 기술을 원한다는 것이 분명합니다.
이 정보를 사용하여 게시물에 대한 매력적인 페이지제목(H1)을만들 수 있습니다.
SEO 세계에서 는 검색 의도를 최적화하는 것으로 알려져 있습니다.
FAQ
H1 태그에 대한 몇 가지 일반적인 질문에 대답하여 작업을 마무리해 보겠습니다.
H1 태그는 얼마나 걸어야 합니까?
H1 태그는 원하는 만큼 길 수 있지만 대부분의 CMS