Como adicionar imagens corretamente no WordPress (passo a passo)

Publicados: 2023-08-03

Você está procurando a maneira certa de adicionar imagens ao seu site ou blog WordPress?

Ao adicionar imagens no WordPress corretamente, você pode melhorar o apelo visual, a acessibilidade e o SEO do seu site. Você pode até permitir que os usuários carreguem suas próprias imagens e as usem em seu site ou em suas competições.

Neste artigo, mostraremos como adicionar imagens corretamente no WordPress.

Add images in WordPress properly

A importância de enviar imagens corretamente no WordPress

Às vezes, os usuários copiam diretamente uma imagem 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.

Quando você adiciona imagens ao seu site WordPress, é importante fazê-lo corretamente. Isso significa usar o formato de arquivo correto, nome de arquivo e texto alternativo.

Recomendamos nomear suas imagens com palavras descritivas separadas por hífens. Por exemplo, você pode usar o nome de arquivo 'bali-vacation-photo.jpg' para uma imagem em seu blog de viagens.

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

Ao usar esses formatos, juntamente com um plug-in de compactação de imagem para as imagens em seu blog WordPress, você pode melhorar a experiência do usuário em seu site.

Da mesma forma, usando o bloco Image no WordPress e otimizando adequadamente suas imagens para SEO e texto alternativo, você pode facilitar a indexação de suas imagens pelos mecanismos de pesquisa.

Isso pode aumentar as classificações do seu site e melhorar a acessibilidade do seu site para pessoas com deficiência.

Dito isso, vamos ver como adicionar imagens corretamente no WordPress. Abordaremos 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)
  • Como adicionar imagens no editor clássico
  • Como adicionar imagens na biblioteca de mídia
  • Como otimizar uma imagem para WordPress SEO
  • Bônus: permitir que os usuários façam upload de imagens no WordPress

Como adicionar imagens no editor de blocos (Gutenberg)

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

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

Quando estiver lá, clique no botão '+' no canto superior esquerdo da tela para abrir o menu do bloco. A partir daqui, você deve encontrar e adicionar o bloco de imagem ao post ou página.

Add image block to the post

Depois de fazer isso, clique no botão 'Biblioteca de mídia' para iniciar o prompt 'Selecionar ou carregar mídia' na tela.

A partir daqui, você pode alternar para a guia 'Carregar arquivos' se quiser carregar uma imagem do seu computador.

No entanto, se você deseja adicionar uma imagem da biblioteca de mídia, também pode fazer isso alternando para a guia 'Biblioteca de mídia'.

Select image from the media library

Ao adicionar uma imagem, você precisará adicionar um texto alternativo para ela na coluna da esquerda. Esse texto alternativo é crucial para SEO de imagens, pois ajuda os mecanismos de pesquisa a entender o contexto da imagem. Ele também permite que pessoas com leitores de tela vejam essas informações sobre suas imagens.

Você também pode adicionar um título e legenda descrevendo a imagem na coluna da direita. As legendas são as descrições de texto visíveis de suas imagens, enquanto o título aparecerá quando um usuário passar o mouse sobre a imagem.

Para obter detalhes, consulte 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.

Fill in image details

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

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

Images settings in the block panel

Por fim, clique no botão 'Atualizar' ou 'Publicar' para armazenar suas configurações.

Agora você adicionou corretamente uma imagem no editor do Gutenberg.

Como adicionar imagens no editor clássico

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

Primeiro, você precisa visitar a página ou postagem onde deseja adicionar a imagem do painel do WordPress. Quando estiver lá, basta clicar no botão 'Adicionar mídia' para iniciar a biblioteca de mídia.

Click the add media button

Depois disso, você pode alternar para a guia 'Carregar arquivos' para carregar uma imagem do seu computador.

Como alternativa, para adicionar uma imagem da biblioteca de mídia, basta alternar para a guia 'Biblioteca de mídia'.

Upload image file in the classic editor

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

Você pode simplesmente descrever a imagem para todas essas opções. Isso ajudará o mecanismo de pesquisa a indexar sua imagem e aumentar a visibilidade do seu site.

Em seguida, vá em frente e clique no botão 'Inserir na postagem'.

Configure attachment details in classic editor

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ê também pode editar uma imagem clicando no ícone de lápis.

Click the Pencil icon to edit an image

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

Quando terminar, basta clicar no botão 'Atualizar' para salvar as alterações feitas.

Edit image in the classic editor

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

Como adicionar imagens na biblioteca de mídia

Se desejar, você também pode adicionar uma imagem diretamente à biblioteca de mídia. Lembre-se de que, após adicionar uma imagem à biblioteca de mídia, você ainda precisará abrir uma postagem ou página e inserir o bloco Imagem.

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

Quando estiver lá, clique no botão 'Selecionar arquivos' para carregar uma imagem do seu computador. Em seguida, clique no link 'Editar' ao lado da imagem.

Add Image in the media library and click the Edit link

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

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

Click the Edit Image button

Isso o direcionará para outra página, onde você pode cortar, dimensionar, girar ou inverter a imagem de acordo com sua preferência. Para obter 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.

basic editing features in WordPress

Isso o levará de volta à página 'Editar mídia', onde você deverá 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 deseja adicionar esta imagem na barra lateral do administrador do WordPress. Quando estiver lá, clique no botão '+' para adicionar um bloco de imagem à postagem.

Em seguida, você precisa selecionar o botão 'Biblioteca de mídia'.

Image block

Isso iniciará o prompt 'Selecionar ou carregar mídia' na tela, onde você notará a imagem que carregou na biblioteca de mídia na parte superior.

Ao selecionar a imagem, você verá que seu título, texto alternativo, legenda e descrição já foram adicionados a ela na página da biblioteca de mídia.

Agora, basta clicar no botão 'Selecionar' para carregar a imagem no editor de blocos.

Add image from the media library

Por fim, clique no botão 'Publicar' ou 'Atualizar' para armazenar suas configurações.

Como otimizar uma imagem para WordPress SEO

Depois de adicionar uma imagem a um post/página, também é crucial otimizá-la para os mecanismos de pesquisa. Infelizmente, o WordPress não oferece nenhum recurso de SEO avançado integrado para imagens.

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

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

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

Nota: AIOSEO também possui uma versão gratuita. No entanto, você precisará da versão pro do plug-in para desbloquear o recurso Image SEO.

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

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

AIOSEO setup wizard

Em seguida, vá para a página All in One SEO »Search Appearance na barra lateral do administrador do WordPress e mude para a guia 'Image SEO'.

Depois disso, role para baixo e clique no botão 'Ativar SEO de imagem' para desbloquear o recurso.

Activating the Image SEO Module in AIOSEO

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

Configurar títulos de imagem automáticos

Depois de mudar para a guia 'Título' na página SEO de imagem, você pode começar criando um formato de título para suas imagens usando tags inteligentes.

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

Por exemplo, se você deseja que cada atributo de título de imagem use o título da imagem e o título do site, pode adicionar essas marcas inteligentes no campo 'Formato do título'.

Add smart tags to configure title SEO

Depois disso, você também pode habilitar a opção Strip Pontuation 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 traços ao salvar um arquivo de imagem como 'uma imagem de exemplo', poderá escolher a opção 'Traços (-)' na seção 'Caracteres para converter em espaços'.

Depois de fazer isso, o AIOSEO removerá automaticamente esses traços e os transformará em espaços, tornando o título da imagem 'uma imagem de exemplo'.

Configure strip punctuation and casing options

Depois disso, role para baixo até a seção 'Casing'.

A partir daqui, você pode escolher uma opção de caixa para o seu título. Recomendamos escolher maiúsculas e minúsculas para frases ou títulos para tornar seus títulos mais legíveis.

Configurar Alt Tags Automáticas

Depois de definir as configurações do título, mude para a guia 'Alt Tag' na parte superior.

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

Depois disso, você também pode habilitar a configuração Strip Pontuation se quiser que caracteres como hífens (-) ou sublinhados (_) sejam convertidos em espaços.

SEO settings for alt tags

Da mesma forma, se houver caracteres como números ou sinais de adição (+) que você não deseja que o AIOSEO remova ao criar o texto alternativo, marque as caixas dessas opções na seção 'Caracteres a serem excluídos da remoção'.

Você também pode selecionar uma caixa para o seu texto alternativo.

Configurar legendas e descrições automáticas

Para gerar legendas automáticas para suas imagens, vá para a guia 'Legendas'.

A partir daqui, certifique-se de que a opção 'Autogenerate Caption on Upload' esteja habilitada. Você pode então selecionar as marcas inteligentes que serão usadas para gerar legendas para suas imagens.

Enable Captions toggle and configure its smart tags

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

Quando terminar, você precisa mudar para a guia 'Descrição' na parte superior.

A partir daqui, certifique-se de que a opção 'Autogenerate Description on Upload' esteja habilitada. Você também deve selecionar as marcas inteligentes que deseja usar para gerar descrições de imagem automáticas.

Enable the Description toggle and configure its smart tags

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

Depois disso, basta selecionar uma caixa para as descrições de sua imagem.

Strip punctuation and casing settings

Configurar nomes de arquivos automáticos

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

Depois de alternar para a guia 'Nome do arquivo' na parte superior, você notará que o AIOSEO já configurou a configuração Strip Pontuation para você.

No entanto, se houver mais caracteres que você deseja que o AIOSEO exclua de seus nomes de arquivo de imagem ao criar títulos ou texto alternativo, você pode digitar esses caracteres na caixa 'Palavras para remover'.

AIOSEO settings for Filename

Depois disso, você também pode selecionar uma caixa 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.

Agora 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 obter instruções mais detalhadas, consulte nosso guia para iniciantes sobre como otimizar imagens para mecanismos de pesquisa.

Bônus: permitir que os usuários façam upload de imagens no WordPress

Você também pode permitir que seus usuários carreguem suas próprias imagens em seu site WordPress. Isso pode ser útil se você estiver hospedando um concurso ou executando um site de fotografia que aceita imagens geradas pelo usuário.

Para isso, você pode utilizar 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 que você desejar, incluindo um formulário de envio de imagem.

Primeiro, você precisará instalar e ativar o plugin WPForms. Para obter detalhes, consulte nossas instruções sobre como instalar um plug-in do WordPress.

Após a ativação, vá para WPForms »Adicionar nova tela 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 clicar no botão 'Usar trecho' no modelo 'Formulário de contato simples'.

Select contact form template

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

A partir daqui, vá em frente e arraste e solte o campo Upload de arquivo no formulário e clique nele para personalizar ainda mais suas configurações.

Add file upload field

A partir daqui, você pode alterar o rótulo e a descrição do campo e até especificar as extensões permitidas.

Por exemplo, se você deseja permitir apenas arquivos JPEG e PNG, digite essas opções no campo 'Extensões de arquivo permitidas'. Lembre-se de 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.

Configure field settings

Para obter instruções mais detalhadas, você pode querer ver nosso tutorial sobre como permitir que os 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/postagem onde 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 do bloco

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

Locate and add the WPForms block

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

Por fim, clique no botão 'Atualizar' ou 'Publicar' para armazenar 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.

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 alterar a altura e a largura do bloco no WordPress e nossas escolhas de especialistas para os melhores temas do WordPress para designers gráficos.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.