×

HubSpot Open Graph Guide

/ CRM, Hubspot / By

HubSpot Open Graph Tags Guide

Using HubSpot together with Open Graph tags lets you fully control how your pages and blog posts appear when shared on social media, so your links look professional, clickable, and aligned with your brand.

Open Graph tags are small pieces of HTML code that tell platforms like Facebook, X (formerly Twitter), and LinkedIn exactly which title, description, and image to display. When you understand how they work, you can fix broken previews, choose the right thumbnail, and increase your click-through rate from every share.

What Are Open Graph Tags?

Open Graph (OG) tags are metadata that sit in the <head> of your page. Social networks read these tags when someone shares a URL, then use them to build the preview card users see in their feeds.

The core Open Graph tags are:

  • og:title — the title of the shared page
  • og:description — a short summary for the preview
  • og:image — the image URL for the preview thumbnail
  • og:url — the canonical URL of the page
  • og:type — the content type (e.g., article, website)

When these tags are missing or misconfigured, networks guess what to show. That can lead to cropped images, outdated titles, or random text pulled from your page.

Why Open Graph Matters for HubSpot Users

If you publish content or landing pages through HubSpot, Open Graph tags directly influence how your campaigns perform on social media. They help you:

  • Control the exact title and description of your shared links
  • Choose a strong, on-brand image to boost clicks
  • Prevent old or incorrect previews from circulating
  • Make A/B testing of messaging on social platforms more reliable

Because HubSpot centralizes your content and campaigns, setting Open Graph metadata correctly at the page level keeps your social sharing consistent across all your channels.

Core Open Graph Tags Explained

Here is an example of Open Graph tags you could place in the <head> section of a page:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Short description of your content." />
<meta property="og:image" content="https://example.com/path/to/image.jpg" />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:type" content="article" />

Each tag serves a specific purpose:

  • Title: Should be clear, specific, and under typical social length limits (roughly 60–70 characters).
  • Description: Briefly explains why the content is worth a click; aim for clarity over keyword stuffing.
  • Image: Use a high-quality image that meets size recommendations for major networks.
  • URL: Points to the canonical version of the page to avoid duplicate previews.
  • Type: Helps networks understand if the link is an article, product, or home page.

How Different Networks Use Open Graph

Most major platforms support Open Graph, but they each add their own nuances.

Facebook and HubSpot Content

Facebook reads Open Graph tags first. If they are missing, it will fall back to guessing based on your HTML title, headings, and images. When sharing a HubSpot blog post or landing page, correct metadata ensures:

  • Your branded title and copy appear instead of random text.
  • Your chosen feature image is shown, properly sized and uncropped.
  • Sharing performance is easier to analyze and optimize over time.

You can test your tags via Facebook’s sharing debugger, which shows exactly what Facebook sees when it fetches your URL.

X (Twitter) and HubSpot Pages

X (formerly Twitter) uses its own Card system but respects Open Graph tags if dedicated Twitter tags are not present. When you share a HubSpot page link, Open Graph values inform the card title, description, and image, especially for summary and large image cards.

While X supports twitter:card and related tags, aligning them with your Open Graph tags keeps your previews consistent across platforms.

LinkedIn and HubSpot Articles

LinkedIn also relies heavily on Open Graph metadata. When team members share HubSpot blog articles or gated content, LinkedIn reads your Open Graph tags to build the post preview, including:

  • Headline (pulled from og:title)
  • Short description (from og:description)
  • Thumbnail image (from og:image)

Because LinkedIn is often used in B2B contexts, a clear title and professional image from your HubSpot content can meaningfully impact lead generation and brand perception.

Step-by-Step: Implementing Open Graph Tags

Use the following process to configure Open Graph metadata for any page or post.

1. Decide the Main Message

Before touching code or settings, decide what you want people to understand the instant they see your preview card. Consider:

  • The audience segment you are targeting
  • The problem your content solves
  • The action you want users to take after clicking

2. Choose the Visual

Pick an image that is clear at small sizes, aligned with your brand, and relevant to your topic. Check recommended dimensions for each platform so your chosen asset works for Facebook, X, and LinkedIn from a single source.

3. Add the Open Graph Tags

Place Open Graph tags in the <head> of your HTML template or configure them through your CMS controls. The exact method varies, but the goal is the same: set unique title, description, and image values for each important page.

4. Validate with Debug Tools

After publishing or updating a page, use platform testing tools to confirm how your preview looks. These tools can:

  • Scrape your URL and display the fetched metadata
  • Show warnings when tags are missing or misformatted
  • Clear cached previews so updates take effect faster

5. Monitor Performance

Track clicks and engagement from social shares in your analytics. If certain posts underperform, consider refining your Open Graph title, description, or image and retesting.

Best Practices for HubSpot and Open Graph

To get the most from your social previews, keep these guidelines in mind:

  • Write human-friendly titles instead of repeating the same keyword.
  • Use concise, benefit-focused descriptions rather than generic summaries.
  • Avoid using the same image for every page; tailor visuals to the content.
  • Ensure your images are properly compressed so previews load quickly.
  • Review your metadata whenever you significantly update a page.

For more in-depth technical information and examples, refer directly to the original resource at this Open Graph tags guide.

Optimizing Your Stack Beyond HubSpot

While Open Graph tags are essential, they are just one part of a modern digital strategy. You can combine structured metadata, clean technical SEO, and marketing automation to build a coherent experience across channels.

If you want expert help aligning your tools, content, and analytics, you can review services from a dedicated optimization partner like Consultevo, which focuses on integrated, data-driven implementations.

When you bring together precise Open Graph tagging, reliable CMS configuration, and a clear measurement plan, every link you publish works harder across social feeds. That consistent presentation builds trust, supports your brand, and helps more of the right visitors reach your site.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`