# Connect OpenGraph+ to Your Website OpenGraph+ generates social card images for your website. When someone shares a link on Twitter, LinkedIn, Slack, or iMessage, the page gets a rich visual preview instead of a bare URL. Follow these steps in order. Do not skip ahead. ## Step 1: Install the CLI ```bash which ogplus ``` If `ogplus` is found, skip to Step 2. If not, install it: ```bash curl -sSL https://ogplus.terminalwire.sh/ | bash ``` If `ogplus` is not found after installation, add it to your PATH: ```bash export PATH="$HOME/.terminalwire/bin:$PATH" ``` ## Step 2: Login ```bash ogplus login ``` This opens a browser window for the user to authenticate. Wait for them to complete login before continuing. ## Step 3: Create a Website Ask the user for their website's domain name, then create the site: ```bash ogplus site create DOMAIN ``` Replace `DOMAIN` with the actual domain (e.g. `example.com`). ## Step 4: Get the Connection URL ```bash ogplus site connections DOMAIN ``` The connection URL looks like `https://$OGPLUS_KEY.ogplus.net`. Save this value — you'll use it in the meta tags. If the CLI command doesn't return a connection URL, ask the user for it. They can find it in their OpenGraph+ dashboard under **Meta Tags**. ## Step 5: Detect the Framework Identify the project's framework by checking for these files in the project root: | Check for | Framework | |-----------|-----------| | `Gemfile` with `rails` | Rails | | `Gemfile` with `sitepress` | Sitepress | | `package.json` with `"next"` | Next.js | | `package.json` with `"nuxt"` | Nuxt | | `package.json` with `"astro"` | Astro | | `requirements.txt` or `manage.py` | Django | | `composer.json` with `"laravel/framework"` | Laravel | | `_config.yml` with `jekyll` | Jekyll | | `Gemfile` with `middleman` | Middleman | | `wp-content/` directory or `functions.php` | WordPress | | `.html` files only | Static HTML | ## Step 6: Add Meta Tags Add the meta tags inside `` in your main layout template. Every page must have these tags rendered in the initial HTML response (not injected by JavaScript — social crawlers only see server-rendered HTML). The `og:image` URL is your connection URL followed by the current page's path. Use the correct template syntax for your framework: ### WordPress ```php ``` ### Shopify ```liquid ``` ### Astro ```jsx ``` ### Jekyll ```html ``` ### Middleman ```erb ``` ### Next.js ```js export const metadata = { openGraph: { images: [`https://$OGPLUS_KEY.ogplus.net${pathname}`], }, twitter: { card: 'summary_large_image', }, } ``` ### Nuxt ```js const route = useRoute() useHead({ meta: [ { property: 'og:image', content: `https://$OGPLUS_KEY.ogplus.net${route.path}` }, { name: 'twitter:card', content: 'summary_large_image' } ] }) ``` ### Rails ```erb ``` ### Laravel ```html ``` ### Django ```html ``` ### Static HTML Hardcode the path for each page: ```html ``` Replace `https://$OGPLUS_KEY.ogplus.net` with the actual connection URL from Step 4. ## Step 7: Verify 1. Start the development server 2. Open any page in the browser 3. View the page source (not DevTools — actual page source) 4. Confirm these tags are present inside ``: - `og:image` with a URL starting with your connection URL and ending with the current page's path - `twitter:card` with value `summary_large_image` 5. Navigate to a different page and confirm the `og:image` path changes to match Tell the user to open the preview tool in their OpenGraph+ dashboard and paste a URL from their site to see the social card. ## Step 8: Customize (Optional) The default social card renders the page as-is. For advanced customization like styling, templates, and caching, read the full guide for your framework: - [Astro](https://opengraphplus.com/docs/astro.md) - [Any Website](https://opengraphplus.com/docs/any-website.md) - [Next.js](https://opengraphplus.com/docs/nextjs.md) - [Wix](https://opengraphplus.com/docs/wix.md) - [Shopify](https://opengraphplus.com/docs/shopify.md) - [Django](https://opengraphplus.com/docs/django.md) - [Tailwind CSS](https://opengraphplus.com/docs/tailwind.md) - [Rails](https://opengraphplus.com/docs/rails.md) - [Middleman](https://opengraphplus.com/docs/middleman.md) - [Nuxt](https://opengraphplus.com/docs/nuxt.md) - [Laravel](https://opengraphplus.com/docs/laravel.md) - [HTML, CSS, & HTTP](https://opengraphplus.com/docs/html-css.md) - [Sitepress](https://opengraphplus.com/docs/sitepress.md) - [Webflow](https://opengraphplus.com/docs/webflow.md) - [Jekyll](https://opengraphplus.com/docs/jekyll.md) - [WordPress](https://opengraphplus.com/docs/wordpress.md)