# Sitepress ## 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`. ## Find your layout Sitepress layouts live in `app/views/layouts/` alongside your Rails layouts. If your site uses a shared layout like `application.html.erb`, that's where you'll add Open Graph meta tags so every page inherits them. ## Add Open Graph meta tags Add the following meta tags to your layout's ``. These control how your pages appear when shared on Twitter, Slack, LinkedIn, and other platforms. ```erb "> "> <%= yield %> ``` Replace `https://$OGPLUS_KEY.ogplus.net` with your connection URL, and `"My Site"` with your actual site name. ### What each tag does | Tag | Purpose | |-----|---------| | `og:title` | The title shown in the link preview | | `og:description` | The description shown below the title | | `og:url` | The canonical URL of the page | | `og:site_name` | Your website's name | | `og:type` | Content type (`website`, `article`, `product`) | | `og:image` | The social card image (powered by OpenGraph+) | | `twitter:card` | Tells Twitter to show a large image card | ## Set dynamic tags from frontmatter Sitepress pages define their metadata via YAML frontmatter. The layout picks up these values automatically through `current_page.data`: ```markdown --- title: How to Build a Site with Sitepress description: A step-by-step guide to building a fast content site. --- Your page content here. ``` You can also set tags from a Sitepress layout so they apply to every page that uses it: ```erb <%# app/content/layouts/blog.html.erb %> <% content_for(:og_type) { "article" } %> <%= yield %> ``` Then use `content_for` in the application layout to pick it up: ```erb "> ``` ## Verify Start your development server and view the page source. Check that all `og:` meta tags are present with the correct values. Open the preview tool in your OpenGraph+ dashboard and paste a URL from your site to see the social card image. ## Customize Sitepress runs on Rails, so all customization options from the [Rails customize guide](/docs/rails/customize) apply directly. This page shows the same techniques with Sitepress-specific file paths. ## Meta tags Add these to your layout's `` alongside your `og:image` tag. They're all optional. ```erb <%# Render at 800px wide instead of the default %> <%# Only capture this element instead of the full page %> <%# Inject inline styles on the captured element %> ``` 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 /* app/assets/stylesheets/application.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 `