Wordpress-seo: HowTo Schema Image not detected when insert hyperlink Image URL

[mentik]

• [x] I've read and understood the contribution guidelines.
• [x] I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

Hi i need help
i was create content with HowTo schema,
i insert hyperlink in image step, i want my visitor can show image in fullscreen or download it via clicking.

But the image not detected via Google Search Console

Thanks for help

Please describe what you expected to happen and why.

This is full tread in wordpress https://wordpress.org/support/topic/how-to-image-not-detected-when-insert-hyperlink-image-url/

How can we reproduce this behavior?

1. https://wordpress.org/support/topic/how-to-image-not-detected-when-insert-hyperlink-image-url/
   2.
   3.

Technical info

* If relevant, which editor is affected (or editors):
- [ ] Classic Editor
- [x] Gutenberg
- [ ] Classic Editor plugin

* Which browser is affected (or browsers):
- [x] Chrome
- [x] Firefox
- [ ] Safari
- [ ] Other

Used versions

• WordPress version: 5.3.2
• Yoast SEO version: 12.71
• Gutenberg plugin version:
• Classic Editor plugin version:
• Relevant plugins in case of a bug:
  
• Tested with theme: Newspaper Tagdiv

[amboutwe]

How can we reproduce this behavior?

1. Install and activate Yoast.
2. Create new post.
3. Add a Howto block with at least two steps that have images.
4. For one of the images, add a link to itself or somewhere else.
5. Save/Publish and check source code of post.
6. See image markup for the non-linked image but not for the linked image.

Example markup in my test environment

_With non-linked image_
{"@type":"HowToStep","url":"http://forum.test/15-2/#how-to-step-1577406305465","name":"Here is the first step.","itemListElement":[{"@type":"HowToDirection","text":"This is the thing you do first."}],"image":{"@type":"ImageObject","@id":"http://forum.test/15-2/#schema-image-6c91c6b8e09a12f4c9180020b597ae84","url":"http://forum.test/wp-content/uploads/2019/12/Toller-Watermelon-scaled.jpg","width":2560,"height":1707}}

_With linked image_
{"@type":"HowToStep","url":"http://forum.test/15-2/#how-to-step-1577406395730","name":"Then you do this","itemListElement":[{"@type":"HowToDirection","text":"A second step with an image that links to itself.<a href=\"https://yoast.com/\"></a>"}

[mentik]

Yes that is, so the HowTo Schema not detect image step.

[dariaknl]

@amboutwe can you please explain how to reproduce "link to itself"? And the second json errors with Missing ',' or ']' in array declaration

[amboutwe]

@dariaknl I copied only part of the schema to show that the first with an image and no link outputs an ImageObject whereas the second with a link doesn't have an ImageObject. The full output is below and validates (excluding the URL isn't live errors).

"link to itself" means find the image URL and add a link to that URL (http://forum.test/wp-content/uploads/2019/12/Nut.jpg). Although it doesn't matter where the link goes to. In the example, I linked to yoast.com and the image itself. Both resulted in no ImageObject.

```
```

[Djennez]

A hyperlink is not an image object, so it is not expected to create one for the structured data.

You can add the image to the step and add a separate hyperlink, that way you can directly link to the image and have it set as a step.

You can also create the How-To block and edit it as HTML afterwards (be aware that the editor will not recognize it as a valid block anymore). You can add a <a> tag around the image that you've inserted to make it link to itself (or something else). This will not invalidate the SD output as far as I have tested.

[Pcosta88]

related https://github.com/Yoast/bugreports/issues/843