# Open Graph images for Jekyll Use a shared Jekyll layout to give every generated page and post an HCTI social card with the matching path. ## Before you begin Create an [OG Image Config](/getting-started/og-images/) for your deployed site’s exact HTTPS origin, then copy its domain ID. * Use **Page Screenshot** to capture the rendered Jekyll page or a dedicated card element. * Use **Template Values** to render front matter inside an HCTI template. ## Add a reusable head include Create `_includes/hcti-og-image.html` with this Liquid: ```liquid {% assign hcti_path = page.url | relative_url %} {% assign hcti_og_image = 'https://hcti.io/v1/og/YOUR_DOMAIN_ID' | append: hcti_path %} ``` Replace `YOUR_DOMAIN_ID`. The `relative_url` filter preserves a configured `baseurl`, so a deployed page at `/docs/start/` maps to the same source path. Include it inside the `` of the layout used by your pages and posts: ```liquid {% include hcti-og-image.html %} ``` If `jekyll-seo-tag`, a theme, or another plugin already emits `og:image` or `twitter:image`, configure or change that output instead of leaving duplicate image tags. ## Use front matter for per-page controls Add optional fields to a page or post: ```yaml --- title: A practical guide to social cards description: Build a unique social preview for every Jekyll page. og_selector: "#social-card" og_content_version: 4 accent: "#0f766e" --- ``` Then extend the include. ### Page screenshot mode ```liquid {% if page.og_selector %} {% endif %} {% if page.og_content_version %} {% endif %} ``` ### Template values mode ```liquid {% if page.title %} {% endif %} {% if page.description %} {% endif %} {% if page.accent %} {% endif %} ``` The variable names after `html:tv:` must match your HCTI template. You can also map the title tag, description, `og:title`, or `og:description` in the dashboard instead of adding explicit tags. ## Build and verify Build the site, then inspect a generated HTML file in `_site` and a deployed page with **View Source**. Confirm that: * The HCTI URL contains the same path as the deployed page, including `baseurl` when used. * Liquid placeholders have been replaced with real values. * Only the intended social-image tags remain. Test the deployed URL in the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer). See Jekyll’s documentation for [front matter](https://jekyllrb.com/docs/front-matter/), [includes](https://jekyllrb.com/docs/includes/), and [layouts](https://jekyllrb.com/docs/layouts/). [Back to OG Image Configs](/getting-started/og-images/)