madrilene / eleventy-excellent

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
https://eleventy-excellent.netlify.app/
Other
382 stars 69 forks source link

Broken OG Images #39

Closed flamedfury closed 6 months ago

flamedfury commented 6 months ago

Heya, I noticed that the OG images were not displaying correctly. Checking out the formatting in partials/meta-info.njk

<meta
  property="og:image"
  content="{{ meta.url }}{% if (layout == 'post') %}
    /assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.opengraph_default }}
  {% endif %}"
/>

Produces broken HTML when the page is built

<meta
  property="og:image"
  content="https://eleventy-excellent.netlify.app
    /assets/images/template/opengraph-default.jpg
  "
/>

And the OG images do not display, check https://www.opengraph.xyz/url/https%3A%2F%2Feleventy-excellent.netlify.app%2F

I updated the nunjucks loop to the following to get them to render correctly

<meta
  property="og:image"
  content="{% if (layout == 'post') %}
    {{ meta.url }}/assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}
    {{ meta.url }}{{ meta.opengraph_default }}
  {% endif %}"
/>

Which now renders the URL on a single line, and the OG images load correctly

<meta
  property="og:image"
  content="
    https://flamedfury.com/assets/images/template/opengraph-default.png
  "
/>

Check https://www.opengraph.xyz/url/https%3A%2F%2Fflamedfury.com%2F

madrilene commented 6 months ago

Fixed, thank you! Also added the post title as alt text for the og images.