The Open Graph protocol enables you to have more control over how third-party sites such as social media platforms handle and display your website content. Open graph meta tags are included on images in your HubSpot blog posts automatically.
You can add an open graph tag to the head HTML of your website page or landing page to ensure your content displays the way you want on other sites.
For detailed instructions about how to edit the head HTML of your page in HubSpot, check out this article.
To implement an open graph meta tag on your image on a HubSpot landing page or website page, you can add the following code snippet to the head HTML of the page:
<meta property="og:image" content="IMG URL"/>
When adding this code, be sure to replace IMG URL with the URL of your file from the File Manager.
Twitter Cards require an additional meta tag in order to display preview content from your landing page or website page. To optimize the way your content displays when shared on Twitter, add the following code snippet to the head HTML of your page:
<meta name="twitter card" content="summary_large_image"/>
You can learn more about the required markup for Twitter Cards in their developer documentation here.