<h1>글 제목에 블로그에서 태그 를 사용하려고하는데 한 가지 문제가 발생했습니다. 제목이 하이퍼 링크로 연결되었습니다.

사례 1 :

<h1> <a href=""> xyz </a> </h1>

사례 2 :

<a href=""> <h1> xyz</h1> </a> 

SEO 측면에서 어느 것이 더 낫습니까?

HTML5를 사용하는 경우 하나만 선택하십시오. 그들은 동등합니다.
HTML5는 블록 수준 링크를 허용 하지만 블록 수준 요소가 하나뿐이므로 특별한 이유가 없습니다. 개인적으로, <h1>외부에 태그를두면 소스 코드에서 쉽게 스캔 할 수 있기 때문에 여기서는 그렇게하지 않을 것입니다.

다른 것 (XHTML, HTML4 등)과 두 번째 것은 잘못되었습니다. 유효한 코드가 아니며 검색 최적화에 나쁜 수준이 될 수 있습니다 [단일 위반이 실제로 어떤 영향을 미치는지 등에 대한 표준 면책 조항 삽입].

SEO에 관한 한 그들은 동일합니다. 일반적으로 블록 레벨 요소에는 인라인 요소가 포함되며 그 반대도 마찬가지이므로 첫 번째 예제를 사용해야하지만 SEO에는 영향을 미치지 않습니다.

둘 다 html5 에서 정확하며 html은 인라인 요소의 블록 요소를 허용합니다. 이것은 SEO에도 영향을 미치지 않습니다. 두 경우 모두 텍스트가 제목에 싸여 있으므로 동일한 값을 유지합니다.

유효성의 선택이 아니라 사용자 인터페이스의 기본 설정입니다.

• 앵커 주위에 헤더를 감쌀 경우 큰 앵커를 만들면 텍스트 만 클릭 할 수 있습니다.
• 머리글 주위에 앵커를 감쌀 때 전체 줄을 클릭 할 수 있습니다.

나는 당신에게 jsFiddle.net에 대한 예제를 만들었습니다

Case 2에서는 href삽입물이 종종 내 페이지의 나머지 부분과 일치하지 않습니다. 그러나 그것이 내 여백을 설정하는 방법 일 수 있습니다 .css. 따라서 사례 1을 선호합니다.

여기에 언급 된 내용은 통찰력이 있습니다. 모두 감사합니다. 마이크로 데이터 등을 방정식에 추가하는 등 한 단계 더 나아가 봅시다.

우리가 가지고 있다고 가정 해 봅시다

<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>

경쟁

<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>

나에게 '성능에 관계없이'예제 2가 더 합리적입니다. 링크는 절대 이름의 일부가 아니기 때문입니다. 차이는 innerwise와 textContent, DOM와의 차이로 귀결됩니다. innerHTML을 통해 그것을 보면 앵커가 방해가됩니다. textContent가 길면 태그가 제거됩니다. 따라서 innerHTML 또는 textContent 질문도합니다.

마이크로 데이터를 고려할 때 외부에 앵커를 두는 것이 더 순수합니다.

기반 : http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

<h1> <a href=""> xyz </a> </h1> 이 예는 맞습니다.

말의 입에서-SEO 목적으로 블록 레벨 링크는 피해야합니다 : https://www.seroundtable.com/block-level-links-google-seo-16369.html

업데이트 : 링크에서 테이크 아웃 ...

다른 사람들이 말했듯이 연결 구성을 갖는 것은 연결하기에 좋습니다. 그러나 SEO 목적으로 앵커 텍스트를 깨끗하게 유지해야 Google에서 앵커를 더 잘 해석하고 적절한 관련성을 지정할 수 있습니다.

존 뮬러 (Google의 웹 마스터 트렌드 분석가)는 다음과 같이 말합니다.

그 사용법은 우리 (Google)와 잘 어울릴 것입니다-우리는 여전히 링크를 선택하고 텍스트를 앵커로 연결할 수 있습니다. 우리는 HTML 파싱에 매우 유연하므로 HTML4와 함께 사용할 수도 있습니다. 즉, 앵커 텍스트를 명확하게 만들수록 링크의 컨텍스트를 이해하기가 더 쉬워 지므로 모든 내부 링크의 앵커로 항상 전체 단락을 사용할 필요는 없습니다.

TL; DR SEO의 경우 블록 수준 링크를 사용하지 마십시오.

링크 내에 클릭 가능한 추가 요소 (예 : 그림 등)가 있고 여전히 html <5로 유효성을 검사하려는 경우 자바 스크립트를 사용하여 두 가지 방법으로 사용할 수 있습니다.

<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>

그렇지 않으면 간단히 :

<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>

cursor:pointer트릭을 완료하려면 부모 요소의 CSS에 추가하십시오 .