WordPress dynamically generates the title of your pages, as well as other meta tags which are then displayed to your users as well as search engines.
The number of meta tags is, however, limited. To add additional social meta tags to the default HTML5 page, such as Facebook’s Open Graph so search engines can better understand your website’s content, you can use the code below. The code below should be used in a WordPress child theme.
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<meta property="fb:app_id" content="713777305326587" />
<meta property="fb:admins" content="1626522259" />
<?php if (is_single()) { ?>
<!-- Open Graph -->
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
<!-- Schema.org -->
<meta itemprop="name" content="<?php single_post_title(''); ?>">
<meta itemprop="description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>">
<meta itemprop="image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>">
<!-- Twitter Cards -->
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@ThomasVanhoutte">
<meta property="twitter:title" content="<?php single_post_title(''); ?>">
<meta property="twitter:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>">
<meta property="twitter:creator" content="@ThomasVanhoutte">
<meta property="twitter:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>">
<meta property="twitter:url" content="<?php the_permalink() ?>" />
<meta property="twitter:domain" content="Thomas' website">
<?php } else { ?>
<!-- Open Graph -->
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/apple-touch-icon-152x152.png" />
<!-- Schema.org -->
<meta itemprop="name" content="<?php bloginfo('name'); ?>">
<meta itemprop="description" content="<?php bloginfo('description'); ?>">
<meta itemprop="image" content="/apple-touch-icon-152x152.png">
<!-- Twitter Cards -->
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@ThomasVanhoutte">
<meta property="twitter:title" content="<?php bloginfo('name'); ?>">
<meta property="twitter:description" content="<?php bloginfo('description'); ?>">
<meta property="twitter:creator" content="@ThomasVanhoutte">
<meta property="twitter:image" content="/apple-touch-icon-152x152.png">
<meta property="twitter:url" content="<?php the_permalink() ?>" />
<meta property="twitter:domain" content="Thomas' website">
<?php } ?>
<link rel="author" href="https://plus.google.com/+ThomasVanhoutte/">This code includes the following meta tags:
- HTML Charset
- Viewport for mobile devices
- Mobile web application icons in various sizes
- Favicon in various sizes
- Facebook Open Graph meta tags
- Schema.org structured data, mainly used by search engines
- Twitter Cards
- Google Authorship
The social meta tags are dynamically added depending on the availability of a thumbnail. Please add the desired icons and images where needed.
Good job, thanks bro