Media Reviews Are Now in Search Results

Tuesday, 08 Apr 2025

Part of the Astro series

When I added a Reviews page, I wanted to be able to have individual reviews show up in my site search. Due to some complexities I won’t go into of how Pagefind indexes things and how I optimize my images using the Astro Image component, this was easier said than done – until I remembered the good old HTML hidden global attribute. Then I just made a hidden span and populated it with the image alt text.

1
<div class="review">
2
      <p>
3
        {
4
          page.data.map((book) => (
5
            <span hidden>{`${book.alttext}`}</span>
6
            <a href={`/images/posts/${book.review}.jpg`}>
7
              <Image
8
                src={import(`../../../assets/images/posts/${book.review}.png`)}
9
                alt={`${book.alttext}`}
10
              />
11
            </a>
12
          ))
13
        }
14
      </p>
15
    </div>

Now all my media reviews show up in site seach results!

Enjoy the reviews, and don’t forget there are separate categories for Book Reviews, Movie Reviews, TV Show Reviews, and Music Reviews. I will be actively adding more reviews from this point forward.