Menu
Sign up
HubSpot

OG images in
HubSpot

One HubL line in the blog post template, or Head HTML on a single page.

Where it plugs in

HubSpot sets the title, meta description and featured image of blog posts automatically, and the featured image is what a shared post shows. To give every post its own generated card, edit the blog post template of a child theme in the Design Manager: templates are HubL, so `content.absolute_url` (the full URL of the page or post) goes through the `urlencode` filter into the auto-OG address, next to `standard_header_includes` in the head. Without template access, HubSpot's own troubleshooting article shows the other route: open the page or post, Settings → Advanced, and paste an og:image tag into the Head HTML field — one tag per page, with that page's address after ?url=. Allow the domain your pages are published on in the dashboard first.

Blog post template (Design Manager), in the head

{# Blog post template of a child theme (Design Manager), in the <head>
   next to {{ standard_header_includes }}. HubL fills in each post's own
   address; urlencode makes it safe after ?url=. #}
{% set og_card = 'https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=' ~ (content.absolute_url|urlencode) %}
<meta property="og:image" content="{{ og_card }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

<!-- A single page or post without template access: the editor's
     Settings → Advanced → Head HTML, with that page's address
     URL-encoded after ?url=
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https%3A%2F%2Fwww.your-site.com%2Fpricing">
-->
The trap

HubSpot warns that a meta tag should occur once: with several og:image tags, networks may pick the wrong one. Blog posts get one from the featured image automatically, so after adding yours, open a published post's source and check that only one og:image remains — if the featured image's tag is still there, turn the post's featured image off or remove it from the template, and check again.

How the image URL works

Nothing in your site calls an API: the crawler that reads the tag requests the image URL, and the first request reads the page's title, description and image and renders the card. Later requests get the same file. Only pages on the domains you allowed in the dashboard get an image — any other address answers 403 — so the URL holds no key. We re-read a page at most every 60 minutes, so a new title shows up within that time.

OG images without code

What it costs

100 images a month free, then $9 for 2,000. A new card uses one image of your quota; the card is cached by what is on it, so an unchanged page is never charged twice, also when shared with ?utm_source=.

Other frameworks