# Open Graph images for WordPress Generate a path-specific HCTI social card for every WordPress post, page, archive, and custom post type. ## Before you begin Create an [OG Image Config](/getting-started/og-images/) for the exact public HTTPS origin of the WordPress site and copy its domain ID. Choose **Page Screenshot** to capture WordPress output or a selected element. Choose **Template Values** to combine your theme’s SEO metadata with an HCTI template. Add PHP customizations in a small site plugin or a child theme’s `functions.php`. Do not edit the parent theme, because a theme update can remove the change. ## Build the HCTI image URL Add this helper and replace `YOUR_DOMAIN_ID`: ```php function mysite_hcti_og_image_url( $existing = '' ) { $request_uri = isset( $_SERVER['REQUEST_URI'] ) ? wp_unslash( $_SERVER['REQUEST_URI'] ) : '/'; $path = wp_parse_url( $request_uri, PHP_URL_PATH ); if ( ! is_string( $path ) || '' === $path ) { $path = '/'; } return 'https://hcti.io/v1/og/YOUR_DOMAIN_ID' . $path; } ``` Parsing only `PHP_URL_PATH` removes tracking and preview query strings. HCTI then visits the same path on the configured WordPress origin. ## Option A: a site without an SEO social-tag plugin If nothing else generates Open Graph or Twitter image tags, print them through `wp_head`: ```php function mysite_print_hcti_og_tags() { $image_url = mysite_hcti_og_image_url(); ?> `, as standard WordPress themes do. ## Option B: Yoast SEO already generates the tags Do not add a duplicate set. Filter Yoast’s existing image values instead: ```php add_filter( 'wpseo_opengraph_image', 'mysite_hcti_og_image_url' ); add_filter( 'wpseo_twitter_image', 'mysite_hcti_og_image_url' ); ``` Yoast’s Open Graph image filter replaces an image only when Yoast would otherwise emit one. Make sure social metadata is enabled and a fallback image is configured. Other SEO plugins have their own filters; use the plugin’s documented image filter rather than the generic `wp_head` block. ## Use post data in template values mode HCTI can map the `og:title`, `og:description`, page title, and description that your SEO plugin already emits. To pass explicit WordPress values, add more tags through `wp_head`: ```php function mysite_print_hcti_template_values() { if ( ! is_singular() ) { return; } $post_id = get_queried_object_id(); ?> ' . "\n"; } } add_action( 'wp_head', 'mysite_print_hcti_screenshot_selector', 6 ); ``` Check that the selector exists on the public page and is not `display: none`. ## Verify the output Clear any WordPress page cache or CDN cache, then use **View Source** on a post, page, archive, and custom post type. Confirm that the URL path is correct and that only one integration controls the social image tags. Test the public URL in the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer). See the WordPress references for the [`wp_head` hook](https://developer.wordpress.org/reference/hooks/wp_head/), [`wp_parse_url()`](https://developer.wordpress.org/reference/functions/wp_parse_url/), and [child themes](https://developer.wordpress.org/themes/advanced-topics/child-themes/). Yoast documents its [Open Graph image filters](https://developer.yoast.com/features/opengraph/api/wpseo-opengraph-images/). [Back to OG Image Configs](/getting-started/og-images/)