How to Add Open Graph and Twitter Cards without a Plugin

This function is intended to add Open Graph tags and Twitter Card tags to the section of a WordPress post or page.

These tags are used to provide metadata about the content of the page when it is shared on social media platforms like Facebook, Twitter, and LinkedIn.

How to Add Open Graph and Twitter Cards without a Plugin

function add_open_graph_tags() {
  if (is_single() || is_page()) {
    global $post;
    setup_postdata($post);

    // Custom function to get the excerpt without the "Read more" link
    function get_excerpt_without_read_more() {
      global $post;
      $excerpt = get_the_content();
      $excerpt = preg_replace(" (\[.*?\])",'',$excerpt);
      $excerpt = strip_shortcodes($excerpt);
      $excerpt = strip_tags($excerpt);
      $excerpt = substr($excerpt, 0, 200);
      $excerpt = substr($excerpt, 0, strripos($excerpt, " "));
      $excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
      return $excerpt;
    }

    // Open Graph tags
    echo '<meta property="og:title" content="' . get_the_title() . '"/>';
    echo '<meta property="og:type" content="article"/>';
    echo '<meta property="og:url" content="' . get_the_permalink() . '"/>';
    echo '<meta property="og:description" content="' . get_excerpt_without_read_more() . '"/>';
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta property="og:image" content="' . esc_attr($thumbnail_src[0]) . '"/>';
    }

    // Twitter Card tags
    echo '<meta name="twitter:card" content="summary_large_image">';
    echo '<meta name="twitter:title" content="' . get_the_title() . '">';
    echo '<meta name="twitter:description" content="' . get_excerpt_without_read_more() . '">';
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta name="twitter:image" content="' . esc_attr($thumbnail_src[0]) . '">';
    }
  }
}
add_action('wp_head', 'add_open_graph_tags');

If you want each of the outputs in its own line in the page source code, use this function instead.

function add_open_graph_tags() {
  if (is_single() || is_page()) {
    global $post;
    setup_postdata($post);

    // Custom function to get the excerpt without the "Read more" link
    function get_excerpt_without_read_more() {
      global $post;
      $excerpt = get_the_content();
      $excerpt = preg_replace(" (\[.*?\])",'',$excerpt);
      $excerpt = strip_shortcodes($excerpt);
      $excerpt = strip_tags($excerpt);
      $excerpt = substr($excerpt, 0, 200);
      $excerpt = substr($excerpt, 0, strripos($excerpt, " "));
      $excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
      return $excerpt;
    }

    // Open Graph tags
    echo '<meta property="og:title" content="' . get_the_title() . '"/>' . "\n";
    echo '<meta property="og:type" content="article"/>' . "\n";
    echo '<meta property="og:url" content="' . get_the_permalink() . '"/>' . "\n";
    echo '<meta property="og:description" content="' . get_excerpt_without_read_more() . '"/>' . "\n";
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta property="og:image" content="' . esc_attr($thumbnail_src[0]) . '"/>' . "\n";
    }

    // Twitter Card tags
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    echo '<meta name="twitter:title" content="' . get_the_title() . '">' . "\n";
    echo '<meta name="twitter:description" content="' . get_excerpt_without_read_more() . '">' . "\n";
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta name="twitter:image" content="' . esc_attr($thumbnail_src[0]) . '">' . "\n";
    }
  }
}
add_action('wp_head', 'add_open_graph_tags');

If you are using custom fields to add meta descriptions as explained in my posts about how to add meta titles and meta descriptions without a plugin, you might want to use this code:

function add_open_graph_tags() {
  if (is_single() || is_page()) {
    global $post;
    setup_postdata($post);

    function get_description() {
      global $post;

      // Check if the 'meta-description' custom field exists
      $meta_description = get_post_meta($post->ID, 'meta_description', true);
      if ($meta_description) {
        return $meta_description;
      }

      // If the 'meta-description' custom field does not exist, get the excerpt from the content
      $excerpt = get_the_content();
      $excerpt = preg_replace(" (\[.*?\])",'',$excerpt);
      $excerpt = strip_shortcodes($excerpt);
      $excerpt = strip_tags($excerpt);
      $excerpt = substr($excerpt, 0, 200);
      $excerpt = substr($excerpt, 0, strripos($excerpt, " "));
      $excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
      return $excerpt;
    }

    // Open Graph tags
    echo '<meta property="og:title" content="' . get_the_title() . '"/>' . "\n";
    echo '<meta property="og:type" content="article"/>' . "\n";
    echo '<meta property="og:url" content="' . get_the_permalink() . '"/>' . "\n";
    echo '<meta property="og:description" content="' . get_description() . '"/>' . "\n";
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta property="og:image" content="' . esc_attr($thumbnail_src[0]) . '"/>' . "\n";
    }

    // Twitter Card tags
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    echo '<meta name="twitter:title" content="' . get_the_title() . '">' . "\n";
    echo '<meta name="twitter:description" content="' . get_description() . '">' . "\n";
    if (has_post_thumbnail()) {
      $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
      echo '<meta name="twitter:image" content="' . esc_attr($thumbnail_src[0]) . '">' . "\n";
    }
  }
}
add_action('wp_head', 'add_open_graph_tags');

---