Estou tentando usar <h1>tags no meu blog para o título da postagem e me deparei com um problema. O título está com hiperlink.

Caso 1:

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

caso 2:

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

Qual é o melhor em termos de SEO?

Se você estiver usando HTML5 , basta escolher um; eles são equivalentes.
O HTML5 permite links em nível de bloco , mas no seu caso não há um motivo específico para isso, pois há apenas um elemento em nível de bloco. Pessoalmente, eu não faria isso aqui, porque ter a <h1>tag do lado de fora tornaria mais fácil procurar por código-fonte.

Qualquer outra coisa (XHTML, HTML4, etc) e a segunda estão completamente erradas. Não seria um código válido e, em algum nível, é ruim para a otimização da sua pesquisa [insira um aviso padrão sobre o quanto uma ofensa realmente afeta alguma coisa, etc.].

Eles são os mesmos no que diz respeito ao SEO. (Normalmente, os elementos no nível do bloco contêm elementos em linha e não vice-versa; portanto, você deve usar o primeiro exemplo, mas isso não afetará o SEO).

Ambos estão corretos no html5 , o html permite elementos de bloco em elementos inline. Isso também não afeta o SEO, nos dois casos em que o texto é agrupado no cabeçalho e, portanto, permanece com o mesmo valor.

Não é uma opção de validade, mas uma preferência na interface do usuário:

• Se você envolver o cabeçalho em torno da âncora, criar uma âncora grande, apenas o texto será clicável.
• Quando você enrola a âncora no cabeçalho, toda a linha é clicável.

Eu fiz de você um exemplo no jsFiddle.net

Acho que no Caso 2 a hrefinserção geralmente está desalinhada com o restante da minha página. Mas poderia ser assim que eu coloco minhas margens na minha .css. Assim, eu favoreceria o Caso 1.

O que foi dito aqui é perspicaz, obrigado a todos. Vamos dar mais um passo: adicionando microdados e outros na equação.

Digamos que temos

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

competindo com

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

Para mim, 'independentemente do desempenho', o exemplo 2 faz mais sentido. Porque o link nunca faz parte do nome. A diferença se resume à diferença entre innerHTML e textContent, DOMwise. Observando-o através do innerHTML, a âncora atrapalha. Se textContent fosse o caminho, as tags seriam removidas. Então isso também coloca a questão: innerHTML ou textContent.

Então, eu diria que, considerando os microdados, ter a âncora do lado de fora é mais puro.

baseado em: http://thenewcode.com/617/How-To-Add-Microdata-To-Your-Blog

<h1> <a href=""> xyz </a> </h1> Este exemplo está correto.

Os links no nível do bloco devem ser evitados para fins de SEO - da boca do cavalo: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Atualização: Takeaways a partir do link ...

Ter um construto de vinculação, como outros já disseram, é bom para vincular. No entanto, para fins de SEO, você deve manter o texto âncora limpo para que o Google possa interpretá-la melhor e atribuir a relevância apropriada.

John Mueller (analista de tendências para webmasters do Google) continua dizendo ...

Esse uso seria bom para nós (Google) - ainda assim buscávamos o link e poderíamos associar seu texto como uma âncora a ele. Somos bastante flexíveis na análise de HTML, então você provavelmente poderia usá-lo com HTML4. Dito isso, quanto mais claro você tornar o texto âncora, mais fácil será para nós entendermos o contexto do link, para que eu nem sempre usasse um parágrafo inteiro como âncora para todos os seus links internos.

TL; DR Para SEO, não use o link em nível de bloco.

Se o objetivo é ter elementos clicáveis ​​adicionais dentro do link (como uma imagem etc.) e ainda validar com html <5, você pode ter as duas maneiras com javascript:

<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>

caso contrário, simplesmente:

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

adicione cursor:pointerao css do elemento pai para concluir o truque.