# Open Graph images for Sitepress Use Sitepress request paths and frontmatter to generate an HCTI social card for every page in a Rails-hosted or compiled static site. ## Before you begin Create an [OG Image Config](/getting-started/og-images/) for the exact HTTPS origin where the Sitepress content is published, then copy the domain ID. Choose **Page Screenshot** to capture each rendered resource or a selected element. Choose **Template Values** to send Sitepress frontmatter into a reusable HCTI template. ## Add the tags to a shared ERB layout In the layout that renders your document ``, build the HCTI URL from the current resource’s request path: ```erb <% hcti_path = current_page.request_path.to_s %> <% hcti_path = "/#{hcti_path}" unless hcti_path.start_with?("/") %> <% hcti_image = "https://hcti.io/v1/og/YOUR_DOMAIN_ID#{hcti_path}" %> ``` Replace `YOUR_DOMAIN_ID`. For Sitepress mounted below a Rails scope, confirm that `hcti_path` includes the public mount path. If it only contains the resource-relative path, prepend the mount prefix before constructing the URL. If the Rails application or another layout helper already emits social-image metadata, change that integration instead of adding duplicate tags. ## Use Sitepress frontmatter as template values Add fields to a page: ```yaml --- title: A practical guide to social cards description: Build a unique preview for every Sitepress page. author: Sam Rivera accent: "#c2410c" og_content_version: 5 --- ``` Read them from `current_page.data` in the layout: ```erb <% if current_page.data["title"] %> "> <% end %> <% if current_page.data["description"] %> "> <% end %> <% if current_page.data["author"] %> "> <% end %> <% if current_page.data["accent"] %> "> <% end %> <% if current_page.data["og_content_version"] %> "> <% end %> ``` The names after `html:tv:` must match the selected HCTI template’s variables. You can instead map the site’s existing title, description, or Open Graph metadata in the HCTI dashboard. ## Configure page screenshot mode Add a selector to frontmatter: ```yaml og_selector: "#social-card" ``` Then emit it from the shared layout: ```erb <% if current_page.data["og_selector"] %> "> <% end %> ``` The selected element must exist in the rendered public page and cannot be `display: none`. ## Compile and verify Compile the site or run the Rails application, then inspect the generated HTML or use **View Source**. Test both root-mounted content and any Sitepress site mounted under a Rails scope. The public page path and HCTI path must match exactly. Use the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer) to check the final metadata and platform-specific results. See the [Sitepress repository and documentation](https://github.com/sitepress/sitepress) for current frontmatter, resource, Rails-mounting, and compilation behavior. [Back to OG Image Configs](/getting-started/og-images/)