Adding ACF images to an Article Schema

#892014
  • Resolved Tom Greenhill
    Rank Math free

    I have tried following the advice given on this page, but the images aren’t added to the Article @type as can be seen below, they’re added to the @graph which isn’t being picked up by the schema tester. Not sure what I need to do to get the image array in the right place? Thanks.


    {
    "@context": "https://schema.org",
    "@graph": [
    [
    "https://example.com/wp-content/uploads/2024/04/Slow-smoked-boned-rolled-hogget-shoulder-hogget-grilled-onions-turnips-tahini-dressing.jpg",
    "https://example.com/wp-content/uploads/2024/02/mutton_pie.jpg",
    "https://example.com/wp-content/uploads/2024/02/Curried-Mutton-Pie.jpg",
    "https://example.com/wp-content/uploads/2024/02/Khoresh_rivas_iranian_mutton_rhubarb_stew.jpg",
    "https://example.com/wp-content/uploads/2024/06/chicken_kiev.jpg",
    "https://example.com/wp-content/uploads/2024/03/0A1A4412.jpg",
    "https://example.com/wp-content/uploads/2024/05/chateau_bone_marrow_watercress_sauce-1.jpg",
    "https://example.com/wp-content/uploads/2024/05/Ox-Heart.jpg",
    "https://example.com/wp-content/uploads/2024/02/Outside-Skirt.jpg"
    ],
    {
    "@type": "Organization",
    "@id": "https://example.com/#organization",
    "name": "Website Example",
    "logo": {
    "@type": "ImageObject",
    "@id": "https://example.com/#logo",
    "url": "https://example.com/wp-content/uploads/2022/10/android-chrome-icon.webp",
    "contentUrl": "https://example.com/wp-content/uploads/2022/10/android-chrome-icon.webp",
    "caption": "Website Example",
    "inLanguage": "en-GB",
    "width": "384",
    "height": "384"
    }
    },
    {
    "@type": "WebSite",
    "@id": "https://example.com/#website",
    "url": "https://example.com",
    "name": "Website Example",
    "publisher": {
    "@id": "https://example.com/#organization"
    },
    "inLanguage": "en-GB"
    },
    {
    "@type": "ImageObject",
    "@id": "https://example.com/wp-content/uploads/2024/06/image-650x800-22.png",
    "url": "https://example.com/wp-content/uploads/2024/06/image-650x800-22.png",
    "width": "650",
    "height": "800",
    "inLanguage": "en-GB"
    },
    {
    "@type": "WebPage",
    "@id": "https://example.com/article/1-foolproof-lamb-ossobuco-recipe/#webpage",
    "url": "https://example.com/article/1-foolproof-lamb-ossobuco-recipe/",
    "name": "1 Foolproof Lamb Ossobuco Recipe - Website Example",
    "datePublished": "2024-07-11T15:17:06+00:00",
    "dateModified": "2024-10-10T14:54:43+00:00",
    "isPartOf": {
    "@id": "https://example.com/#website"
    },
    "primaryImageOfPage": {
    "@id": "https://example.com/wp-content/uploads/2024/06/image-650x800-22.png"
    },
    "inLanguage": "en-GB"
    },
    {
    "@type": "Person",
    "@id": "https://example.com/author/jorge-thomas/",
    "name": "Jorge Thomas",
    "url": "https://example.com/author/jorge-thomas/",
    "image": {
    "@type": "ImageObject",
    "@id": "https://secure.gravatar.com/avatar/35728faa5ba7f6ac2d51956dde064ba9?s=96&d=mm&r=g",
    "url": "https://secure.gravatar.com/avatar/35728faa5ba7f6ac2d51956dde064ba9?s=96&d=mm&r=g",
    "caption": "Jorge Thomas",
    "inLanguage": "en-GB"
    },
    "worksFor": {
    "@id": "https://example.com/#organization"
    }
    },
    {
    "@type": "Article",
    "headline": "1 Foolproof Lamb Ossobuco Recipe - Website Example",
    "keywords": "Lamb Ossobuco,Recipe",
    "datePublished": "2024-07-11T15:17:06+00:00",
    "dateModified": "2024-10-10T14:54:43+00:00",
    "author": {
    "@id": "https://example.com/author/jorge-thomas/",
    "name": "Jorge Thomas"
    },
    "publisher": {
    "@id": "https://example.com/#organization"
    },
    "description": "Here is a lamb ossobuco recipe that is beautiful in its simplicity and begging to be eaten al fresco with a glass of cold Sicilian white wine.",
    "name": "1 Foolproof Lamb Ossobuco Recipe - Website Example",
    "@id": "https://example.com/article/1-foolproof-lamb-ossobuco-recipe/#richSnippet",
    "isPartOf": {
    "@id": "https://example.com/article/1-foolproof-lamb-ossobuco-recipe/#webpage"
    },
    "image": {
    "@id": "https://example.com/wp-content/uploads/2024/06/image-650x800-22.png"
    },
    "inLanguage": "en-GB",
    "mainEntityOfPage": {
    "@id": "https://example.com/article/1-foolproof-lamb-ossobuco-recipe/#webpage"
    }
    }
    ]
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello,

    Thank you for your query and we are so sorry about the trouble this must have caused.

    The guide you shared is mostly focusing on the repeater fields.

    Please try using the filter code below instead:

    add_filter( "rank_math/snippet/rich_snippet_article_entity", function( $entity ) {
    	// $yourImageArray is where you store your image array from the ACF
    	foreach ($yourImageArray as $img_url) {
    		$imageData = [
    			"@type" => "ImageObject",
    			"url" => $img_url
    		];
    	}
    
    	if(isset($imageData)) {
    		$entity['image'] = $imageData;
    	}
    
    	return $entity;
    });

    The code needs further adjustments to ensure image data is integrated to the Article schema.

    Hope that helps.

    Hey Jeremy,

    Thanks for your response, much appreciated. It appears there’s a typo in your example though as the $imageData array is constantly overwritten in the loop as opposed to image items being pushed to it.

    Also, could you kindly please expand on your last point as I have no idea how I would go about adding it to the Article schema.

    Thanks again!

    Hello,

    The data is constantly overwritten because the code is not pushing to the array but replacing it.

    To push the image data to the array you can use the following modified code:

    
    add_filter( "rank_math/snippet/rich_snippet_article_entity", function( $entity ) {
        // $yourImageArray is where you store your image array from the ACF
        $imageData = [];
        foreach ( $yourImageArray as $img_url ) {
            array_push( $imageData, [
                "@type" => "ImageObject",
                "url" => $img_url,
            ] );
        }
    
        if( isset( $imageData ) ) {
            $entity['image'] = $imageData;
        }
    
        return $entity;
    });
    

    As for adding this to the Article Schema you don’t need to make any further modifications because this is being added to the image entity of that type already.

    The only thing you need to make sure of is that you are passing an array of images to the variable $yourImageArray.

    Don’t hesitate to get in touch if you have any other questions.

    Thanks, exactly my point, I was pointing out the error to your colleague.

    I’ve added the snippet and from what I can see the array is built correctly as per your instructions and I’ve output it to for a sanity check, but it’s still not being added to the schema block.

    Array
    (
        [@type] => Article
        [headline] => Article Title
        [keywords] => Recipe
        [datePublished] => 2024-07-11T15:17:06+00:00
        [dateModified] => 2024-10-10T14:54:43+00:00
        [isPrimary] => 1
        [articleSection] => ''
        [author] => Array
            (
                [@id] => https://example.test/author/author/
                [name] => Author
            )
    
        [publisher] => Array
            (
                [@id] => https://example.test/#organization
            )
    
        [description] => Here is a lamb ossobuco recipe that is beautiful in its simplicity and begging to be eaten al fresco with a glass of cold Sicilian white wine.
        [image] => Array
            (
                [0] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/04/Slow-smoked-boned-rolled-hogget-shoulder-hogget-grilled-onions-turnips-tahini-dressing.jpg
                    )
    
                [1] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/02/image-01.jpg
                    )
    
                [2] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/02/image-02.jpg
                    )
    
                [3] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/02/image-03.jpg
                    )
    
                [4] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/06/image-04.jpg
                    )
    
                [5] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/03/image-05.jpg
                    )
    
                [6] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/05/image-06.jpg
                    )
    
                [7] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/05/image-07.jpg
                    )
    
                [8] => Array
                    (
                        [@type] => ImageObject
                        [url] => https://example.test/wp-content/uploads/2024/02/image-08.jpg
                    )
    
            )
    
    )

    BUT, this is what’s output as the schema block…

    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "Organization",
          "@id": "https://example.test/#organization",
          "name": "Website",
          "logo": {
            "@type": "ImageObject",
            "@id": "https://example.test/#logo",
            "url": "https://example.test/wp-content/uploads/2022/10/android-chrome-icon.webp",
            "contentUrl": "https://example.test/wp-content/uploads/2022/10/android-chrome-icon.webp",
            "caption": "Website",
            "inLanguage": "en-GB",
            "width": "384",
            "height": "384"
          }
        },
        {
          "@type": "WebSite",
          "@id": "https://example.test/#website",
          "url": "https://example.test",
          "name": "Website",
          "publisher": {
            "@id": "https://example.test/#organization"
          },
          "inLanguage": "en-GB"
        },
        {
          "@type": "ImageObject",
          "@id": "https://example.test/wp-content/uploads/2024/06/image.jpg",
          "url": "https://example.test/wp-content/uploads/2024/06/image.jpg",
          "width": "650",
          "height": "800",
          "inLanguage": "en-GB"
        },
        {
          "@type": "WebPage",
          "@id": "https://example.test/article/article-slug/#webpage",
          "url": "https://example.test/article/article-slug/",
          "name": "Article Title",
          "datePublished": "2024-07-11T15:17:06+00:00",
          "dateModified": "2024-10-10T14:54:43+00:00",
          "isPartOf": {
            "@id": "https://example.test/#website"
          },
          "primaryImageOfPage": {
            "@id": "https://example.test/wp-content/uploads/2024/06/image-650x800-22.png"
          },
          "inLanguage": "en-GB"
        },
        {
          "@type": "Person",
          "@id": "https://example.test/author/author/",
          "name": "Author",
          "url": "https://example.test/author/author/",
          "worksFor": {
            "@id": "https://example.test/#organization"
          }
        },
        {
          "@type": "Article",
          "headline": "Article Title",
          "keywords": "Lamb Ossobuco,Recipe",
          "datePublished": "2024-07-11T15:17:06+00:00",
          "dateModified": "2024-10-10T14:54:43+00:00",
          "author": {
            "@id": "https://example.test/author/author/",
            "name": "Author"
          },
          "publisher": {
            "@id": "https://example.test/#organization"
          },
          "description": "Article description...",
          "image": {
            "@id": "https://example.test/wp-content/uploads/2024/06/image-650x800-22.png"
          },
          "name": "Article Title",
          "@id": "https://example.test/article/article-slug/#richSnippet",
          "isPartOf": {
            "@id": "https://example.test/article/article-slug/#webpage"
          },
          "inLanguage": "en-GB",
          "mainEntityOfPage": {
            "@id": "https://example.test/article/article-slug/#webpage"
          }
        }
      ]
    }

    Any ideas why this is happening please? Thanks!

    Hello,

    We might need to take a closer look at the settings. Please edit the first post on this ticket and include your WordPress & FTP logins in the designated Sensitive Data section.

    Please do take a complete backup of your website before sharing the information with us.
    Sensitive Data Section

    It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:

    https://wordpress.org/plugins/temporary-login-without-password/

    You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):

    https://wordpress.org/plugins/wp-security-audit-log/

    We really look forward to helping you.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)

The ticket ‘Adding ACF images to an Article Schema’ is closed to new replies.