# Any Website ## Getting Started ## 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 `` tag: ```html ``` 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 ```php ``` ### Node.js / Express ```html ``` ### Python / Flask ```html ``` ## Static websites For static HTML files, hardcode all tags for each page: ```html ``` ## 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. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your HTML and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page is a quick-start summary. ## Meta tags Add these to your page's `` alongside your `og:image` tag. They're all optional. ```html ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site. ```css html[data-ogplus] { nav { display: none; } footer { display: none; } .hero { padding: 60px; } } ``` If you're using Tailwind, there's a plugin that gives you `ogplus:` variants like `ogplus:hidden` and `ogplus-twitter:bg-sky-500`. See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `