OpenGraph+
Get Started
Chapter 1

Getting Started

Add Open Graph meta tags to any website

Create a connection

  1. Sign in to OpenGraph+
  2. Go to your website’s Meta Tags page
  3. Create a new connection and 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 in your OpenGraph+ dashboard and paste a URL from your site. View your page source and confirm all Open Graph meta tags are present with correct values.