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');
More Code Snippets
These are some posts that you might want to check before you leave
- Meta Title and Meta Description Without a Plugin
- How to Add Article Schema without a Plugin
- How to Add Breadcrumbs Schema without a plugin
- How to Customize WordPress Native Sitemaps
- How to Redirect Author Pages in WordPress
- How to Stop WordPress From Guessing URLs
- Managing your Site Disavow File