Simple SEO fix for Vite/React SPAs without switching to Next/Remix

Hey devs! Found a neat solution for SPA SEO issues that I wanted to share.

The Problem: I was using this basic Express setup to serve my Vite SPA:

app.get('*', (req, res) => {
    res.sendFile(join(__dirname, '../dist/index.html'));

Initially thought about migrating to Next.js or Remix, but it seemed like overkill for my needs.

The Solution: Instead, I wrote this small middleware that dynamically injects meta tags based on the route. Here's the code:

export const enrichMetadata = async (html, slug) => {
    try {
        if (!slug) return html;

        let itinerary =
            (await Itinerary.findOne({ slug: slug })) || (await Itinerary.findById(slug));
        if (!itinerary) return html;

        const firstDayActivities = itinerary.itinerary?.[0]?.activities || [];
        const firstDayHighlights = firstDayActivities
            .slice(0, 2)
            .map((act) => act.activity)
            .join(' and ');

        const highlightsText = firstDayHighlights ? ` Starting with ${firstDayHighlights}.` : '';
        const itineraryContent = itinerary.itinerary
            .map(
                (day, i) =>
                    `Day ${i + 1}: ${day.activities.map((a) => '<h1>' + a.activity + '</h1>' + '<p>' + a.description + '</p>').join(', ')}`
            )
            .join('. ');

        const $ = load(html);
        $('title').text(`${itinerary.destination} Travel Guide - MyTrip.city`);
        $('meta[name="description"]').attr(
            'content',
            `Discover ${itinerary.destination} with our GPS audio travel guide. ${itinerary.duration}-day itinerary with best attractions, activities, and local insights.${highlightsText}`
        );
        $('meta[property="og:title"]').attr('content', `${itinerary.destination} Travel Guide`);
        $('meta[property="og:description"]').attr(
            'content',
            `Explore ${itinerary.destination} with our personalized travel itinerary.${highlightsText}`
        );
        $('meta[property="og:url"]').attr('content', 'https://mytrip.city/itinerary/' + slug);
        if (itinerary.images?.[0]) {
            $('meta[property="og:image"]').attr('content', itinerary.images[0]);
        }

        const schema = {
            '@context': 'https://schema.org',
            '@type': 'TouristTrip',
            name: `${itinerary.destination} Travel Guide`,
            description: `${itinerary.duration}-day itinerary in ${itinerary.destination}`,
            itinerary: {
                '@type': 'ItemList',
                numberOfItems: itinerary.itinerary.length,
                itemListElement: itinerary.itinerary.flatMap((day, index) =>
                    day.activities.map((activity, actIndex) => ({
                        '@type': 'ListItem',
                        position: index * day.activities.length + actIndex + 1,
                        item: {
                            '@type': 'TouristAttraction',
                            name: activity.activity,
                            description: activity.description
                        }
                    }))
                )
            },
            touristType: ['Sightseeing', 'Cultural'],
            estimatedDuration: `P${itinerary.duration}D`,
            location: {
                '@type': 'City',
                name: itinerary.destination
            }
        };

        $('head').append(`<script type="application/ld+json">${JSON.stringify(schema)}</script>`);
        $('body').append(`<div style="display:none">${itineraryContent}</div>`);

        return $.html();
    } catch {
        return html;
    }
};

Why I think this is cool:

Took literally 1 minute to implement
Avoided the complexity of Next.js setup
Gets the job done for SEO and social sharing
Performance is still great
Works with any SPA framework

Anyone else tried something similar? Wondering if there are any gotchas I should watch out for.

EDIT: Using cheerio for HTML parsing, forgot to mention that!

Blog

Simple SEO fix for Vite/React SPAs without switching to Next/Remix

Max Sveshnikov

Join Our Newsletter. No Spam, Only the good stuff.

Related