Você pode considerar usar um Sitemap de imagem

Dependendo do site, os sitemaps de imagens podem ser uma ferramenta útil em uma estratégia de SEO, tornando muito claro para os mecanismos de pesquisa as imagens que eles podem e devem indexar. Vamos explorar a configuração de um.

Apesar de não serem estritamente necessários para todos os sites, os sitemaps ainda são uma peça importante de um jogo de SEO sólido, permitindo que os mecanismos de pesquisa rastreiem e indexem o conteúdo do seu site.de forma mais rápida e completa (especialmente se o seu site for grande, novo ou com poucos links).

Mas eles não são úteis apenas para conteúdo de texto. Os sitemaps de imagens têm um propósito semelhante, voltados especificamente para imagens (obvi). Muito provavelmente você acessou conteúdo que pode ser descoberto por meio de um deles. Se você já usou o Imagens do Google, por exemplo, um mapa do site de imagem pode merecer algum crédito.

Quem precisa deles?

Os mecanismos de pesquisa podem rastrear imagens perfeitamente por meio de <img>tags em seu HTML (na verdade, a maioria dos sites que tenho lido não tem uma). Mas se as imagens são um tipo de conteúdo central no seu site, provavelmente é uma boa ideia configurar uma. Estou pensando em sites em categorias como estas:

• fotografia de família e retratos
• comércio eletrônico
• banco de imagens
• arte/ilustração

Mas, mesmo fora isso, você pode se beneficiar de um mapa do site de imagem se estiver renderizando imagens com JavaScript do lado do cliente ou aplicativo de página única. A desativação do HTML renderizado pelo servidor torna mais lento e mais difícil para o Google indexar esse conteúdo (embora supostamente o faça), portanto, é do seu interesse fornecê-lo explicitamente ao Google.

Como criar um mapa do site de imagem

A estrutura de um mapa do site de imagem é simples – uma lista de URLs de páginas com imagens aninhadas abaixo de cada uma. Gerar um requer que você saiba onde estão as imagens em seu conteúdo e, em seguida, cuspa algum XML. Veja como fica essa estrutura:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://ur-site.com/first</loc>
    <image:image>
      <image:loc>https://ur-site.com/img1.jpeg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://ur-site.com/img2.jpeg</image:loc>
    </image:image>
  </url>
  <url>
    <loc>https://ur-site.com/second</loc>
    <image:image>
      <image:loc>https://ur-site.com/img3.png</image:loc>
    </image:image>
  </url>
</urlset>

Sirva essa saída com um application/xml“Tipo de Conteúdo” e você terá um mapa do site de imagem válido, pronto para uso pelos mecanismos de pesquisa.

Fazendo isso programaticamente

Claro, se você estiver trabalhando com qualquer tipo de CMS e tiver conteúdo alterado regularmente, você desejará que isso seja automatizado. Algumas estruturas tornam isso mais fácil do que outras. Tenha em mente: todo o código que você está prestes a ver é para fins de demonstração fragmentados. Então, talvez não basta colocar isso em seu sistema. Ou revise o código.

Exemplo: WordPress

Com o WordPress, você pode gerar um mapa do site de imagem simples consultando todas as imagens anexadas a cada página e, em seguida, transmitindo XML para o cliente. Uma versão rudimentar não requer tanto código. Tudo o que o exemplo a seguir faz é percorrer cada postagem publicada, extrair todas <img>as tags (eu estava tendo problemas com get_attached_media()) e montar o mapa do site.

<?php

add_action('template_redirect', function () {
    if (explode('?', $_SERVER['REQUEST_URI'])[0] !== '/image-sitemap') {
        return;
    }

    $posts = get_posts([
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post_status' => 'publish',
    ]);

    $sitemapContent = "";

    foreach ($posts as $post) {
		$permalink = get_permalink($post->ID);
		$document = new DOMDocument();

		libxml_use_internal_errors(true);

		$document->loadHTML($post->post_content);
		$images = $document->getElementsByTagName('img');

		libxml_use_internal_errors(false);
		
		foreach ($images as $image) {
			$imageUrl = $image->getAttribute('src');
			$sitemapContent .= "<url>
                <loc>$permalink</loc>
                <image:image>
                    <image:loc>$imageUrl</image:loc>
                </image:image>
            </url>";
        }
    }

	header('Content-Type: application/xml; charset=utf-8');
	echo "<?xml version='1.0' encoding='UTF-8'?>
			<urlset
				xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'
				xmlns:image='http://www.google.com/schemas/sitemap-image/1.1'
			>$sitemapContent</urlset>";
	die();
});

Com isso em seu tema (ou embrulhado em plugin), um mapa do site de imagem funcionaria https://ur-site.com/image-sitemapsem qualquer outro trabalho administrativo. Apenas corra com isso.

Exemplo: Estatâmico

Se você estiver trabalhando com algo como Statamic, parece um pouco mais elegante. Consulte postagens publicadas, identifique as imagens e envie-as.

<?php

use Illuminate\Support\Facades\Route;
use Statamic\Facades\Entry;

Route::get('/image-sitemap', function () {
    $entries = Entry::query()
		->where('collection', 'posts')
		->where('published', true)
		->limit(5)
		->get();

	$sitemapContent = $entries->reduce(function ($carry, $entry) {
		$document = new DOMDocument();
		$document->loadHTML($entry->content);

		return $carry . collect($document->getElementsByTagName('img'))->reduce(function ($carry, $image) use ($entry) {
			$imageUrl = $image->getAttribute('src');

			return $carry . "<url>
                <loc>https://ur-site.com/posts/{$entry->slug}</loc>
                <image:image>
                    <image:loc>$imageUrl</image:loc>
                </image:image>
            </url>";
        }, '');
    }, '');

    return response("<urlset xmlns='http://www.sitemaps.org/schemas/sitemap/0.9'
        xmlns:image='http://www.google.com/schemas/sitemap-image/1.1'>
        $sitemapContent
    </urlset>")->header('Content-Type', 'application/xml');
});

A propósito, o maior motivo pelo qual estou incluindo esse exemplo é porque tenho me envolvido com o framework e realmente gostei dele.

Exemplo: Astro

A estrutura na qual construo meus próprios sites, Astro, também facilita bastante o uso de um endpoint personalizado. Crie um pages/image-sitemap.xml.jsarquivo e, a partir daí, é uma história semelhante:

import { getCollection } from "astro:content";

export async function GET(context) {
  const posts = await getCollection("blog");

  const sitemapContent = posts.reduce((acc, post) => {
    const images = posts
    	.map((post) => {
			const images = post.body.match(/!\[.*?\]\((.*?)\)/g);

			return images?.map((image) => image.match(/\((.*?)\)/)[1]) || [];
      })
		.flat()
		.map((image) => {
			// If the image is a relative path, prepend the site URL.
			if (image.startsWith("/")) {
				return image.replace("/", "https://ur-site.com/");
			}

			return image;
		});

    return `${acc}
		<url>
			<loc>https://ur-site.com/${post.slug}</loc>
			${images.reduce((acc, image) => {
				return `${acc}
				<image:image>
					<image:loc>${image}</image:loc>
				</image:image>
				`;
			}, "")}
		</url>`;
  }, "");

  return new Response(
	`<?xml version="1.0" encoding="UTF-8"?>
	<urlset
		xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
		xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
	>
		${sitemapContent}
	</urlset>`,
	{
		headers: {
			"Content-Type": "application/xml",
		},
	});
}

Claro, este exemplo pressupõe que suas postagens sejam escritas em Markdown. Se você estiver usando qualquer tipo de solução headless, provavelmente desejará usar uma solução de análise de HTML como a anterior (JSDOM fará o trabalho perfeitamente).

Ou, para facilitar ainda mais…

Se você não quiser gastar tempo e energia mental construindo você mesmo um mapa do site de imagem, há outra opção: deixe o PicPerf fazer isso por você. À medida que otimiza e armazena em cache as bananas de suas imagens, ele cria constantemente um mapa do site de imagens atualizado dinamicamente.

Se você seguir esse caminho, há duas etapas:

Primeiro, marque os URLs de sua imagem com um sitemap_pathparâmetro de consulta, com o valor trazendo o caminho da página atual:

<img alt="me" src="https://ur-site.com/my-image.jpg?sitemap_path=/about">

As integrações WordPress , Statamic e Astro também cuidarão disso para você.

Em segundo lugar, faça proxy desse sitemap por meio de seu próprio domínio (o Google não aceitará sitemaps que residam em domínios não verificados). Dependendo de como o seu site é construído, existem várias abordagens que não são complicadas. E, eventualmente, as integrações configurarão tudo em seu site automaticamente.

Conectando seu Sitemap

Depois que esse endpoint estiver ativo, você terá duas tarefas restantes:

Primeiro, você precisará referenciá-lo em seu robots.txtarquivo. É um conteúdo muito simples e ainda suporta apontar para vários mapas de sites:

User-agent: *
Allow: /

Sitemap: https://ur-site.com./page-sitemap.xml
Sitemap: https://ur-site.com./image-sitemap.xml

Você poderia seguir o caminho de usar uma <link rel="sitemap">tag em seu HTML, mas usar o robots.txtarquivo é a convenção mais amplamente usada e provavelmente a aposta mais segura se você deseja compatibilidade máxima com rastreadores da web (isto é, provavelmente não faria mal usar ambos abordagens).

Por fim, adicione-o ao Google Search Console. Fornecer o URL do sitemap diretamente ao Google é útil para detectar erros de validação e fornece algumas dicas sobre o desempenho de indexação dos sitemaps enviados.

Mesmo que seja acessível aos rastreadores por meio do seu robots.txtarquivo, enviá-lo diretamente ao Google também deve ajudar a agilizar sua indexação, dando aquela “dica” extra para acessar o máximo possível do conteúdo do seu site.

Vire cada pedra

O Google e outros mecanismos são realmente bons em encontrar, rastrear e indexar conteúdo. Mesmo que você tenha um site centrado em imagens e desconsidere totalmente tudo o que vê aqui, você tem poucos motivos para perder o sono.

Mas permitir que os mecanismos rastreiem qualquer conteúdo não é realmente o objetivo final de um mapa do site. Trata-se de fornecer aos mecanismos um pouco mais de clareza intencional sobre o que está disponível e deve ser rastreado. Permite que você não deixe dúvidas de que seu conteúdo será visto; para servir proativamente essas entidades, em vez de esperar que elas cheguem até você.

Não posso prometer que isso mudará o jogo para sua estratégia de SEO, mas pelo menos você deixará menos pedra sobre pedra.