Adding recipe structured data to post template

How To
1

Hi there,

I am just starting out with bricks. I’m building a recipe blog, and wish to markup my recipes using the recipe schema, in order for search engines to properly index my recipes.

For now, on each page I have a recipe container which contains all of the content for the recipe. Within that container, I have additional divs for things like the recipe image, the title, ingredients and instructions.

To add the schema, I have added the following

  • The recipe container has the attribute “itemscope” as well as “itemtype” with the value set to “https:/schema.org/Recipe”
  • Each item (such was name, image, yield etc), all individually have the attribute “itemscope” as well as “itemtype” with the value set to the corresponding schema (for example “https:/schema.org/recipeYield”)

(please note I have removed one slash just to be able to post here, as it won’t allow me to include all the links)

However, when testing the site with googles Rich Results Test, is is not detecting the fields I have assigned. It does seem to acknowledge that I have defined the page as a recipe page, but it fails to read the additional itemtypes (name, image, etc)

What am I doing wrong? Would appreciate any tips on what I am missing!

Here’s the URL

2

Hi

This is how I did it for my recipes:

Cheers

Patric

1 Like
3

Thank you Patric! I managed to find a different solution. I duplicated the single.php document from the bricks template folder and added it to my child theme. I then added the following JSON code to fetch my ACF fields. Haven’t set it up fully yet but seems to be working!

<?php
get_header();

if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();

        $post_id     = get_the_ID();
        $post_type   = get_post_type();
        $bricks_data = Bricks\Helpers::get_bricks_data( $post_id, 'content' );
        $preview_id  = Bricks\Helpers::get_template_setting( 'templatePreviewPostId', $post_id );

        // Get custom field data
        $recipe_name = get_the_title(); // Use the post title for the recipe name
        $recipe_description = get_field('recipe_description');
        $recipe_ingredients = get_field('recipe_ingredients');
        $recipe_instructions = get_field('recipe_instructions');
        $prep_time = get_field('prep_time');
        $cook_time = get_field('cook_time');
        $total_time = get_field('total_time');
        $recipe_image = get_the_post_thumbnail_url($post_id, 'full'); // Get the featured image URL

        // Build JSON-LD script
        $recipe_schema = [
            "@context" => "http://schema.org/",
            "@type" => "Recipe",
            "name" => $recipe_name,
            "description" => $recipe_description,
            "image" => $recipe_image,
            "recipeIngredient" => $recipe_ingredients,
            "recipeInstructions" => $recipe_instructions,
            "prepTime" => "PT" . $prep_time . "M",
            "cookTime" => "PT" . $cook_time . "M",
            "totalTime" => "PT" . $total_time . "M",
            // Add any other fields required by the Recipe schema
        ];

        // Convert array to JSON-LD format
        $json_ld = json_encode($recipe_schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
        ?>
1 Like
4

Great to hear that you found a way.

Not sure why you go the more difficult way, but I guess you have your reasons.

Adding a code element into the page would do the same and would be much simpler and easier to maintain.

Cheers

Patric