Respostas:
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).
<a><h1></h1></a>. Caso contrário, use o padrão tradicional de <h1><a></a></h1>. O Google prestará atenção aos dois métodos igualmente, mas alguns navegadores podem não funcionar bem com o padrão não padrão, a menos que você tenha o tipo de documento correto (HTML5).
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.
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
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.