# Tamanho da imagem OG: pré-visualizações de 1200×630 que funcionam [Canonical HTML page](https://gradiently.design/pt-pt/guide/open-graph-image-size) Sempre que alguém cola a tua ligação, uma pequena imagem decide se alguém clica. Aqui tens o tamanho, as etiquetas e a composição que fazem essa imagem funcionar. ## The short version - O tamanho de imagem Open Graph que funciona em quase todas as plataformas é 1200×630 píxeis, numa proporção de cerca de 1,91 para 1. - As plataformas leem a etiqueta og:image do HTML da tua página quando uma ligação é partilhada e depois guardam a imagem em cache, por isso as alterações podem não aparecer até a pré-visualização ser atualizada. - O endereço og:image tem de ser um URL https completo que carregue sem sessão iniciada, e as etiquetas têm de estar no HTML que o servidor envia, não acrescentadas depois por JavaScript. - As pré-visualizações de ligações aparecem muitas vezes em pequeno, por isso uma imagem OG precisa de um título curto em letra grande, centrado, com margens generosas. - Algumas aplicações de mensagens recortam as pré-visualizações num quadrado, por isso as palavras mais importantes devem ficar no meio da imagem. O **tamanho da imagem OG** que funciona em quase todo o lado é **1200×630 píxeis**, uma proporção horizontal de cerca de 1,91 para 1. O Facebook, o LinkedIn, o X, o Slack, o Discord e a maioria das aplicações de mensagens constroem as pré-visualizações de ligações a partir desta única imagem, declarada na etiqueta `og:image` da tua página. O LinkedIn indica 1200×627 para a imagem de ligação, suficientemente perto para que um só ficheiro de 1200×630 sirva os dois. - Open Graph 1200×630: 1200 × 630 - Imagem de ligação do LinkedIn 1200×627: 1200 × 627 - Quadrado central 630×630: 630 × 630 A pré-visualização de ligação padrão, a imagem de ligação quase idêntica do LinkedIn e o quadrado central que sobrevive quando uma aplicação recorta a pré-visualização. ## O que é uma imagem Open Graph e como são obtidas as pré-visualizações O Open Graph é um conjunto de etiquetas `meta` no `head` de uma página web. Quando alguém cola a tua ligação numa publicação ou numa conversa, a plataforma envia um rastreador à página, lê essas etiquetas, descarrega a imagem e desenha o cartão de pré-visualização. Fá-lo uma vez e depois guarda o resultado em cache, às vezes durante dias. Três pormenores apanham a maioria das pessoas. O endereço da imagem tem de ser um **URL completo**, a começar por `https://`, e não um caminho relativo. Tem de carregar para qualquer pessoa, sem sessão iniciada nem um aviso de cookies pelo meio. E as etiquetas têm de estar no HTML que o teu servidor envia, porque a maioria dos rastreadores não executa JavaScript, por isso as etiquetas acrescentadas por um script depois de a página carregar nunca são vistas. ```html ``` As etiquetas de que uma pré-visualização de ligação precisa. O X lê as etiquetas Open Graph quando faltam as suas, mas `twitter:card` definido como `summary_large_image` pede a pré-visualização grande. > **A largura e a altura ajudam** Declarar `og:image:width` e `og:image:height` permite a algumas plataformas desenhar a pré-visualização logo na primeira partilha, em vez de esperarem até descarregar e medir a imagem. ## Desenhar uma imagem OG que se lê em tamanho de miniatura Uma imagem de 1200×630 raramente é vista a 1200 píxeis. Num feed no telemóvel encolhe até uma faixa com a largura do ecrã, e numa conversa pode ser ainda mais pequena. Desenha para a versão pequena: um título curto, letra grande, contraste forte e nada de importante nos cantos. - **Três a sete palavras.** O título da página reduzido ao essencial, não o título completo. - **Letra grande.** Na tela de 1200×630, um título com cerca de 64 a 96 píxeis de altura continua legível quando a pré-visualização encolhe. - **Margens de cerca de 60 píxeis** ou mais, para que nada toque numa margem que uma plataforma possa arredondar ou recortar. - **Uma pequena assinatura da marca**, como um logótipo em texto ou o nome do teu site, sempre no mesmo sítio em todas as imagens. - **Um fundo coerente**, para que as pessoas reconheçam as tuas ligações antes de as lerem. Uma pré-visualização de ligação de 1200 por 630 com o texto Como desenhar um anúncio de lançamento sobre um fundo em gradiente Uma pré-visualização de ligação feita para a versão pequena: uma linha curta, grande e centrada, com uma pequena assinatura por cima. ### Evita - O título completo da página em letra pequena - Uma captura de ecrã da própria página - Palavras nos cantos, onde os recortes quadrados as cortam - Texto sobre uma fotografia carregada sem zona calma ### Faz - Um título encurtado que se lê num relance - Um cartão desenhado com uma só ideia - As palavras-chave no quadrado central - Um fundo calmo com contraste forte por trás do texto O contraste importa mais em tamanhos pequenos, não menos. Confirma que o teu título cumpre as proporções de [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) e, se o fundo for um gradiente, testa o contraste onde as palavras ficam de facto. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra como encontrar a zona calma. ## Uma imagem OG para o site inteiro, ou uma por página Todos os sites precisam de uma imagem por omissão para as páginas que não têm nada melhor. Mas uma imagem por omissão em todas as páginas faz com que todas as ligações partilhadas pareçam iguais, e ninguém percebe pela pré-visualização de que página se trata. As páginas que as pessoas mais partilham merecem a sua própria imagem. | Tipo de página | O que a imagem deve dizer | Como a fazer | | --- | --- | --- | | Página inicial | O teu nome e uma promessa numa linha | Desenhada uma vez, à mão | | Artigo ou guia | O título curto do artigo | Gerada a partir do título | | Página de produto | Nome do produto, com o produto à vista | Gerada, com a imagem do produto | | Página de evento | Nome e data do evento | Desenhada com o visual do evento | | Tudo o resto | O teu nome e o teu fundo de assinatura | A imagem por omissão do site | Onde uma imagem OG por página compensa e onde a imagem por omissão chega. Fazer à mão uma imagem separada para cada artigo não escala. A maioria das frameworks modernas consegue gerar uma imagem OG a partir de um modelo quando a página é construída ou pedida pela primeira vez; [imagens OG dinâmicas](https://gradiently.design/pt-pt/guide/dynamic-og-images) explica a abordagem. - Guias: violeta profundo: `linear-gradient(135deg, #140c2e 0%, #3b1f7a 55%, #7c4dff 100%)` - Produto: azul-petróleo escuro: `linear-gradient(135deg, #07201f 0%, #0e4d4a 55%, #2dd4bf 100%)` - Eventos: brasa: `linear-gradient(135deg, #2a0f0a 0%, #7a2a14 55%, #ff8a4c 100%)` Uma família, três secções: a mesma estrutura do escuro ao claro e o mesmo ângulo, com um matiz diferente por secção, para que as pré-visualizações sejam coerentes mas continuem a dizer para onde vai uma ligação. ## Como testar as tuas pré-visualizações de ligações 1. **Verifica as etiquetas** Abre a página, vê o código-fonte e procura `og:image`. Se não estiver no código-fonte, os rastreadores não a veem. 2. **Abre o endereço da imagem** Cola o URL de `og:image` numa janela privada do navegador. Deve carregar diretamente, por https, sem sessão iniciada. 3. **Usa o inspetor da plataforma** O [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) mostra como o LinkedIn vê um URL e atualiza a sua cache. O Facebook tem um Sharing Debugger semelhante. 4. **Envia-a a ti próprio** Cola a ligação numa aplicação de conversa e num rascunho de publicação. Vê a pré-visualização num telemóvel, onde fica mais pequena. 5. **Força a atualização da cache depois de mudanças** Se uma imagem antiga continuar a aparecer, dá à imagem nova um endereço novo, por exemplo acrescentando `?v=2` ao URL, e inspeciona de novo. ## Formato e peso do ficheiro Usa **PNG** para cartões desenhados com texto e cor lisa, e **JPEG** para imagens fotográficas. Evita o SVG, que a maioria dos rastreadores não aceita para pré-visualizações, e tem cuidado com formatos mais recentes que algumas plataformas podem não ler. Mantém o ficheiro leve para que o rastreador o obtenha depressa; um cartão desenhado raramente precisa de ser grande. Um toque de grão evita que um gradiente crie faixas quando uma plataforma o volta a comprimir. Na Gradiently, a **Pré-visualização de ligação (Open Graph) 1200×630** é um dos tamanhos incluídos, por isso podes voltar a compor uma publicação como pré-visualização com **copiar para tamanhos** e manter um só visual entre a publicação e a ligação. Num lançamento, a imagem OG é um item de uma lista mais longa; [gráficos para o dia de lançamento](https://gradiently.design/pt-pt/guide/launch-day-graphics) tem a lista completa. ## FAQ ### Qual é o melhor tamanho de imagem OG? 1200×630 píxeis, numa proporção de cerca de 1,91 para 1. Funciona no Facebook, no LinkedIn, no X, no Slack e na maioria das aplicações de mensagens. ### Porque é que a pré-visualização da minha ligação mostra uma imagem antiga? As plataformas guardam as pré-visualizações em cache. Atualiza a página no inspetor da plataforma, como o LinkedIn Post Inspector, ou dá à imagem nova um URL novo para que seja obtida de novo. ### Porque é que a minha imagem OG não aparece de todo? Normalmente o URL de og:image é relativo, está bloqueado por um início de sessão ou é acrescentado por JavaScript depois de a página carregar. Usa um URL https completo no HTML gerado pelo servidor. ### O X usa imagens Open Graph? Sim. O X recorre às etiquetas Open Graph quando faltam as suas. Acrescenta uma etiqueta twitter:card definida como summary_large_image para teres a pré-visualização grande. ### Cada página deve ter a sua própria imagem OG? As páginas que as pessoas partilham muito, como artigos, produtos e eventos, ganham com uma imagem própria. Tudo o resto pode usar uma boa imagem por omissão para o site inteiro.