Adding an Image Sitemap Endpoint to Your Site

PicPerf has the ability to automatically generate an image sitemap for your website based on images that have been requested within the last 60 days. An important piece to leveraging this feature is to add the sitemap in the Google Search Console. But in order to do that, the sitemap must be served from your domain.

Depending on your framework or hosting provider, it’s relatively simple to set this up so that the sitemap is served from your domain, while still being sourced from PicPerf. Here are a few examples for various tools & providers.

Web Frameworks

WordPress

The PicPerf WordPress plugin will automatically register a sitemap route and add it to the <head> of your pages. That said, here’s how you might tackle it yourself:

In your WordPress theme’s functions.php file (or within a custom plugin you have running on your site), add the following code.

add_action('template_redirect', function () {
    // The current path.
    $requestPath = explode('?', $_SERVER['REQUEST_URI'])[0];

    // Only surface the sitemap's contents if you're on this specific path.
    if ($requestPath === '/image-sitemap') {
        $response = wp_remote_get('https://picperf.io/sitemap/your-domain.com');
        $body = wp_remote_retrieve_body($response);
        header('Content-Type: application/xml; charset=utf-8');
        echo $body;

        die();
    }
}, 0);

This will expose a new endpoint to your site at https://your-domain.com/image-sitemap returning the sitemap’s contents. Modify the code as you see fit.

Statamic or Laravel

The Statamic integration will automatically register a sitemap route and add it to your robots.txt file. But if you’d like to wire it up yourself, here’s how that’d look:

Create a new route in your routes/web.php file that fetches the contents, and returns the response with the appropriate Content-Type header:

<?php

use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Route;

Route::get('/image-sitemap', function () {
    $response = Http::get('https://picperf.io/sitemap/your-domain.com');
    $contents = $response->body();

    return response($contents)->header('Content-Type', 'application/xml');
});

Again, modify as you see fit.

Astro

In order to add an image sitemap endpoint to an Astro site, you’ll either need to be using server or hybrid rendering. In your pages directory, create an image-sitemap.ts file and add the following contents:

import type { APIRoute } from "astro";

export const GET: APIRoute = async () => {
  const response = await fetch("https://picperf.io/sitemap/your-domain.com");
  const body = await response.text();

  return new Response(body, {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
    ,}
  });
};

After deploying, https://your-domain.com/image-sitemap will be available to serve the required contents with the correct response headers.

Hosting Platforms

Vercel

You can use Vercel’s URL rewrite feature to create an endpoint in a project. In a vercel.json file located in your root directory, add the following:

{
  "rewrites": [
    {
      "source": "/image-sitemap",
      "destination": "https://picperf.io/sitemap/your-domain.com"
    }
  ]
}

This rule will automatically route requests to PicPerf to fetch your sitemap data.

Cloudflare Pages

In your site’s root functions directory, create a new file that will serve as the path for your new sitemap endpoint. I’ll use image-sitemap.ts.

export const onRequest: PagesFunction = async (context) => {
  return fetch("https://picperf.io/sitemap/your-domain.com", context.request);
};

Again, after deploying, https://your-domain.com/image-sitemap will be available to reference in your robots.txt file and add to the Google Search Console.

Netlify

With Netlify, you can set up URL rewrites using its _redirects file or netlify.toml. Here’s what the latter might look like:

[[redirects]]
  from = "/image-sitemap"
  to = "https://picperf.io/sitemap/your-domain.com"
  status = 200

See Netlify’s documentation on the matter for more details.