Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
On your first visit you’ll see the Terms of Service; click Agree & Create Connection, then copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Add all Open Graph meta tags

Add the following to your page’s <head> tag:

<head>
  <!-- ... other meta tags ... -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A brief description of this page">
  <meta property="og:url" content="https://mysite.com/about">
  <meta property="og:site_name" content="My Site">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net/about">
  <meta name="twitter:card" content="summary_large_image">
</head>

Replace https://$OGPLUS_KEY.ogplus.net with your actual connection URL. Replace /about with the path of each page.

Tag reference

Tag	Value
`og:title`	The title of the page as it should appear when shared
`og:description`	A brief summary of the page content
`og:url`	The canonical URL of the page
`og:site_name`	Your website or brand name
`og:type`	`website` for general pages, `article` for blog posts
`og:image`	Your OpenGraph+ connection URL + page path
`twitter:card`	Always `summary_large_image` for large preview cards

Dynamic websites

If your site uses a server-side language, use it to output all tags dynamically.

PHP

<meta property="og:title" content="<?= htmlspecialchars($title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($description) ?>">
<meta property="og:url" content="<?= 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ?>">
<meta property="og:site_name" content="My Site">
<meta property="og:type" content="website">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<?= $_SERVER['REQUEST_URI'] ?>">
<meta name="twitter:card" content="summary_large_image">

Node.js / Express

<meta property="og:title" content="<%= title %>">
<meta property="og:description" content="<%= description %>">
<meta property="og:url" content="<%= req.protocol + '://' + req.get('host') + req.originalUrl %>">
<meta property="og:site_name" content="My Site">
<meta property="og:type" content="website">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net<%= req.path %>">
<meta name="twitter:card" content="summary_large_image">

Python / Flask

<meta property="og:title" content="{{ title }}">
<meta property="og:description" content="{{ description }}">
<meta property="og:url" content="{{ request.url }}">
<meta property="og:site_name" content="My Site">
<meta property="og:type" content="website">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net{{ request.path }}">
<meta name="twitter:card" content="summary_large_image">

Static websites

For static HTML files, hardcode all tags for each page:

<!-- index.html -->
<meta property="og:title" content="My Site - Home">
<meta property="og:description" content="Welcome to My Site">
<meta property="og:url" content="https://mysite.com/">
<meta property="og:site_name" content="My Site">
<meta property="og:type" content="website">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net/">
<meta name="twitter:card" content="summary_large_image">

<!-- about.html -->
<meta property="og:title" content="About - My Site">
<meta property="og:description" content="Learn more about My Site">
<meta property="og:url" content="https://mysite.com/about">
<meta property="og:site_name" content="My Site">
<meta property="og:type" content="website">
<meta property="og:image" content="https://$OGPLUS_KEY.ogplus.net/about">
<meta name="twitter:card" content="summary_large_image">

Verify

Open the preview tool and paste a URL from your site. View your page source and confirm all Open Graph meta tags are present with correct values.

Multiple domains

Running staging and production, subdomains, or several sites under one account? See Multiple domains & environments. For a single site, the connection tag above is all you need.