Forum

Thread tagged as: Question, Problem, Runway

OG Image Not Showing

Hi. So I've tried so many different ways around this, and something is not right. I've got an option for CMS users to add their own OG image in the "Page Details" tab.

In the SEO template page, I've got this:

<perch:if exists="og_image">
<!-- Custom OG for this page -->
<meta property="og:image" content="<perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" divider-before="Sharing - Open Graph Image"  type="image" width="1200">">
<perch:else>
<!-- Default OG -->
<meta property="og:image" content="https://thewebsite.com/some-default-image-here.jpg">
</perch:if>

But with the image in place, the page outputs this:

<!-- Custom OG for this page -->
<meta property="og:image" content="">

<!-- Default OG -->
<meta property="og:image" content="https://thewebsite.com/some-default-image-here.jpg">

Shouldn't it be hiding the "Default OG" and showing the image source in the 'content'?
Leigh C

Leigh C 0 points

  • 2 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

Hello Leigh,

If you use a version that's older than 3.1, your Perch tags need to be self-closing />. This includes your perch:else tag.

Side note: if you don't your HTML comments to be output to the page, you can use template comments:

<!--* This is a template comment *-->

https://docs.grabaperch.com/templates/comments/
Leigh C

Leigh C 0 points

2 years ago

Thanks Hussein! That did correct the IF giving me the double images. BUT the "content" is still empty even though the image is right there in the CMS. Why isn't it outputting the image like everything else? It's perch:pages, not perch:content, right? Does it need a "type" like "image"?

To confirm, this in the standard.html template for SEO has:

<perch:if exists="og_image" />
<!-- Custom OG for this page -->
<meta property="og:image" content="<perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" divider-before="Sharing - Open Graph Image"  type="image" width="1200">">
<perch:else />
<!-- Default OG -->
<meta property="og:image" content="some-image.jpg">
</perch:if>

And the page is now outputting:

<!-- Custom OG for this page -->
<meta property="og:image" content="">
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

You also need to edit the og_tag tag:

<perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" divider-before="Sharing - Open Graph Image" type="image" width="1200" />

Alternatively update to Perch 3.1 or higher.
Leigh C

Leigh C 0 points

2 years ago

Hmm - what is different? This code looks the same to me. Also, what do you mean by the "og_tag" tag - are you referring to the property?
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

Sorry that was a typo. I meant the og_image field tag.

Your tag is not self-closing. Add a slash at the end of the tag:

<!-- This is not a self-closing tag -->
<perch:pages id="og_image" >

<!-- This is a self-closing tag -->
<perch:pages id="og_image" />
Leigh C

Leigh C 0 points

2 years ago

Ahhhhhh, that did it - thank you! I was so focused on the IF items, I forgot that was missing the forward slash.

PS. I would love to update our system, but it's too overgrown right now, so I have a new Perch 3 version setup and we're slowly moving toward it. If it was a smaller site, I would have done the update, but there is way too much going on to safely do it at this point. But now it makes sense why the Support page has that code - without the closing tag.

Thanks again Hussein!