Como adicionar imagens corretamente no WordPress (Passo a Passo)

Encontrar a imagem perfeita para o seu post no WordPress é uma ótima sensação, mas muitas vezes vem com uma preocupação incômoda sobre a lentidão do seu site ou prejudicar seu SEO.

É uma preocupação válida, pois a abordagem errada pode levar a visitantes frustrados e classificações de busca mais baixas. Sabemos o quão crucial é acertar esse equilíbrio para um site de sucesso.

Através da nossa experiência gerenciando milhares de artigos, desenvolvemos um processo simples que mantém as páginas carregando rapidamente enquanto faz as imagens funcionarem para o seu SEO. É o método em que confiamos todos os dias.

Neste guia, vamos guiá-lo por esses passos exatos. Você aprenderá como adicionar imagens corretamente de uma forma que ajude seu site a crescer.

Adicionar imagens no WordPress corretamente

A Importância de Fazer Upload Correto de Imagens no WordPress

Às vezes, os usuários copiam uma imagem diretamente da fonte e a colam no conteúdo do site. Infelizmente, isso pode causar problemas como páginas lentas, má experiência do usuário e SEO ruim.

Ao adicionar imagens ao seu site WordPress, é importante fazê-lo corretamente. Isso significa usar o formato de arquivo, nome de arquivo e texto alternativo corretos.

Você também deve usar nomes de arquivo de imagem descritivos. Por exemplo, em vez de fazer upload de um arquivo genérico como IMG_9021.jpg, você deve renomeá-lo para algo descritivo como receita-de-biscoito-com-gotas-de-chocolate.jpg antes de fazer o upload.

Este passo simples dá aos motores de busca uma pista sobre o que é a imagem, o que pode ajudar seu SEO.

Adicionar imagens corretamente também significa redimensionar suas imagens para que carreguem rapidamente e fiquem boas em todos os dispositivos. Por exemplo, alguns formatos de imagem como JPEG são mais compactados que outros. Isso significa que imagens JPEG ocuparão menos espaço em seu servidor e levarão menos tempo para carregar.

Ao usar esses formatos, juntamente com um plugin de compressão de imagem, você pode melhorar a experiência do usuário em seu site.

O bloco de Imagem do WordPress permite que você adicione manualmente informações importantes de SEO, como texto alternativo, a cada imagem. Isso pode aumentar as classificações do seu site e melhorar a acessibilidade de suas páginas da web para pessoas com deficiência.

Dito isso, vamos ver como adicionar imagens corretamente no WordPress. Cobriremos vários métodos, e você pode usar os links rápidos abaixo para pular para as diferentes seções do nosso tutorial:

Como Adicionar Imagens no Editor de Blocos (Gutenberg)

Você pode facilmente adicionar imagens no editor de blocos do WordPress usando o bloco de Imagem.

Primeiro, você precisa abrir a página/postagem existente ou nova onde deseja adicionar uma imagem.

Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela para abrir o menu de blocos. A partir daqui, você precisa encontrar o bloco ‘Imagem’ e adicioná-lo à postagem ou página.

Adicionar bloco de imagem à postagem

Depois de fazer isso, clique no botão ‘Biblioteca de Mídia’ para abrir o prompt ‘Selecionar ou Enviar Mídia’ na tela.

Aqui, você pode mudar para a aba ‘Enviar Arquivos’ se quiser enviar uma imagem do seu computador.

No entanto, se você quiser adicionar uma imagem da Biblioteca de Mídia, você também pode fazer isso mudando para a aba ‘Biblioteca de Mídia’.

Selecionar imagem da biblioteca de mídia

No painel ‘Detalhes do Anexo’ à direita, você pode adicionar informações importantes. Certifique-se de preencher o campo ‘Texto Alternativo‘ com uma breve descrição do que a imagem mostra. Isso é crucial para SEO e para visitantes que usam leitores de tela.

Você também pode adicionar um ‘Título’, que aparece quando alguém passa o mouse sobre a imagem, e uma ‘Legenda’, que é uma descrição visível exibida logo abaixo da imagem.

Para mais detalhes, você pode consultar nosso guia para iniciantes sobre como adicionar legendas a imagens no WordPress.

Em seguida, basta clicar no botão ‘Selecionar’ para adicionar a imagem à sua página ou postagem.

Preencher detalhes da imagem

Agora que você a carregou, pode personalizar ainda mais o tamanho da imagem, as dimensões, a borda e o estilo no painel de blocos à direita.

Para detalhes, confira nosso tutorial sobre como adicionar e alinhar imagens no WordPress.

Configurações de imagem no painel do bloco

Finalmente, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.

Agora você adicionou uma imagem corretamente no editor Gutenberg.

Como Adicionar Imagens no Editor Clássico

Se você ainda estiver usando o editor clássico antigo no WordPress, poderá usar este método.

Primeiro, você precisa visitar a página ou postagem onde deseja adicionar a imagem no painel do WordPress. Assim que estiver lá, basta clicar no botão ‘Adicionar Mídia’ para abrir a Biblioteca de Mídia.

Clicar no botão adicionar mídia

Depois disso, você pode alternar para a guia ‘Upload de Arquivos’ para carregar uma imagem do seu computador.

Alternativamente, para adicionar uma imagem da Biblioteca de Mídia, basta alternar para a guia ‘Biblioteca de Mídia’.

Fazer upload do arquivo de imagem no editor clássico

Ao adicionar uma imagem, você precisará adicionar texto alternativo e um título para ela. Você também pode adicionar uma descrição e legenda, se desejar.

Para obter os melhores resultados, use cada campo para seu propósito específico. O texto alternativo deve descrever claramente a imagem para mecanismos de busca e usuários com deficiência visual.

A legenda é uma descrição visível para seus leitores, e o título pode fornecer informações extras quando alguém passa o mouse sobre a imagem em um desktop.

Em seguida, prossiga e clique no botão ‘Inserir na Postagem’.

Configurar detalhes do anexo no editor clássico

Agora, a imagem será adicionada à sua postagem ou página do WordPress.

A partir daqui, você pode alterar seu alinhamento usando os ícones de alinhamento acima da imagem. Você pode editar uma imagem ainda mais clicando no ícone de lápis.

Clique no ícone de Lápis para editar uma imagem

Isso abrirá o prompt 'Detalhes da imagem' em sua tela, onde você pode alterar o tamanho e adicionar atributos de título da imagem, classes CSS, alinhamento e muito mais.

Quando terminar, basta clicar no botão 'Atualizar' para salvar as alterações que você fez.

Editar imagem no editor clássico

Depois disso, simplesmente clique no botão 'Publicar' ou 'Atualizar' para salvar sua postagem.

Adicionar Imagens na Biblioteca de Mídia do WordPress

Outro método é fazer o upload de imagens diretamente para sua Biblioteca de Mídia primeiro. Esta é uma ótima maneira de preparar e organizar suas imagens antes de adicioná-las a uma postagem ou página.

Para adicionar uma imagem da Biblioteca de Mídia, você precisa visitar a página Mídia » Adicionar Nova na área de administração do WordPress.

Uma vez lá, clique no botão 'Selecionar Arquivos' para fazer o upload de uma imagem do seu computador. Em seguida, clique no link 'Editar' ao lado da imagem.

Adicionar imagem na biblioteca de mídia e clicar no link Editar

Isso o levará à página 'Editar Mídia', onde você pode começar alterando o título da imagem. Depois disso, você pode rolar para baixo para adicionar texto alternativo, uma legenda e uma descrição.

Depois de fazer isso, você também pode clicar no botão 'Editar Imagem'.

Clicar no botão Editar Imagem

Isso o direcionará para outra página, onde você pode cortar, redimensionar, girar ou espelhar a imagem de acordo com sua preferência. Para instruções detalhadas, consulte nosso guia para iniciantes sobre como fazer edição básica de imagens no WordPress.

Quando estiver satisfeito, basta clicar no botão 'Atualizar' para salvar suas alterações.

recursos básicos de edição no WordPress

Isso o levará de volta à página 'Editar Mídia', onde você terá que clicar no botão 'Atualizar' novamente para armazenar suas configurações.

Agora você adicionou com sucesso uma imagem à Biblioteca de Mídia.

Em seguida, visite a postagem onde você deseja adicionar esta imagem na barra lateral de administração do WordPress. Uma vez lá, clique no botão ‘Adicionar Bloco’ (+) para adicionar um bloco ‘Imagem’ à postagem.

Em seguida, você precisa selecionar o botão ‘Biblioteca de Mídia’.

Bloco de imagem

Isso abrirá o prompt ‘Selecionar ou Enviar Mídia’ em sua tela, onde você notará a imagem que você enviou na biblioteca de mídia no topo.

Ao selecioná-la, você verá que seu título, texto alternativo, legenda e descrição já foram adicionados a partir da página da biblioteca de mídia.

Agora, basta clicar no botão ‘Selecionar’ para fazer o upload da imagem para o editor de blocos.

Adicionar imagem da biblioteca de mídia

Por fim, clique no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas configurações.

Como Otimizar uma Imagem para SEO no WordPress

Depois de adicionar uma imagem a uma postagem/página, também é crucial otimizá-la para os motores de busca. Infelizmente, o WordPress não oferece recursos avançados de SEO integrados para imagens.

É aqui que entra o All in One SEO for WordPress (AIOSEO).

É o melhor plugin de SEO para WordPress do mercado, pois torna super fácil otimizar seu conteúdo, incluindo imagens, para os motores de busca.

Na WPBeginner, temos usado ele para melhorar nossos rankings nos motores de busca e temos visto ótimos resultados. Para saber mais sobre nossa experiência, veja nossa análise do AIOSEO.

Primeiro, você precisa instalar e ativar o plugin AIOSEO. Para mais instruções, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Observação: O AIOSEO também tem uma versão gratuita. No entanto, você precisará do plano pro do plugin para desbloquear o recurso de SEO de Imagem.

Após a ativação, você terá que configurar o assistente de configuração.

Para mais detalhes, consulte nosso guia sobre como configurar o All in One SEO para WordPress corretamente.

Assistente de configuração do AIOSEO

Em seguida, acesse a página All in One SEO » Aparência da Pesquisa na barra lateral de administração do WordPress e mude para a aba ‘SEO de Imagem’.

Depois disso, role para baixo e clique no botão ‘Ativar SEO de Imagem’ para desbloquear o recurso.

Ativando o Módulo de SEO de Imagem no AIOSEO

Agora você poderá ver as configurações de SEO de Imagem. Aqui, você notará diferentes abas para o título, texto alternativo, legenda, descrição e nome do arquivo.

Configurar Títulos Automáticos de Imagem

Assim que você mudar para a aba ‘Título’ na página de SEO de Imagem, você pode começar criando um formato de título para suas imagens usando tags inteligentes.

Essas tags inteligentes gerarão automaticamente os atributos de título para suas imagens. Isso é o que um visitante verá quando passar o mouse sobre suas imagens.

Por exemplo, se você quiser que cada atributo de título de imagem use o título da imagem e o título do site, você pode adicionar essas tags inteligentes no campo ‘Formato do Título’.

Isso significa que uma imagem intitulada ‘Biscoito com Gotas de Chocolate’ em um site chamado ‘Meu Blog Incrível’ receberia automaticamente um atributo de título de imagem de ‘Biscoito com Gotas de Chocolate – Meu Blog Incrível’.

Adicionar tags inteligentes para configurar o título de SEO

Depois disso, você também pode ativar a opção Remover Pontuação se quiser que o AIOSEO remova automaticamente alguns caracteres ao criar um título de imagem a partir do nome do arquivo.

Por exemplo, se você usar hifens ao salvar um arquivo de imagem como ‘uma-imagem-exemplo’, você pode escolher a opção ‘Hifens (-)’ na seção ‘Caracteres a Converter em Espaços’.

Assim que fizer isso, o AIOSEO removerá automaticamente esses hifens e os transformará em espaços. Isso é útil porque converte automaticamente um nome de arquivo como ‘uma-imagem-exemplo.jpg’ em um título limpo e legível como ‘uma imagem exemplo’, o que é melhor para usuários e mecanismos de pesquisa.

Configurar opções de remoção de pontuação e capitalização

Depois disso, role para baixo até a seção ‘Formatação’.

A partir daqui, você pode escolher uma opção de formatação para o seu título. Recomendamos escolher a formatação de frase ou de título para tornar seus títulos mais legíveis.

Configurar Tags Alt Automáticas

Após configurar as definições de título, mude para a aba ‘Tag Alt’ no topo.

A partir daqui, você pode usar as tags inteligentes ao lado da opção ‘Formato da Tag Alt’ para gerar automaticamente o texto alternativo para todas as suas imagens.

Depois disso, você também pode ativar a configuração ‘Remover Pontuação’ se quiser que caracteres como hifens (-) ou underscores (_) sejam convertidos em espaços.

Configurações de SEO para tags alt

Da mesma forma, se houver caracteres como números ou sinais de mais (+) que você não quer que o AIOSEO remova ao criar o texto alternativo, então você pode marcar as caixas para essas opções na seção ‘Caracteres a Excluir da Remoção’.

Você também pode selecionar uma capitalização para o seu texto alternativo.

Configurar Legendas e Descrições Automáticas

Para gerar legendas automáticas para suas imagens, mude para a aba ‘Legendas’.

A partir daqui, certifique-se de que a opção ‘Autogerar Legenda no Upload’ esteja ativada. Você pode então selecionar as tags inteligentes que serão usadas para gerar legendas para suas imagens.

Habilitar o alternador de Legendas e configurar suas tags inteligentes

Em seguida, você também pode usar o recurso Remover Pontuação para excluir ou incluir caracteres nas legendas e escolher uma capitalização para elas.

Quando terminar, você precisa mudar para a aba ‘Descrição’ no topo.

A partir daqui, certifique-se de que a opção ‘Autogerar Descrição no Upload’ esteja ativada. Você também deve selecionar as tags inteligentes que deseja usar para gerar descrições automáticas de imagens.

Habilitar o alternador de Descrição e configurar suas tags inteligentes

Em seguida, você também pode usar o recurso ‘Remover Pontuação’ para incluir/excluir caracteres como sublinhados, apóstrofos ou números na descrição.

Depois disso, basta selecionar uma capitalização para as descrições de suas imagens.

Remover pontuação e configurações de maiúsculas/minúsculas

Configurar Nomes de Arquivo Automáticos

Como mencionamos anteriormente, recomendamos dar nomes de arquivo amigáveis para SEO aos seus arquivos de imagem. Você pode fazer isso antes de fazer o upload de suas imagens, ou o AIOSEO pode fazer isso automaticamente para você.

Ao mudar para a aba ‘Nome do Arquivo’, você verá que o AIOSEO fornece configurações padrão de ‘Remover Pontuação’ para ajudá-lo a começar.

No entanto, se houver mais caracteres que você deseja que o AIOSEO exclua dos nomes de arquivo de suas imagens ao criar títulos ou texto alternativo, você pode digitar esses caracteres na caixa ‘Palavras a Remover’.

Configurações do AIOSEO para Nome do Arquivo

Depois disso, você também pode selecionar uma capitalização para seus nomes de arquivo.

Quando terminar, não se esqueça de clicar no botão ‘Salvar Alterações’ para armazenar suas configurações.

Você otimizou com sucesso suas imagens para SEO, e o AIOSEO gerará automaticamente títulos, texto alternativo, legendas e descrições para todas as suas imagens.

Para instruções mais detalhadas, consulte nosso guia para iniciantes sobre como otimizar imagens para mecanismos de busca.

Bônus: Permitir que Usuários Façam Upload de Imagens no WordPress

Você também pode querer permitir que seus usuários enviem suas próprias imagens para o seu blog WordPress. Isso pode ser útil se você estiver hospedando um concurso ou executando um site de fotografia que aceita imagens geradas por usuários.

Para isso, você pode usar o WPForms, que é o melhor plugin de formulário de contato do mercado. Ele vem com um construtor de arrastar e soltar que torna super fácil criar qualquer tipo de formulário, incluindo um formulário de envio de imagens.

Usamos o plugin para criar formulários de contato e pesquisas anuais para nosso site, e adoramos como ele nos permite visualizar as entradas do formulário diretamente no painel do WordPress.

Para saber mais, veja nossa revisão do WPForms.

Primeiro, você precisará instalar e ativar o plugin WPForms. Para detalhes, veja nossas instruções sobre como instalar um plugin WordPress.

Após a ativação, vá para a tela WPForms » Adicionar Novo no painel do WordPress para iniciar o construtor de formulários.

A partir daqui, você precisa digitar um nome para o seu formulário e, em seguida, clicar no botão ‘Usar Modelo’ sob o modelo ‘Formulário de Contato Simples’.

Selecione o modelo de formulário de contato

Isso carregará o modelo no construtor de formulários, onde você notará sua prévia à direita e os campos disponíveis na coluna da esquerda.

A partir daqui, arraste e solte o campo ‘Upload de Arquivo’ no formulário e clique nele para personalizar ainda mais suas configurações.

Adicionar campo de upload de arquivo

Você pode alterar o rótulo e a descrição do campo e até especificar as extensões permitidas.

Por exemplo, se você quiser permitir apenas arquivos JPEG e PNG, deverá digitar essas opções no campo ‘Extensões de Arquivo Permitidas’. Lembre-se de que você precisa separar cada extensão com uma vírgula.

Depois disso, você também pode configurar o tamanho máximo do arquivo de imagem e o número de uploads na coluna da esquerda.

Configurar as configurações do campo

Para instruções mais detalhadas, você pode consultar nosso tutorial sobre como permitir que usuários façam upload de imagens no WordPress.

Quando terminar, basta clicar no botão ‘Salvar’ para armazenar suas configurações.

Em seguida, abra a página/post onde você deseja adicionar o formulário de upload de imagem. Uma vez lá, clique no botão ‘+’ no canto superior esquerdo da tela para abrir o menu de blocos.

A partir daqui, você precisa adicionar o bloco WPForms à página/post.

Localize e adicione o bloco WPForms

Basta escolher o formulário de upload de arquivo de imagem que você criou no menu suspenso.

Finalmente, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações. Agora, você pode visitar seu site WordPress para ver o formulário em ação, e os visitantes poderão enviar suas imagens usando o formulário.

Perguntas Frequentes sobre Adicionar Imagens no WordPress

Nossa equipe de especialistas frequentemente recebe perguntas sobre a melhor maneira de lidar com imagens. Abaixo estão as respostas para algumas das mais comuns que ouvimos.

1. Qual é o melhor formato de arquivo de imagem para WordPress?

O melhor formato depende da imagem. JPEGs são ótimos para fotografias com muitas cores, pois equilibram bem a qualidade e o tamanho do arquivo. PNGs são perfeitos para gráficos que precisam de um fundo transparente, como logotipos. WebP é um formato mais novo que oferece excelente compressão, mas pode não ser suportado por navegadores muito antigos. Como regra simples: use JPEG para fotos e use PNG para logotipos ou imagens que precisam de transparência.

2. Como posso fazer minhas imagens carregarem mais rápido no meu site?

As duas etapas mais importantes são redimensionar e comprimir suas imagens. Sempre redimensione as imagens para as dimensões corretas usando uma ferramenta de edição antes de fazer o upload.

Depois disso, use um plugin dedicado de compressão de imagem, que reduzirá automaticamente o tamanho do arquivo ainda mais, sem uma queda perceptível na qualidade, fazendo com que suas páginas carreguem muito mais rápido.

3. Qual é a diferença entre texto alternativo de imagem e uma legenda?

Texto alternativo (alt text) é um atributo HTML que descreve a imagem para mecanismos de busca e para leitores de tela usados por visitantes com deficiência visual. Ele não é visível na página em si. Uma legenda é uma descrição que aparece diretamente abaixo da imagem para que todos os visitantes a vejam.

4. Posso fazer upload de várias imagens para o WordPress ao mesmo tempo?

Sim. Na Biblioteca de Mídia do WordPress, você pode simplesmente arrastar e soltar vários arquivos de imagem do seu computador de uma vez. Você também pode clicar no botão ‘Selecionar Arquivos’ e selecionar várias imagens para fazer upload juntas, o que economiza muito tempo.

5. Como crio uma galeria de imagens no WordPress?

O WordPress possui um bloco de Galeria integrado. Basta adicionar o bloco à sua postagem ou página, e você poderá então carregar novas imagens ou selecionar as existentes em sua Biblioteca de Mídia.

Isso criará uma galeria bonita e organizada, e você pode personalizar o número de colunas diretamente nas opções do bloco.

Esperamos que este artigo tenha ajudado você a aprender como adicionar imagens corretamente no WordPress. Você também pode querer ver nosso guia para iniciantes sobre como encontrar belas imagens de fundo para o seu site WordPress e nossa lista de ótimas fontes de imagens de domínio público e licenciadas CC0.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

12 CommentsLeave a Reply

  1. Ótimo artigo, só sinto falta, mesmo que em menção, de como converter as imagens para um tamanho mais otimizado antes de fazer o upload. Além disso, qual é a faixa de tamanho abaixo da qual não prejudica a velocidade de carregamento.

  2. Eu uso o WordPress há um tempo, mas nunca soube da importância de usar nomes de arquivo descritivos para imagens. Esta é uma ótima dica e garantirei que a implementarei a partir de agora. Uma pergunta rápida, por favor… Qual é a diferença entre as opções de alinhamento de imagem (esquerda, direita, centro) e quão responsivas elas são em dispositivos móveis?

    • Em um dispositivo móvel pequeno, como um telefone, o alinhamento provavelmente não fará diferença para a maioria dos temas e imagens.

  3. Estes guias fizeram falta para mim no início, quando comecei meu blog e não entendia completamente SEO. Por exemplo, um grande erro que cometi logo no começo ao fazer upload de imagens foi ignorar completamente a necessidade de tags ALT. Elas não eram importantes para mim. No entanto, assim que comecei a abordar SEO, me vi em uma situação em que tive que voltar e adicionar tags ALT a cerca de 500 imagens retrospectivamente. Portanto, especialmente para iniciantes, estes guias podem ser absolutamente cruciais para evitar ter que corrigir erros como os meus e revisitar conteúdo previamente carregado porque algo essencial está faltando, como foi o caso das tags ALT na minha situação.

    • Embora desejássemos ter isso quando você estava começando, esperamos que seja um bom lembrete para o futuro que você pode usar.

      Admin

    • Uau, 500 imagens! Bom para você por voltar e adicionar tags alt. Pode ser uma chatice, mas definitivamente vale a pena para SEO e acessibilidade. Esses guias parecem um ótimo recurso para ajudar novos blogueiros a evitar esse trabalho extra.

  4. Com cada post você prova que até as coisas possivelmente mais fáceis podem ser feitas melhor. Eu adicionaria para lembrar sobre o formato de arquivo correto jpeg/png ou apenas ficar com wbep para reduzir o tamanho do arquivo, para tornar nosso site ainda mais rápido.

  5. Inserir imagens da maneira certa com todas as configurações necessárias é importante não apenas para os motores de busca, mas também para a otimização do site. Frequentemente usamos imagens sem levar em consideração esses detalhes, o que é, de fato, muito importante.
    Eu já enfrentei problemas devido a esse tipo de upload de imagem e tive que reenviá-las após considerar essas configurações. Ótimos posts detalhados.

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.