Crafted Pour Cocktail Gallery Plugin

Optimizing Search Engine Indexing of Cocktail Recipes with Prerendering

Rev. December 11, 2024

This document provides guidance on setting up prerendering solutions, such as Prerender.io, to potentially improve how search engines like Google, Bing, and others index cocktail recipes created with the Crafted Pour plugin on WordPress websites.

Why Prerendering?

Websites with JavaScript-heavy content can sometimes be difficult for search engines to fully understand and index. Prerendering addresses this by presenting search engine crawlers with static HTML versions of your pages, ensuring all content is easily accessible for indexing. This can be particularly beneficial for websites using Crafted Pour, as cocktail recipes are dynamically loaded with JavaScript.

Important Disclaimer:

While Crafted Pour believes prerendering can be a valuable SEO tool, we haven't specifically tested these configurations with our plugin. This document offers general guidance based on our research and understanding of JavaScript SEO best practices.

Crafted Pour cannot provide direct support for setting up or troubleshooting any prerendering solution. Website owners are responsible for the correct and safe implementation of their chosen solution. Crafted Pour makes no warranty regarding your website's operation when implementing these solutions.

Prerendering Solutions

Several prerendering solutions are available, including:

  • Prerender.io: A cloud-based prerendering service.

  • Rendertron: An open-source prerendering solution from Google.

  • Netlify Prerendering: Built-in for websites hosted on Netlify.

  • Vercel Prerendering: Similar to Netlify, offered for websites hosted on Vercel.

Implementation Options

Option 1: Prerendering with Cloudflare (Recommended)

If your website uses Cloudflare, we recommend implementing prerendering at the Cloudflare Worker level. This can offer performance advantages and simplify setup.

Example using Prerender.io and Cloudflare Workers:

  1. Sign Up: Create a Prerender.io account at https://prerender.io/ and obtain your API token.

  2. Create a Worker:

    • In your Cloudflare dashboard, go to "Workers & Pages."

    • Create a new Worker.

    • Obtain the Worker code from your Prerender.io dashboard ("Deploy Prerender" -> "Cloudflare Workers").

    • Paste the code into the Worker editor.

    • Configure the Worker with your API token and routes matching your website's URL structure (see Prerender.io documentation for guidance).

Option 2: Prerendering with a WordPress Plugin

If you don't use Cloudflare or prefer a plugin-based solution, you can implement prerendering with a WordPress plugin.

Example using Prerender.io and their WordPress Plugin:

  1. Sign Up: Create a Prerender.io account at https://prerender.io/ and obtain your API token.

  2. Install Plugin:

    • In your WordPress admin area, go to "Plugins" -> "Add New."

    • Search for "Prerender.io" and install the official plugin.

    • Activate the plugin.

  3. Configure Plugin:

    • In your WordPress admin area, go to "Settings" -> "Prerender.io."

    • API Token: Enter your Prerender.io API token.

    • Sitemap URL: Enter the URL of your recipes sitemap: https://plugin.craftedpour.com/sitemaps/[yourdomain.com]_recipes.xml (replace [yourdomain.com] with your domain).

    • Prerender Mode: Set to "Only URLs in Sitemap or those Manually Added."

    • Crawling Frequency: Leave at the default or adjust as needed.

  4. Important Considerations:

    • Include Main Sitemap: Ensure your main sitemap index file (https://[yourdomain.com]/sitemap_index.xml) is included in the plugin settings, as it contains the link to the recipes sitemap.

    • No URL Patterns: Do not configure any additional URL patterns in the Prerender.io dashboard.

Testing Your Prerendering Setup

After implementing either option, test thoroughly to ensure prerendering is working correctly.

  1. Visit a recipe page: Go to a cocktail recipe page that should be prerendered.

  2. View rendered source:

    • Using browser developer tools:

      • Right-click on the page and select "Inspect" or press F12.

      • Go to the "Elements" tab.

      • Right-click on the <html> tag and select "Copy" -> "Copy outerHTML."

    • Other browsers: Consult your browser's documentation for instructions on viewing the rendered source.

  3. View prerendered source:

    • Using your browser:

      • In Chrome (or a similar browser), go to "View" -> "Developer" -> "View Source."

    • Alternative method (using curl or wget):

      • Use a command like curl https://service.prerender.io/https://example.com/cocktail-recipe (replace with your actual URL and service URL if different).

      • For wget, use wget https://service.prerender.io/https://example.com/cocktail-recipe.

  4. Compare: The rendered and prerendered source code should be very similar. Significant differences indicate a problem.

Important Considerations for All Implementations

  • Clear Cache: Clear any website caches after setting up the prerendering solution.

  • Monitor Usage: Keep track of your usage to avoid exceeding any service limits.

  • Refer to Official Documentation: Consult your chosen prerendering solution's official documentation for detailed instructions and troubleshooting.

Expected Outcome

  • Improved indexing of cocktail recipe pages by search engines, potentially boosting SEO.

Support

For help with the Crafted Pour plugin, please contact info@craftedpour.com. For support with any prerendering solution, refer to its official documentation or contact its support team.

Enjoy your new cocktail gallery

Contact support@craftedpour.com with any questions or issues