Blogger: faça o Google reconhecer os vídeos dos seus posts

Otimize vídeos no Blogger com player responsivo e SEO reconhecido pelo Google

Vídeo incorporado não é vídeo indexado. Aprenda a diferença que o Google vê

Atualizações:
04-09-2023 | 12-09-2023 | 12-05-2025 | 15-07-2025 | 22-07-2025

Por: Armindo Guimarães

O Blogger não oferece uma Galeria de Vídeos nativa, ao contrário do WordPress, que permite isso através de plugins — mesmo que pagos.

No entanto, é inegável a utilidade de um sistema que permita exibir vários vídeos num único player. Seja para comparar estilos musicais, demonstrar formas diferentes de executar uma arte ou simplesmente enriquecer o conteúdo de forma visual.

É verdade que circulam na internet diversas soluções gratuitas para criar galerias de vídeo no Blogger. Mas a maioria tem limitações:

– Exibem vídeos em formato pequeno e só ampliam ao abrir no YouTube (o que afasta o visitante do blog);
– Requerem alteração manual do código HTML, o que compromete a responsividade dos vídeos;
– Baseiam-se em códigos que já não são aceites pelo Blogger desde as mudanças implementadas em julho de 2020.

E o maior entrave de todos: os players dos vídeos (YouTube ou Vimeo) não são responsivos por padrão. Ao fixar altura e largura no código de incorporação, o vídeo até pode encaixar-se bem no PC, mas fica todo desformatado no telemóvel.

Depois de muito testar e combinar soluções, encontrei um método simples e eficaz. Não é uma galeria tradicional, mas é gratuito, fácil de aplicar em posts e páginas, e — o mais importante — 100% responsivo. O player adapta-se à largura do conteúdo, seja num ecrã grande ou num smartphone.

Vamos por partes. O tutorial está dividido assim:

• Player com 1 vídeo (YouTube ou Vimeo) 
• Player com 2 ou mais vídeos (Galeria)
• Player com uma playlist de vídeos do Youtube

Como diria o saudoso Odorico Paraguaçu: “Vamos botar de lado os entretantos e partir logo pros finalmentes!”

ETAPA 1 - TORNAR OS VÍDEOS RESPONSIVOS

1 - Aconselhamos que utilize um blogue de testes e só depois, se tudo der certo, é que estará à vontade para aplicar no seu blogue.

2 - Entre no Blogger e no lado esquerdo clique em TEMA.

3 – Clique na seta ao lado de PERSONALIZAR.

4 – Se não optou pelo blogue de testes, clique em “Criar cópia de segurança” e depois em TRANSFERIR. Deste modo, todos os dados do blogue até à data ficarão salvaguardados para o caso de algo não correr como o previsto.

5 – Volte a clicar na seta ao lado de PERSONALIZAR.

6 – Clique em “Editar HTML”.

7 – Dentro da caixa do HTMl, coloque o cursor do rato numa área em branco e tecle Ctrl + F.

8 – Na janela de pesquisa que irá expandir no topo da caixa do HTML, digite ]]></b:skin> e tecle Enter para localizar o referido ]]></b:skin>

9 – Acima dessa linha cole o código HTML que a seguir apresentamos.

NOTA 1: Copie os códigos abaixo e cole-os no Bloco de Notas do seu computador. De seguida, copie os códigos do Bloco de Notas e cole-os no HTML do blogue. Desta forma, os códigos serão colocados totalmente limpos. Caso contrário, junto com eles iriam uma série de caracteres que não se veem, mas que em nada abonam a favor do HTML e do próprio blogue. 

NOTA 2: Os códigos contemplam a qualidade responsiva de todos os player aqui apresentados. 

CSS Responsivo para o Template: colar antes de ]]></b:skin> 

Clique para copiar o código na nossa Página de Códigos

ETAPA 2 - PLAYERS DE VÍDEO

Entretanto, um pormenor MUITO IMPORTANTE que muitos desconhecem: apesar do Blogger permitir incorporar vídeos com código HTML, o Google só reconhece oficialmente a presença de um vídeo no post se forem usados os chamados "dados estruturados" (JSON-LD). Isso melhora o SEO do post e pode exibir miniaturas de vídeo na pesquisa.

Para isso, siga os seguintes passos:

1. No código dos vídeos, substitua os campos em MAIÚSCULAS pelas informações corretas.

2. O campo "uploadDate" é obrigatório — use sempre o formato: AAAA-MM-DDT00:00:00+00:00 
 
3. Para saber a data real do vídeo do YouTube, visite a página do vídeo e veja a data de publicação, passando o cursor por cima do número de visualizações, ao lado do qual aparece a data de publicação do vídeo.

4 - Se o vídeo for seu, use a data real de envio. Se for de terceiros e não conseguir confirmar a data, pode usar uma data aproximada ou genérica, como:
"uploadDate": "2022-01-01T00:00:00+00:00"

5 - No item "duration", substituir os valores PT__M__S pela duração exata do vídeo, no formato ISO 8601: 2 minutos e 15 segundos → PT2M15S
1 hora, 3 minutos e 9 segundos → PT1H3M9S

Exemplos úteis:
Duração real    Formato correto ISO 8601
15 segundos    PT15S
1 minuto    PT1M
2m 30s    PT2M30S
1h 5m 7s    PT1H5M7S

Se desejar, pode usar o nosso Gerador PT ISO 8601 automático, com botão Copiar.

 

 
Player simples do YouTube (com SEO)

Clique para copiar o código na nossa Página de Códigos

Player simples do Vimeo (com SEO)

Clique para copiar o código na nossa Página de Códigos

NOTA:
Devido ao código responsivo que colocamos no HTML do blogue, o player de vídeo vai ajustar-se à largura da janela do post ou da página, bem como à largura dos dispositivos móveis, motivo porque no código não aparece a largura nem a altura do vídeo. 

 

▶️Confira aqui, como ficará o player com apenas 1 vídeo.

Player Vários vídeos (YouTube e Vimeo)

Clique para copiar o código na nossa Página de Códigos

1 – O código suporta um número infinito de vídeos que podem ser vistos num só player do post ou página. Apenas por uma questão de estética não é aconselhável o uso exagerado de links (vídeos), tudo dependendo dos fins.

2 – Tal como no player de 1 só vídeo, apenas temos que colocar o ID dos vídeos que pretendemos inserir no player-galeria e que se encontra no link de partilha.

4 – De notar que o ID do primeiro vídeo (e apenas este), deve ser repetido a fechar o código, conforme exemplo abaixo para um player com 3 vídeos:

5 – Para além do ID dos vídeos, colocamos no espaço assinalado, o Nome do interprete e o Título do vídeo.
 
6 - Caso o primeiro vídeo a apresentar no player seja do Vimeo, a parte final do código deverá ser alterada no que ao URL se refere, como o exemplo abaixo:

  window.addEventListener('DOMContentLoaded', function() {
    var firstVideoUrl = 'https://vimeo.com/524933864'; // URL do primeiro vídeo do Vimeo
    playVideo(firstVideoUrl);
  });
</script>

7 – O presente código tem apenas 3 vídeos. Para acrescentarmos outro ou outros vídeos, só temos que incluir o respetivo código e ID do vídeo que pretendemos e, é claro, o nome do intérprete e título do vídeo. Assim:

YOUTUBE

<div class="videoTitle" onclick="playVideo('https://www.youtube.com/watch?v=YJ9W2pZwvlY')">Título do vídeo 1 (YouTube)</div>

 
VIMEO

<div class="videoTitle" onclick="playVideo('https://vimeo.com/524933864')">Título do vídeo 2 (Vimeo)</div>

 
8 - Tal como no caso do player de 1 só vídeo, devido ao código responsivo que colocamos no HTML do blogue, o player-galeria de vídeos vai ajustar-se à largura do post ou da página, bem como à largura dos dispositivos móveis.

▶️Confira aqui, como ficará o player com vários vídeos com os títulos clicáveis por cima.

Player com Playlist única do YouTube 

Clique para copiar o código na nossa Página de Códigos

NOTA: O código da playlist é retirado de parte do link de partilha da playlist, como por exemplo, este:

https://youtube.com/playlist?list=PLMG6-OLBIeMFPDD90OfGAedPgxprc2dFj&si=0mCmy0g6ZbEMBrLd

▶️Confira aqui, como ficará o player com uma playlist.

 

VALIDAÇÃO:

ℹ️Depois de publicar o post, visite o site oficial do Google:

Cole o link do seu post e clique em “Testar URL”. O Google vai dizer se, além do artigo, reconhece o vídeo corretamente. 

E chegamos ao fim deste tutorial, no qual inserimos, a título de demonstração, o link de um player com um vídeo, um link de um player com vários vídeos e um link com um player com várias playlists.

Qualquer dúvida pode ser colocada na janela de Comentários deste post, sendo que prometemos ser breves na resposta.

 

Em alternativa, lembramos que qualquer dúvida por ser sempre tirada através do recurso à Comunidade de Ajuda do Blogger. 

 

- - - 

Outros artigos do autor sobre o Blogger: 

• Respostas a Dúvidas mais frequentes dos iniciantes no Blogger 
• Diferença entre os estilos "Normal" e "Parágrafo" nos posts do Blogger e Wordpress 
• Problemas de formatação em posts do blogue
• Como criar um blogue no Blogger: guia simples e direto
• Post vs Página no Blogger: qual é a diferença?
• Google Search Console: Potencie o seu blogue com dados reais
• O meu blog não aparece no Google. E agora?
• Como nomear imagens para SEO: Guia simples para blog ou site