Overwrite/replace the auto-generated Open Graph Tags (OG Tags) on HubSpot

Nagashree · ‎Jul 9, 2022

Hello Everyone,

I would like to change the image and title of our social media post-sharing for a few web pages/blogs. Is there a way to overwrite or replace HubSpot's current auto-generated open graph tags (OG tags)?

Could you please let me know if you have any other alternative ideas to implement?

Thank you in advance!

Anton · ‎Jul 11, 2022

Hi @Nagashree,

short answer: yes there is a way.

But for best solution you should have a developer to your side.

My personal approach is always:

- open the base layout of your theme. (most likely base.html)

- add a new "building block" like this after the {{standard_header_includes}}-tag to the <head>-tag

{% block head_tag %}
{% endblock head_tag %}

- open your desired template you'd like to change the OG infos of and write it like this

{% block head_tag%}
<meta property="og:title" content="{{content.name}}" />
<meta property="og:description" content="{{content.post_body|striptags|truncate(160,'...', true)" />
<meta property="og:image" content="{{content.featured_image}}" />
{% endblock head_tag %}

This Hubl codes will get all the informations of the blog posts or pages. If you'd like to change them manually you should consider a custom module for this.

If you can wait - I can create such module for my freebieFriday this week. Then you could download it from my github repo.

best,

Anton

View solution in original post

Anton · ‎Jul 11, 2022

Hi @Nagashree,

short answer: yes there is a way.

But for best solution you should have a developer to your side.

My personal approach is always:

- open the base layout of your theme. (most likely base.html)

- add a new "building block" like this after the {{standard_header_includes}}-tag to the <head>-tag

{% block head_tag %}
{% endblock head_tag %}

- open your desired template you'd like to change the OG infos of and write it like this

{% block head_tag%}
<meta property="og:title" content="{{content.name}}" />
<meta property="og:description" content="{{content.post_body|striptags|truncate(160,'...', true)" />
<meta property="og:image" content="{{content.featured_image}}" />
{% endblock head_tag %}

This Hubl codes will get all the informations of the blog posts or pages. If you'd like to change them manually you should consider a custom module for this.

If you can wait - I can create such module for my freebieFriday this week. Then you could download it from my github repo.

best,

Anton

Jaycee_Lewis · ‎Jul 12, 2022

Thank you, @Anton 🙌

Jaycee Lewis

Developer Community Manager

Community | HubSpot

CMS Development