Adding Open Graph Images to Landing Pages

SOLVE
Highlighted
Regular Contributor

Hi All

 

Our client needs to be able to add og:image metadata to the header of their landing pages in order to ensure the correct images are pulled in by social networks when they are sharing their landing pages.

 

I am trying to avoid getting them to paste a meta tag into the header of each page as there is a large opportunity for human error so I want to find a way to give them an image module on the page that they can use to select an image using the normal HubSpot controls, and then programatically add the meta tag to the header using the value from the image module.

 

So in my template, I have added a CustomHubL module, then inside that I have the following HubL:

{% image_src 'og_image' label='Open Graph Image' src='http://example.com/my-image.jpg', no_wrapper=True, export_to_template_context=True %}

Now when I edit my page, I get my image module, but it is not output on the page due to export_to_template_context. 

 

My next step was to edit the Head on my template to add the following:

<meta property='og:image' content="{{ widget_data.og_image.src }}"/>

However whenever I view the page, I get a blank content parameter in the head. I am suspecting that perhaps you cannot access widget_data from within the head of the template? Does anyone know if this is true, or am I doing something wrong?

 

Any advice would be greatly appreciated.

 

Many thanks
David

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Employee

Hey @dessery I think you're close with what you currently have and might just need to adjust your code a bit. Here is a working example of what you're trying to do if you'd like to use this. Code for the image: 

 

{% image "og_image" label='Select a social sharing image', src='default-image-url.jpg', export_to_template_context=True %}

 

and then this in the head HTML: 

 

<meta property="og:image" content="{{content.widgets.og_image.body.src}}" />

 

I hope that helps. Let me know if you run into any issues with that!

 

8 Replies 8
Community Manager

Hey @dessery welcome to the Community and thanks for all you contrubtions elsehwere in the design forums, your knowledge sharing so far has been incredibly valuable!

 

This would not be my personal area of expertise, but I have rallied some of our experts here in the Community to take a look. If you could share links to / screenshots of the pages you are working with, where possible, it'll help members to further troubleshoot. Stay tuned! Smiley Happy

@stefen @Jsum @AngelaHicks @ndwilliams3 @DaniellePeters @JasonRosa have any of you worked on a similar issue in your own work / with a client before?

Reply
0 Upvotes
HubSpot Employee

Hey @dessery I think you're close with what you currently have and might just need to adjust your code a bit. Here is a working example of what you're trying to do if you'd like to use this. Code for the image: 

 

{% image "og_image" label='Select a social sharing image', src='default-image-url.jpg', export_to_template_context=True %}

 

and then this in the head HTML: 

 

<meta property="og:image" content="{{content.widgets.og_image.body.src}}" />

 

I hope that helps. Let me know if you run into any issues with that!

 

Regular Contributor

Hi Guys

 

Thank you so much for your responses. I went with @JasonRosa method and it worked a treat.

 

That is really useful, thank you all.

 

@roisinkirby your welcome, happy to help out as my schedule permits Smiley Wink

 

All the best

David

Regular Contributor

Hi @JasonRosa

 

I have just been thinking on this a little more, we actually have an image field already on the page, so by adding the additional field to select the og_image, we are creating more work for the user to have to select the image twice, it would be nice to be able to just pull from the image that is already in the page.

 

With the og_image field I added though, I knew the unique ID for that for the field, however the original image I have on the page was added through the design manager to so I do know know its ID to target it within my HubL when I output it in my header. Is there a way to find this out at all?

 

I hope that makes sense.


All the best

David

Reply
0 Upvotes
HubSpot Employee

Hey David, 

 

Could you possibly send me over the link to the page that you're working on so I can take a closer look. I'm guessing I can find it by using Developer Info (more info on that here: http://designers.hubspot.com/docs/hubl/how-to-use-developer-info-on-cos-pages). 

 

Best, 

Jason 

Regular Contributor

Hi @JasonRosa

 

I had no idea that option was there, that is insanely useful to know!! Thanks very much!! I have found my module ID and updated my template to automatically pull from the image already on the page.

 

All the best

David

Regular Advisor

You have to add everything in the  "Additional HTML Head Markup for this Layout" section for it to work. Add all this there.

{% image_src 'og_image' label='Open Graph Image' src='http://example.com/my-image.jpg', no_wrapper=True, export_to_template_context=True %}

<meta property='og:image' content="{{ widget_data.og_image.src }}"/>

 

Regular Advisor

I just came up with another workaround as I wanted a global module that I could reuse for header content and keep everything within the template.

 

Since the require_css function just adds code to the header, i can be used for anything that needs to go in the header all while keeping the code within the template. Here's my code for my robots toggle.

 

{% boolean "robots_toggle" label='Hide from Search Engines', value=False, no_wrapper=True, export_to_template_context=True %}

{% require_css %} 
{% if widget_data.robots_toggle.value == True %}
<meta name="robots" contents="noindex,nofollow"/>
{% else %}
<!-- visible -->
{% endif %}
{% end_require_css %}