og:image meta tag not generated correctly with img_path #754

joshjohanning · 2022-11-13T02:35:31Z

Checklist

I have read the tutorials and know the correct effect of the functional design.
There are no similar reports on existing issues (including closed ones).
I found the bug on the latest code of the master branch.

Describe the bug

It looks like the image post works when using img_path (ie: using the short path), but the og:image meta tag doesn't render correctly.

See my example post.

The title image shows up correctly in the post, but because I am using img_path, it doesn't seem that the og:image tag renders correctly.

Markdown:

img_path: /assets/screenshots/2022-10-12-using-github-checks-api
image:
  path: status-check.gif

If searching the source of the page, you will find:

<meta property="og:image" content="https://josh-ops.com/status-check.gif" />

The image should be:

https://josh-ops.com/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif

At least according to the docs, this should work:

In addition, the [img_path](https://chirpy.cotes.page/posts/write-a-new-post/#image-path) can also be passed to the preview image, that is, when it has been set, the attribute path only needs the image file name.

To Reproduce

Steps to reproduce the behavior:

Use img_path
Use short version of image for the post's image
Search html to find the og:image tag

Expected behavior

Using correct version of image path

Screenshots

n/a

Environment

Command	Version
`ruby -v`
`gem -v`
`bundle -v`
`bundle exec jekyll -v`
`bundle info jekyll-theme-chirpy`

Desktop

macOS latest
Chrome latest

Smartphone

n/a

Additional context

cc joshjohanning/joshjohanning.github.io#21 and credits to @ruzickap

The text was updated successfully, but these errors were encountered:

cotes2020 · 2022-11-15T02:48:29Z

Thanks for the report! The twitter:image in <head> will also be missing img_path.

joshjohanning · 2022-11-16T04:29:31Z

Hi @cotes2020! I deployed this update, but it still looks like the issue persists? My source still looking like this:

<meta property="twitter:image" content="https://josh-ops.com/status-check.gif" />
<meta property="og:image" content="https://josh-ops.com/status-check.gif" />

I'm not using a CDN, which differs from what you're using in your instance, I believe.

From this line:

jekyll-theme-chirpy/_includes/head.html

Line 25 in 4a18563

{% if site.img_cdn and seo_tags contains 'og:image' %}

if I remove site.img_cdn and so that the line is now:

  {% if seo_tags contains 'og:image' %}

then it works:

<meta property="og:image" content="http://localhost:4000/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif" />
<meta property="twitter:image" content="http://localhost:4000/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif" />

This also worked

  {% if site.img_cdn != empty and seo_tags contains 'og:image' %}

Not really an expert in this, so not sure what the intent is with site.img_cdn here 😄

cotes2020 · 2022-11-16T16:33:44Z

Ah, looks like I submitted a bad patch, thanks for testing.

After more in-depth debugging, the same problem will occur if the baseurl is set. I will rewrite the last commit to the master branch to perfect the fix.

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

joshjohanning · 2022-11-16T17:58:08Z

Woot! It works, and image even shows when posting on Twitter now :)

joshjohanning · 2022-11-16T18:00:33Z

@cotes2020 okay maybe one minor thing left here that I noticed investigating my source:

image":{"width":"100%","height":"100%","alt":"Example of Status Checks in a Pull Request","url":"https://josh-ops.com/status-check.gif","@type":"imageObject"},"

It looks like there is one last reference to the site.baseurl/page.image.path pathing in the source. Not sure what this one might be used for, but I think that's the last hold out.

Nothing fails to load on the page, so it's more of a meta object/tag.

What do you think?

cotes2020 · 2022-11-16T18:27:34Z

Are you confused by this line?

jekyll-theme-chirpy/_includes/head.html

Line 43 in 59b5562

    
                   {% capture replacement %}<meta property="{{ prop }}" content="{{ site.url }}{{ page.img_path | relative_url }}{% endcapture %}

Also, how are these contents obtained?

image":{"width":"100%","height":"100%","alt":"Example of Status Checks in a Pull Request","url":"https://josh-ops.com/status-check.gif","@type":"imageObject"},"

joshjohanning · 2022-11-16T18:45:35Z

Yeah, kind of! I wasn't expecting to see a reference to an unreachable image in the above snippet.

https://josh-ops.com/status-check.gif

when it should be

https://josh-ops.com/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif

Just like how we (well, you) cleaned up the og:image and twitter:image in the source, I thought that there was maybe one more that was missed.

cotes2020 · 2022-11-16T19:35:57Z

jekyll-theme-chirpy/_includes/head.html

Line 43 in 59b5562

    
                   {% capture replacement %}<meta property="{{ prop }}" content="{{ site.url }}{{ page.img_path | relative_url }}{% endcapture %}

The above code can generate the correct URL no matter whether site.baseurl is assigned or not.

... I wasn't expecting to see a reference to an unreachable image in the above snippet.
https://josh-ops.com/status-check.gif
when it should be
https://josh-ops.com/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif

Now I don't quite understand what you mean. Are you getting an incomplete URL path after testing 59b5562? If yes, please list the specific configuration: What are the values of site.baseurl, site.img_cdn, page.img_path respectively?

joshjohanning · 2022-11-16T21:55:16Z

Yes, I applied 59b5562, and that fixed the og:image and twitter:image.

However, go to my post: https://josh-ops.com/posts/using-github-checks-api/

If you right click and view the source, you'll find a similar issue with the image:

"url":"https://josh-ops.com/status-check.gif","@type":"imageObject"}

This is in the @context tag
Here's a quick video of what I mean. The first two results have the correct path of the image, per the patch in 59b5562. But the third result has the incorrect path for the post image.

Screen.Recording.2022-11-16.at.3.51.51.PM.mov

So, I think there is one more thing that needs to be patched to fully fix this. I can't find where in the codebase this is coming from though :(.

cotes2020 · 2022-11-16T22:47:54Z

Like those SEO-related meta tags, the content inside <script type="application/ld+json">...</script> is also generated by the SEO plugin.

jekyll-theme-chirpy/jekyll-theme-chirpy.gemspec

Line 31 in 59b5562

spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"

Will fix it soon, thanks for the video demo. 👍

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

joshjohanning · 2022-11-17T15:22:11Z

Ahhh - so actually, this made it worse for me, because I didn't have a / at the end of my img_path.

So now it renders as:

https://josh-ops.com/assets/screenshots/2022-10-12-using-github-checks-apistatus-check.gif

When it should be:

https://josh-ops.com/assets/screenshots/2022-10-12-using-github-checks-api/status-check.gif

I can fix this though in my posts - should I just plan to put a / at the end of my img_path property's in my posts?

- img_path: /assets/screenshots/2022-10-12-using-github-checks-api
+ img_path: /assets/screenshots/2022-10-12-using-github-checks-api/

I think the logic here 59b5562 was slightly more robust, but now that I know how it works I am good with the solution of appending a /. Your docs have the / at the end, too.

Thanks for all of the debugging 🎉

cotes2020 · 2022-11-17T19:05:52Z

By now, img_path should end with /. Maybe some improvements will be added in the future to support it without forward slash.

joshjohanning · 2022-11-18T14:57:29Z

By now, img_path should end with /. Maybe some improvements will be added in the future to support it without forward slash.

Works for me, thank you for confirming!

Is there a way to update the post for something like this without modifying the "updated" time ?

cotes2020 · 2022-11-18T15:24:27Z

You can use git to merge the post's temporary commit into the previous commit.

As a reminder, da7d7e2 supports img_path withou / at the end.

joshjohanning · 2022-11-18T15:56:26Z

Woot! It's all fixed now with da7d7e2 😄 🎉 Thanks @cotes2020!!

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration. (cherry picked from commit f6e9a3f)

joshjohanning mentioned this issue Nov 13, 2022

img_path in posts doesn't work properly joshjohanning/joshjohanning.github.io#21

Closed

cotes2020 added the bug Something isn't working label Nov 15, 2022

cotes2020 closed this as completed in 4a18563 Nov 15, 2022

cotes2020 added a commit that referenced this issue Nov 16, 2022

fix(seo): incorrect image URL for <meta> tag(#754)

59b5562

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

cotes2020 added a commit that referenced this issue Nov 16, 2022

fix: the image URL in the SEO-related tags is incomplete (#754)

f6e9a3f

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

shihtiy-tw pushed a commit to shihtiy-tw/shihtiy-tw.github.io that referenced this issue Nov 26, 2022

fix: the image URL in the SEO-related tags is incomplete (cotes2020#754)

2304fac

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

songkg7 pushed a commit to songkg7/songkg7.github.io-legacy that referenced this issue Dec 10, 2022

fix: the image URL in the SEO-related tags is incomplete (cotes2020#754)

0f82b83

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

sanjidnet pushed a commit to sanjidnet/sanjidnet.github.io that referenced this issue Jan 9, 2023

fix: the image URL in the SEO-related tags is incomplete (cotes2020#754)

09998b2

This issue occurs when setting the `img_path` of the post or the `baseurl` of the site configuration.

bhaskarvilles mentioned this issue Aug 24, 2024

fix(seo): og:image and twitter:image are missing the img_path o… #1921

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

og:image meta tag not generated correctly with img_path #754

og:image meta tag not generated correctly with img_path #754

joshjohanning commented Nov 13, 2022 •

edited

Loading

cotes2020 commented Nov 15, 2022

joshjohanning commented Nov 16, 2022

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022 •

edited

Loading

joshjohanning commented Nov 16, 2022 •

edited

Loading

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022 •

edited

Loading

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 17, 2022 •

edited

Loading

cotes2020 commented Nov 17, 2022

joshjohanning commented Nov 18, 2022

cotes2020 commented Nov 18, 2022 •

edited

Loading

joshjohanning commented Nov 18, 2022

og:image meta tag not generated correctly with img_path #754

og:image meta tag not generated correctly with img_path #754

Comments

joshjohanning commented Nov 13, 2022 • edited Loading

Checklist

Describe the bug

To Reproduce

Expected behavior

Screenshots

Environment

Desktop

Smartphone

Additional context

cotes2020 commented Nov 15, 2022

joshjohanning commented Nov 16, 2022

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022 • edited Loading

joshjohanning commented Nov 16, 2022 • edited Loading

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 16, 2022 • edited Loading

cotes2020 commented Nov 16, 2022

joshjohanning commented Nov 17, 2022 • edited Loading

cotes2020 commented Nov 17, 2022

joshjohanning commented Nov 18, 2022

cotes2020 commented Nov 18, 2022 • edited Loading

joshjohanning commented Nov 18, 2022

joshjohanning commented Nov 13, 2022 •

edited

Loading

joshjohanning commented Nov 16, 2022 •

edited

Loading

joshjohanning commented Nov 16, 2022 •

edited

Loading

joshjohanning commented Nov 16, 2022 •

edited

Loading

joshjohanning commented Nov 17, 2022 •

edited

Loading

cotes2020 commented Nov 18, 2022 •

edited

Loading