# HTML, CSS, & HTTP ## Getting Started ## 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: ```sh curl -sSL https://ogplus.terminalwire.sh/ | bash ``` ## Generate meta tags for each page Run the CLI to generate meta tags for a page: ```sh ogplus meta $OGPLUS__WEBSITE_HOST ``` Copy the output into your page's ``: ```html ``` Repeat for each page on your site: ```sh # 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. ## Rendering When a social platform requests your page's `og:image`, OpenGraph+ loads your page in a headless browser and captures it as an image. ## The render process 1. Social platform (LinkedIn, Twitter, etc.) requests your page 2. Your server returns HTML with `og:image` pointing to OpenGraph+ 3. Platform fetches the image URL 4. OpenGraph+ loads your page in a headless browser 5. OpenGraph+ injects `data-ogplus` on `` 6. OpenGraph+ checks for templates or applies CSS styling 7. OpenGraph+ captures the viewport as an image 8. Image is returned to the social platform ## The data attribute When rendering, OpenGraph+ adds `data-ogplus` to your `` element: ```html ``` This attribute is your hook for styling. Any CSS that targets `[data-ogplus]` only applies during social card rendering—not to regular visitors. ## Rendering modes OpenGraph+ supports three rendering modes, checked in this order: 1. **Templates** — Custom layouts using `