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 with --tags to generate the full meta tag block for a page on your site:

ogplus meta --tags https://example.com

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

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

Without --tags, the command prints just the og:image URL.

Repeat for each page on your site:

# Adjust the paths to your site's pages
ogplus meta --tags https://example.com/about
ogplus meta --tags https://example.com/contact
ogplus meta --tags https://example.com/pricing
ogplus meta --tags https://example.com/blog
ogplus meta --tags https://example.com/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.

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.

Automatic Open Graph for your Tailwind CSS app

Set up automatic Open Graph tags in under 10 minutes.

Agents welcomeSet up OpenGraph+ on this site. Fetch https://opengraphplus.com/connect.txt and follow it.