- 1. O melhor guia para gerenciamento de imagens do WordPress
- 2. Atualmente lendo: 3 dicas de gerenciamento de imagens menos conhecidas no WordPress
- 3. Erros de SEO de imagem do WordPress e como corrigi-los
Bem-vindo ao segundo post do Ultimate Guide to Image Management in WordPress . O primeiro post foi sobre começar com o pé direito. Aprendemos quando usar um formato de imagem JPG ou PNG (embora com exemplos rigorosos) e algumas dicas sobre como carregar corretamente uma imagem de estoque.
No post de hoje, veremos alguns dos aspectos mais técnicos da manutenção e gerenciamento de imagens em seu site WordPress.
- O que acontece com suas imagens quando você altera a URL do site ou move servidores?
- E se você tiver vários autores em seu site e alguns deles vincularem a imagens externas? Como você consegue que essas imagens sejam hospedadas em seu servidor?
- O que acontece quando alguém faz hotlinks para suas imagens? Aliás , o que é hotlinking?
Essas são algumas das perguntas que responderemos no post de hoje. Como sempre em nossa série de posts, começamos com o porquê e depois passamos para o como. Vamos começar!.
Dica nº 1: gerenciamento de imagens com atualizações de URL do site
Este é um dos erros mais comuns que vemos com os usuários do WordPress.
Quando a URL do site WordPress muda?
Mas primeiro, devemos entender quando a URL de um site provavelmente mudará. A seguir estão os três cenários mais comuns.
1. Mudando para um novo nome de domínio
A URL do site é atualizada quando você altera o nome de domínio. Por exemplo, a Moz era anteriormente conhecida como SEOMoz. Com sua nova marca, eles tiveram que atualizar todos os URLs existentes de imagens, PDFs, links de afiliados, etc. de seomoz.com para moz.com
2. Mudando o diretório de instalação do WordPress
A URL do site também muda quando você altera o local da instalação do WordPress. Na verdade, este é um dos casos mais comuns por aí.
O WordPress se instala em um novo diretório padrão chamado blog . Muitos usuários iniciantes do WordPress, sem saber, acabam instalando o WordPress em example.com/blog.
Só para depois perceber que eles querem mover o WordPress para o domínio raiz, ou seja, example.com . (Se você é uma empresa de produtos ou serviços, que incluiu um marketing de conteúdo nos estágios posteriores, você se identificaria.)
Depois que o WordPress é movido para o diretório raiz, a URL do site muda de example.com/blog para apenas example.com. Qualquer imagem, PDF (ou qualquer arquivo de mídia) ficaria assim:
- ANTIGO: example.com/blog/ebook.pdf
- NOVO: example.com/ebook.pdf
3. Alternando entre servidores de teste e produção (ao vivo)
Isso é predominante em blogs de alto tráfego ou sites de comércio eletrônico, onde qualquer erro resulta em uma queda nas conversões. A migração de e para um servidor de teste pode ser muito simples se você estiver usando um host gerenciado, como WPEngine ou Flywheel. (A propósito, nós do WPExplorer temos usado o WPEngine por três anos consecutivos e nunca enfrentamos um tempo de inatividade!)
O problema ocorre quando alguém carrega uma imagem ou links para algum post usando o URL do servidor de teste. Quando você transfere seu site de volta para o servidor ativo, os links dos de teste são usados para as imagens que foram carregadas no ambiente do servidor de teste. Portanto, isso deve ser evitado idealmente. Se você acha que alguém de sua equipe pode ter carregado conteúdo no ambiente de teste, você pode aplicar a correção que estamos prestes a compartilhar abaixo.
Em uma nota semelhante, alguns de vocês podem questionar – Bem, qual é o mal em usar links do servidor de teste? Não economizará largura de banda do site atual/ao vivo?
Você não está errado em pensar assim. No entanto, na realidade, isso raramente acontece. Aqui está o porquê:
- Um servidor de teste geralmente é executado em recursos inferiores. Você estaria comprometendo a velocidade do site, o que afetaria negativamente a experiência do usuário.
- Em muitos casos, o link raiz do servidor de teste/teste continua mudando – o que pode levar a uma tonelada de links quebrados. Imagine um tutorial de 3.000 palavras com capturas de tela quebradas em todo o lugar. Como poderia isso te fazer sentir?
- Isso também afetaria negativamente o SEO da sua imagem. Lembre-se, a pesquisa de imagens no Google ainda é uma fonte de tráfego orgânico. Se a imagem não pertencer ao seu domínio – você estaria perdendo tráfego orgânico gratuito e pontos de SEO!
O que estamos tentando resolver?
Agora que sabemos quando a URL de um site WordPress é alterada, vamos ver um exemplo onde há espaço potencial para erros. Links que foram gerados automaticamente (como links de afiliados) não enfrentam problemas. No entanto, os links que foram colados manualmente em posts e páginas (como links internos, links de imagens, etc.) devem ser atualizados manualmente.
Todos nós usamos imagens em nossos posts e páginas. Um exemplo típico de um link de imagem é:
http://mywpsite.tld/wp-content/uploads/year/month/image-name.png
Quando a URL do seu site WordPress muda, os links de origem de todas as imagens também devem mudar para:
http://newwordpressdomain.tld/wp-content/year/month/image-name.png
Não apenas imagens, todos os links (incluindo links entre postagens, arquivos de mídia, PDFs etc.) devem ser atualizados.
Ok, parece que discutimos a questão em profundidade. Agora vamos ver como corrigir o problema de uma vez por todas. Como sempre, temos um plugin WordPress para resgatar!
URLs de atualização do Velvet Blues
- Primeiro, baixe e instale os URLs de atualização do Velvet Blues
- Após a ativação, vá para a página Ferramentas do Painel do WordPress > Atualizar URLs para definir as configurações do plug-in.
Substituição de URL no WordPress – Cortesia do plugin Velvet Blues Update URLs
Lembra como usamos o recurso Localizar e Substituir do Microsoft Word? Bem, isso é essencialmente o que o plugin faz! Ele encontra os URLs antigos na página ou no conteúdo do post e os substitui pelos novos URLs. Dessa forma, os links das imagens são atualizados em todas as suas postagens.
Além disso, você pode estender a funcionalidade do plugin para localizar/substituir URLs em links de sites, trechos, anexos, campos personalizados e meta boxes.
Veja a seguir alguns exemplos de URLs antigos em seu site:
- Se você estivesse migrando de um servidor de teste, a URL antiga seria algo como: hostname.com
- Se você estava alterando/atualizando o nome de domínio, basta usar o novo nome do site.
- Se você usou ‘https’ como protocolo, substitua ‘http’ por ‘https’.
Em nosso exemplo, substituímos a URL antiga de http://seomoz.com para https://moz.com . Depois de inserir o URL antigo e o novo, basta clicar em Atualizar URLs AGORA . O plug-in verificará todas as suas postagens e páginas e aplicará sua mágica de localizar e substituir. Todos os seus URLs serão atualizados para o valor Novo URL
Palavra de cautela: digitalizar e substituir várias postagens e páginas pode consumir muitos recursos, especialmente se o seu blog WordPress tiver centenas de postagens. Se você selecionou todas as opções de verificação (links de sites, trechos, etc.), o uso de recursos aumentaria significativamente. Para muitas atualizações de URL em todo o site, sua conta de hospedagem pode ser temporariamente suspensa devido ao uso excessivo de recursos. Esse problema seria mais prevalente em provedores de hospedagem compartilhada. Portanto, eu recomendaria um pouco de cuidado ao executar o plugin.
Dica #2: Importando Imagens Externas no WordPress
Imagens externas são aquelas que não estão hospedadas em seu servidor. Neste tutorial, aprenderemos como importar de forma rápida e eficiente todas as imagens externas para o seu próprio site WordPress.
Para maior clareza, vamos supor que estamos usando as imagens com as devidas licenças (caso contrário, podemos acabar em um debate completamente diferente!).
Para recapitular rapidamente, aqui estão duas razões pelas quais não devemos usar imagens externas em nosso site WordPress:
- Eles consomem a largura de banda de outras pessoas, o que não é muito justo.
- O ferir nossas pontuações de SEO de imagem.
Vamos dar uma olhada no post a seguir. É muito difícil entender se o post está ou não usando uma imagem externa usando o Editor Visual.
Editor Visual WordPress
A menos, é claro, que passemos para a visualização Texto do editor WordPress.
Visualização de texto do Editor do WordPress, revelando o código-fonte HTML do conteúdo do post.
Vemos que essa imagem está realmente hospedada no imgur.com – um site popular de hospedagem de imagens. Para corrigir isso, precisamos:
- Baixe a imagem
- Faça o upload para o WordPress
- Atualize o link no post
Você pode imaginar repetir todas essas etapas para cada imagem em todas as postagens? Apenas encontrar todas as imagens externas levaria dias! Então deve haver uma solução, certo? Ou estou trazendo isso apenas para decepcioná-lo?
Claro que não! Existe uma solução. E, como sempre, é um incrível plugin WordPress gratuito.
Como importar imagens externas no WordPress
Uma das primeiras coisas que eu gosto sobre este plugin é o seu próprio nome. É claro, nítido e direto ao ponto. Para começar, baixe e instale o plugin Import External Images . Ative o plugin e vá para WordPress Dashboard > Media > Import Images
Você deve ver um painel de opções como este:
Importar opções de plug-in do WordPress de imagens externas
Se você notar no canto inferior direito, verá que o plugin já identificou os posts contendo imagens externas.
Em nosso exemplo, rodamos este plugin em um ambiente de teste, e é por isso que temos apenas um post, com uma imagem externa.
Tudo o que você precisa fazer agora é clicar em Importar imagens agora para iniciar o processo. Ao concluir, você deverá ver uma mensagem de confirmação semelhante do total de imagens importadas.
Opcionalmente, você também pode optar por excluir imagens com base no nome de domínio. Isso é útil se você tiver links de download de imagens especiais (de sites de hospedagem de imagens externas pagos, como o Photobucket) que não deseja substituir.
Após a conclusão da importação da imagem, se verificarmos a galeria de mídia, veremos todas as imagens importadas.
As imagens são automaticamente importadas e armazenadas na Biblioteca de Mídia do WordPress.
Ok, então as imagens são importadas para o WordPress Media Gallery. E o conteúdo da postagem? Eles ainda apontam para o URL da imagem antiga? Absolutamente não!
O plugin também substitui o link do arquivo de imagem pelo novo URL, ou seja, o link do seu domínio!
Após a importação, os links das imagens também são atualizados.
Impacto no desempenho: semelhante aos problemas de consumo de recursos que discutimos no plug-in de atualização de URL, a importação de imagens externas no WordPress também consome uma parte justa dos recursos do servidor. Felizmente, o desenvolvedor adotou medidas para controlar o uso do servidor. O plug-in verifica um máximo de 50 postagens por chamada (ou seja, quando você visita ou atualiza a página de configurações do plug-in). Também limita o número máximo de imagens a 20 por chamada de importação.
Dica nº 3: Como evitar o hotlinking de imagens no WordPress
Simplificando, hotlinking significa vagar pela cidade na reserva Uber de outra pessoa. Pense nisso. Você reserva um Uber para o seu trajeto e um estranho de alguma forma consegue roubar sua reserva e usá-la à vontade. Você paga por seus passeios. Agora imagine se alguém pudesse pegar sua reserva Uber – use-a como quiser – por quanto tempo quiser – e você não pode fazer nada a respeito.
Bem, o hotlinking de imagens é um pouco semelhante. As pessoas pegam suas imagens e as usam em seus sites. Eles ganham fama e você acaba pagando as contas deles. E não há nada que você possa fazer sobre isso.
Aguentar! A última linha não é verdadeira. Você pode fazer algo sobre isso. Afinal, é WordPress! Você provavelmente está pensando “Ah Sourav vai apresentar outro plugin”. Bazzinga! Eu não estou.
1. Configure seu servidor Web para prevenção de hotlink (Apache ou NGINX)
Seu servidor web é suficiente para evitar que outras pessoas acessem suas imagens. Os dois servidores web mais comuns são Apache e NIGNX. Se você estiver usando o Apache como seu servidor da Web, poderá impedir o hotlinking de imagens no WordPress adicionando algumas linhas de código em seu arquivo .htaccess . Em 2013, escrevi um pequeno tutorial sobre isso – ainda é aplicável hoje.
No entanto, se você estiver usando o NGINX como seu servidor wes, adicione o seguinte trecho de código ao arquivo de configuração do NGINX.
location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked .yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}
Substitua yourwebsite.com pelo seu nome de domínio real.
Em poucas palavras, este trecho de código impede que arquivos GIF, PNG e JPG/JPEG sejam vinculados. Esses arquivos só poderão ser acessados pelo seu domínio e por mais ninguém. Caso alguém tente fazer um hotlink para esses 3 formatos de arquivo, receberá um erro 403.
Aqui está uma rápida explicação linha por linha do código recortado.
- A linha 1 define os formatos de imagem. Você também pode adicionar formatos de vídeo como mp4 aqui.
- A linha 2 informa ao NGINX que as solicitações do seu domínio devem ser permitidas. Se algum outro domínio solicitar, bloqueie a solicitação.
- A linha 3 informa ao NGINX o que fazer se uma solicitação for de um domínio não permitido
- A linha 4 diz ao NGINX para lançar um erro HTTP 403 Forbidden, se a condição na linha #3 for atendida.
- As linhas 5 e 6 fecham o código corretamente para que ele seja executado!
Da mesma forma, se você quiser impedir que um diretório inteiro seja vinculado, há um trecho de código para isso também.
location /uploads/ {
valid_referers none blocked .yourwebsite.com;
if ($invalid_referer) {
return 403;
}
}
Substitua /uploads/ pelo diretório que você deseja evitar que seja vinculado. Em nosso exemplo, escolhemos o diretório de uploads padrão do WordPress . Se você for como a maioria de nós, você faria o upload de todas as suas imagens, PDFs e outros arquivos de mídia usando o carregador padrão do WordPress, que por sua vez colocaria os arquivos dentro da pasta /uploads/. Assim, protegendo a pasta master, estamos impedindo que todos e quaisquer uploads sejam vinculados.
2. Use um CDN para impedir o hotlinking de imagens no WordPress
Surpreso? Assim como eu quando li sobre isso pela primeira vez. Todos nós já ouvimos falar do CloudFlare como um dos melhores CDNs gratuitos do mercado. Você sabia que eles também oferecem proteção gratuita para hotlinks?
Para ativar a proteção de hotlink, basta acessar o painel da sua conta CloudFlare, seguido pelo Scrape Shield. Alterne o botão para ON e pronto.
Se você estiver usando o Cloudflare, poderá ativar facilmente a proteção de hotlink no Scrape Shield em sua conta. Como o Cloudflare é um serviço totalmente proxy, você não precisa se preocupar em habilitar a proteção de hotlink em seu servidor de origem.
Se você estiver usando um serviço CDN premium, como StackPath CDN ou KeyCDN, tudo o que você precisa fazer é criar regras apropriadas para referenciadores de zona e aplicá-las. O KeyCDN tem um tutorial maravilhoso sobre isso, vale a pena dar uma lida.
3. Use um plug-in: plug-in de segurança e firewall tudo em um WP
Se você preferir não se misturar com o código .htaccess e desejar que haja um plugin disponível que possa cuidar dos negócios – bem, você está com sorte.
Confira o plugin All In One WP Security & Firewall . Com mais de meio milhão de instalações ativas, este plugin possui vários recursos essenciais de segurança do WordPress.
Aqui está o que você precisa fazer para ativar o recurso Image Hotlinking Prevention.
Como impedir o hotlinking de imagens no WordPress usando o plug-in de segurança All in One WordPress
- Baixe e instale o plug -in .
- Ative-o e vá para WordPress Dashboard > WP Security > Firewall e clique em Prevent Hotlinks
- Marque a pequena caixa de seleção na parte inferior e clique em Salvar configurações.
E é isso. O hotlinking de imagens está impedido a partir de agora.
Conclusão
Para encerrar este post, vamos passar rapidamente pelo que aprendemos até agora.
- Como atualizar, substitua os URLs antigos pelos novos. A solução é um plugin bacana chamado URLs de atualização do Velvet Blues .
- Em seguida, aprendemos como importar imagens externas para o WordPress. Muitos colegas blogueiros fizeram isso pelo menos uma vez na vida! Novamente, a solução estava em um plugin chamado Import External Images .
- Ambos os plugins mencionados nos dois cenários acima têm um impacto no desempenho associado a eles. Precisaríamos executar esses plugins com cautela.
- Por fim, analisamos o que é o hotlinking de imagem e vimos duas maneiras de evitá-lo. Uma foi adicionando algumas linhas de código ao plugin .htaccess e a segunda foi usando um plugin de segurança .
Pergunta – o que você acha dessas dicas? Encontrou algo útil? Tem algo melhor para oferecer? Além disso, como você gosta da série até agora? Deixe-nos saber nos comentários abaixo e fique ligado para a próxima parte da série.
