HubL in Head (og:image tag)

Developer Support CMS Development
1

I’d like to specify an image in an og:meta tag, by using a HubL variable to reference an image in a custom module already on the page. Has anyone done that successfully?

2

Hi @gtwright,

Please check out our documentation on HubL Variables: Accounts Dashboard | HubSpot

You should be able to create a HubL variable that stores the URL of the image in your custom module as a string, that will get printed into the og:meta tag. I also encourage you to check out the list of HubL supported default variables: HubL variables - HubSpot docs

If the image you want to use is the featured image for a blog post, for example, there already exists a variable for that.

Rami

HubSpot Support

3

Yes, I have used HUBL in the head section to create a toggle for hiding pages from search.

You have to use export_to_template_context=True on modules in the header. Also, you can’t call variables defined in the page template in the header. Everything has to go in the header.

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

{% if widget_data.robots_toggle.value == true %}
<!-- hide from search toggle -->
<meta name="robots" content="noindex, nofollow"/>
{% else %}
<!-- show in search toggle -->
{% endif %}
4

Here’s an example markup for your purpose.

{% image_src "og_image" src='', no_wrapper=True, export_to_template_context=True %}

{% if widget_data.og_image.src %}
<!-- og:image -->
<meta property="og:image" content="{{ widget_data.og_image.src }}" />
{% else %}
<!-- no og:image -->
{% endif %}