Learn how to generate Facebook OpenGraph and Twitter Cards manually in WordPress without plugins.

It is important to ensure that before adding the PHP code to generate the Facebook OpenGraph and Twitter Card, you have already included the Title, Canonical, and Meta Description tags in the ‘head’ section of your site.

Why Facebook OpenGraph and Twitter Cards Matter for Your Website

Facebook OpenGraph and Twitter Cards are essential tools for optimizing how your website’s content appears when shared on social media. They ensure your links display rich previews with images, titles, and descriptions that catch the viewer’s attention, ultimately improving engagement rates and driving more traffic to your site. Without them, your shared links might look plain or unprofessional, negatively impacting the credibility of your website.

Common Issues When FB OpenGraph and Twitter Cards Are Missing in the <head>

You’ve probably noticed some issues when sharing a post from a WordPress site on Facebook or Twitter. In some cases, for example, the featured image might not appear at all. Other times, the shared post’s appearance on Facebook might not match what you intended. These issues often arise because the necessary OpenGraph and Twitter Card meta tags are missing or incorrectly configured. Adding these meta tags manually can solve these problems and ensure that your posts are displayed correctly and attractively on social media.

How to Generate Facebook OpenGraph in WordPress Without Plugins

PHP code to use in Frontpage template or

'head'
section for Frontpage:

<?php
if (is_front_page() ) { ?>
<meta property="og:title" content="<?php echo get_bloginfo('name'); ?>" />
<meta property="og:url" content="<?php echo home_url('/'); ?>" />
<meta property="og:description" content="Enter website description here..." />
<meta property="og:image" content="https://example.com/img-url.png" />
<meta property="og:type" content="website" />
<?php } ?>

 

PHP codes to use in Single Post  template or

'head'
section for Single Post/Page:

Code 1:

<?php
// Open Graph (single posts, pages)
if (is_singular(array('post', 'page')) && !is_front_page() && !is_home()) { // Check for both posts and pages
global $post;
$og_desc = apply_filters('the_content', $post->post_content);
$og_desc = strip_tags($og_desc);
$og_desc = strip_shortcodes($og_desc);
$og_desc = str_replace(array("\n", "\r", "\t"), ' ', $og_desc);
$og_desc = substr($og_desc, 0, 300); // Shorten description to 300 characters
}
?>

Code 2:

<?php
if ( is_single() ) { ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php echo $og_desc; ?>" />
<meta property="og:image" content="<?php if ( has_post_thumbnail() ) {
$featured_image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
echo $featured_image_url;
} else {
echo 'https://example.com/default-image.png'; // Default image if none is set
} ?>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />
<meta property="og:locale" content="<?php echo get_locale(); ?>" />
<?php } ?>

How to Generate Twitter Cards in WordPress Without Plugins

PHP code to use in Frontpage template or

'head'
section for Frontpage:

<?php
if (is_front_page() ) { ?>
<meta name="twitter:title" content="<?php echo get_bloginfo('name'); ?>" />
<meta name="twitter:url" content="<?php echo home_url('/'); ?>" />
<meta name="twitter:description" content="Enter website description here..." />
<meta name="twitter:image" content="https://example.com/img-url.png" />
<meta name="twitter:card" content="summary_large_image" />
<?php } ?>

 

PHP codes to use in Single Post  template or

'head'
section for Single Post/Page:

Code 1:

<?php // Twitter Card (single posts, pages)
if (is_singular(array('post', 'page')) && !is_front_page() && !is_home()) { // Check for both posts and pages
global $post; $twitter_desc = apply_filters('the_content', $post->post_content);
$twitter_desc = strip_tags($twitter_desc);
$twitter_desc = strip_shortcodes($twitter_desc);
$twitter_desc = str_replace(array("\n", "\r", "\t"), ' ', $twitter_desc);
$twitter_desc = substr($twitter_desc, 0, 200); // Shorten description to 200 characters
} ?>

 

Code 2:

<?php
if ( is_single() ) { ?>
<meta name="twitter:title" content="<?php the_title(); ?>" />
<meta name="twitter:url" content="<?php the_permalink(); ?>" />
<meta name="twitter:description" content="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" content="<?php if ( has_post_thumbnail() ) {
$featured_image_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
echo $featured_image_url;
} else {
echo 'https://example.com/default-image.png'; // Default image if none is set
} ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@YourTwitterHandle" />
<?php } ?>

 

Final Thought:

We believe these codes work efficiently without putting unnecessary load on the server. However, if:

  • You make changes to the server,
  • Social networks update their rules,

In these cases, additional PHP knowledge may be required to avoid potential errors.

In such cases, we recommend using an SEO or social plugin to generate Facebook OpenGraph and Twitter Card tags, as they will handle any future updates and minimize the risk of errors.