Chapter 1

Getting Started

Add Open Graph meta tags to your Tailwind site

Static sites

OpenGraph+ works best with dynamic frameworks like Rails, Django, or Next.js where meta tags are generated per-request. For static sites, you’ll need to generate and paste meta tags for each page.

Install the CLI

Install the OpenGraph+ CLI from your terminal:

curl -sSL https://ogplus.terminalwire.sh/ | bash

Generate meta tags for each page

Run the CLI to generate meta tags for a page:

ogplus meta $OGPLUS__WEBSITE_HOST

Copy the output into your page’s <head>:

<html>
  <head>
    <meta property="og:title" content="...">
    <meta property="og:image" content="...">
    <!-- ... other tags -->
  </head>
</html>

Repeat for each page on your site:

# These pages might not exist on your site
ogplus meta $OGPLUS__WEBSITE_HOST/about
ogplus meta $OGPLUS__WEBSITE_HOST/contact
ogplus meta $OGPLUS__WEBSITE_HOST/pricing
ogplus meta $OGPLUS__WEBSITE_HOST/blog
ogplus meta $OGPLUS__WEBSITE_HOST/blog/hello-world

This manual process is required for static sites. For a better experience, consider using a dynamic framework like Rails, Django, or Next.js where meta tags are generated automatically per-request.

Publish and verify

Publish your site, then use the preview tool to verify your social cards render correctly.