Opengraph preview not working

Support
1

Netlify is adding a forward slash to the start of the opengraph image URLs for my portfolio website (www.chrisbarfod.design) which makes the URL invalid. I’ve checked the data on Github and there is no forward slash but when I use an opengraph debugger a forward slash has been added:

<meta property="og:image" content="/https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg">

I think this is the issue as I’ve tested the debugger on my staging website on Webflow and I’m not having any problem. I’ve tried using another URL for the image but that didn’t work either.

2

While not entirely impossible, (as Netlify do some rewriting of site HTML files, for pretty url’s etc), it’s unlikely that Netlify is injecting the / prior to the URL.

I don’t work with Webflow so excuse my ignorance, but how are you getting the site from Webflow → Netlify, is it as already built files which are just being uploaded/deployed, or does a build run on Netlify?

If they’re pre-built files, can you inspect them to see what they contain?

If it’s a site build, can you run it locally and check the output?

3

I’m not sure what else it could be if not Netlify.

I built the site in Webflow, exported it and used the Udelsy Webflow → Jamstack converter, and pushed to a Github repo that Netlify deploys off.

The URL doesn’t have a forward slash before it in the files. I’ve Checked the Github repo and it’s only after I use the opengraph debug tool that a forward slash is present. This is it before:

---
title: Home
permalink: index.html
layout: index.html
slug: ''
tags: pages
seo:
  noindex: false
  title: Chris Barfod Design
  description: Creating Intuitive and Impactful Digital Experiences
  og:title: Chris Barfod Design
  additional_tags: >-
    <meta content="Creating Intuitive and Impactful Digital Experiences"
    property="og:description"><meta content="Creating Intuitive and Impactful
    Digital Experiences" property="twitter:description"><meta
    content="https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg"
    property="twitter:image"><meta property="og:type" content="website">
  og:image: >-
    https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg
  twitter:title: Chris Barfod Design
---

I’m not sure how to run the site locally.

4

I understand that, you mentioned it in your first post, it hasn’t answered my questions.

1 Like
5

@nathanmartin sorry, I pressed enter accidentally. Just updated the response

6

It could whatever the Udelsy Webflow → Jamstack converter has produced.

Since you’ve provided some frontmatter code above, and frontmatter is not html, that indicates to me your site is running a build on Netlify.

You would perform the same actions as Netlify.

  • Clone the repository
  • Install the dependencies
  • Run the build command

If your repository is public you can provide a link and I can check on your behalf.

7

I made the repo public - link
I’d really appreciate if you could look at it.

8

Here are the settings Udesly allows you to change in the converter if that’s any help:

Screenshot 2024-04-17 at 16.27.27
Screenshot 2024-04-17 at 16.27.271067×452 26.2 KB

9

Screenshot 2024-04-17 at 16.27.21
Screenshot 2024-04-17 at 16.27.211067×452 29 KB

10

@ChrisToph Running your build locally I can confirm that it is what produces that og:image tag with the malformed / prefix.

image
image1444×56 87.2 KB

If you were unaware the build that it runs utilizes eleventy.

1 Like
11

Ah ok, thanks @nathanmartin. I’ll contact Udesly about it

12

@ChrisToph The very rudimentary code that handles the seo output is in _utils/shortcodes.js, lines 176 -> 182

if (key == "og:image") {
  if (content.startsWith("/")) {
    content = domain + content;
  } else {
    content = domain + "/" + content;
  }
}

The string you have set is https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg

It does not start with / so it gets handled by the else.

You almost certainly don’t have a value for domain, and so it ends up generating:

/https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg

Since it’s code from their system you should get them to fix it, but depending on your level of comfort with editing the files you can add your own fix by changing that code to the following:

if (key == "og:image") {
  if (content.startsWith("/")) {
    content = domain + content;
  } else if ( !content.startsWith( "http" ) ) {
    content = domain + "/" + content;
  }
}

Which I have confirmed outputs the correct value:

image
image1432×45 64.7 KB

13

In addition to @nathanmartin’s notes @ChrisToph, also see cms/_data/settings/site.json. The key domain has a value ""

14

I’m not sure what value is anticipated for domain, but you can mention to Udesly that the existing code only handles the og:image being hosted on the same site.

Setting a domain doesn’t make things any better, as a value like www.chrisbarfod.design, with an off-site og:image generates:

www.chrisbarfod.design/https://uploads-ssl.webflow.com/63aa95b3e93ff8fb7d8d4cbc/661dfab369f1521b1600e2c8_OpenGraph-Home.jpg

As evidenced by doing exactly that:

image
image1691×45 72.7 KB

1 Like