Pensar em SEO nas páginas, como vocês fazem?

[wilsongomes-swe]

Galera, bom dia!

Estou fazendo um blog mas tentando fazê-lo da maneira mais otimizada para motores de busca e semanticamente correto, é uma POC apenas para estudar sobre semantica e SEO...

A lista de artigos, qual seria a estrutura mais legal, penso em fazer assim:

• main (sobre a listagem, conteúdo principal da home)
  • ul (llista dos posts)
    • li
      • article (preview do post)

Dentro da tela de post penso em:

• main
  • article
    • header
      • h1
    • h2
      • p
    • h1
      • p

Concordam com esta estrutura?
Quem tiver materiais legais ou indicar algum curso sobre o tema, gostaria de indicações

[kvnol]

@wilsonneto-dev legal, isso é importante demais e num mundo com foco total no JavaScript acabamos deixando de lado essa parte da semântica e SEO.

Então, na estrutura da listagem eu colocaria uma section englobando a lista, porque faria mais sentido mostrar ao browser que a ul faz parte de uma seção no escopo principal do site.

E na single do post, não entendi o p dentro do h2 e do h1 isso não pode acontecer, pois os headings são títulos, colocar parágrafos dentro dos títulos não fazem muito sentido. O que eu faria neste caso é:

	<main>
		<article>
			<header>
				<hgroup>
					<h1>Título</h1>
					<h2>Subtítulo</h2>
				</hgroup>
			</header>
			<div>
				<p></p>
				<h3></h3>
				<p></p>
				...
			</div>
		</article>
	</main>

Não sei se isso faz sentido pra você, mas eu deixaria o h1 e o h2 como tags principais de informações do post (título e subtítulo) e deixaria os demais headings para títulos internos dentro dos posts.

É assim que costumo a fazer. Além disso, claro, uso o schema.org para declarar os metadados, tag time para a data do post e também um breadcrumb.

[wilsongomes-swe]

@kvnol shoow! Viajei nos meus paragrafos dentro dos títulos kk Era para serem irmãos msm igual vc mostrou.

Fez sentido demais deixar o h1 e h2 juntos no header e os subtítulos do texto com h3... Maravilha, vi algo assim em pesquisas agora há pouco.

Só queria ver sua opinião quanto a questão da listagem, a listagem a que me refiro em primeiro momento é a página inicial onde vai aparecer um monte de thumbs/preview de artigos, na home como o conteúdo principal dela é de fato a listagem qual sua opinião se fazer algo assim?

<main>
	<header>
		<h1>Posts mais vistos do blog</h1>
	</header>
	<ul>
		<li>
			<article>
				<img src="thumb" />
				<header>
					<h2>titulo</h2>
				</header>
				<p>
					breve descrição
				</p>
			</article>
		</li>
		li...
		li...
		li...
	</ul>
</main>

Concorda com esta estrutura para uma página apenas de listagem?

[kvnol]

@wilsonneto-dev massa! Então, como eu disse, acho que seria interessante ter um section englobando o header e a ul, para demonstrar que aquilo seria o mesmo conteúdo a mesma seção.

Com alguns ajustes, eu faria desta forma:

	<main role="main">
		<section>
			<header>
				<h1>Posts mais vistos do blog</h1>
			</header>
			<ul>
				<li>
					<article>
						<figure>
							<img src="thumb" />
						</figure>
						<div>
							<header>
								<h2>titulo</h2>
							</header>
							<p>
								breve descrição
							</p>
						</div>
					</article>
				</li>
				li...
				li...
				li...
			</ul>
		</section>
	</main>

[wilsongomes-swe]

@glauberm valeu, vou ler já os artigos citados. @kvnol maravilha, verdade, semanticamente e só de olhar da para ter a visualização melhor das seções.

@glauberm então acredita que neste caso eu removo as ul's, mas acredita que coloco algum outro elemento por volta dos articles? Uma section? Ou você colocaria eles ali removendo os ul's? Apenas para ter uma opinião.

Valeu demais!

[tarciozemel]

@wilsonneto-dev Realmente, essa lista de artigos na home comumente é representada com <ul>, mas também não vejo como "errado" ser meramente vários <article> irmãos.

Recentemente, fui surpreendido por um estudo feito por Neil Patel que mostrou que, considerando SEO puramente, não faz tanta diferença usar errado as tags de título; conta mais a aparência de título que se dá. =P

Ainda é (muito) importante usar as tags corretamente, mas mais pensando em acessibilidade, usabilidade etc.

PS: Tem outras tags que você pode colocar dentro do próprio artigo para incrementar a semântica -- coincidentemente, publiquei um artigo/vídeo sobre isso ontem --, mas aí é sob demanda, a depender do conteúdo de cada artigo.

PPS: <hgroup> não vingou; atualmente, tem o mesmo valor semântico que uma <div>.

[wilsongomes-swe]

@tarciozemel show demais, muito obrigado pelos pontos, pela referencia e pelo artigo.
Valeeu!