CMS Development

gtwright
Participant

HubL in Head (og:image tag)

SOLVE

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?

0 Upvotes
3 Accepted solutions
relabidin
Solution
HubSpot Alumni
HubSpot Alumni

HubL in Head (og:image tag)

SOLVE

Hi @gtwright,

 

Please check out our documentation on HubL Variables: http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax

 

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: http://designers.hubspot.com/docs/hubl/hubl-supported-variables 

 

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

 

 

View solution in original post

0 Upvotes
ndwilliams3
Solution
Key Advisor

HubL in Head (og:image tag)

SOLVE

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 %}

View solution in original post

0 Upvotes
ndwilliams3
Solution
Key Advisor

HubL in Head (og:image tag)

SOLVE

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 %}  

 

View solution in original post

0 Upvotes
3 Replies 3
ndwilliams3
Solution
Key Advisor

HubL in Head (og:image tag)

SOLVE

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 %}
0 Upvotes
ndwilliams3
Solution
Key Advisor

HubL in Head (og:image tag)

SOLVE

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 %}  

 

0 Upvotes
relabidin
Solution
HubSpot Alumni
HubSpot Alumni

HubL in Head (og:image tag)

SOLVE

Hi @gtwright,

 

Please check out our documentation on HubL Variables: http://designers.hubspot.com/docs/hubl/hubl-variables-and-macros-syntax

 

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: http://designers.hubspot.com/docs/hubl/hubl-supported-variables 

 

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

 

 

0 Upvotes