HTML — metas for Organic SEO & Facebook OG tags - martindubenet/Wordpress GitHub Wiki

Minimal metas required for organic SEO and Facebook's Open Graph protocol.

<html>declaration

<html class="no-js" <?php language_attributes(); ?> xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
  1. "no-js" class is required for Modernizr plugin.
  2. lang definition is required by HTML5 specifications. Wordpress define this tag with the language_attributes()
  3. xmlns:ogdefinition is required for Facebook's Open Graph Protocol to support the <meta property="og:... declaration (se below).

<head> metas

Reference: https://developer.wordpress.org/reference/functions/the_post_thumbnail/

<meta name="description" content="<?php bloginfo('name'); ?> : <?php bloginfo('description'); ?>"/>
<meta name="author" content="<?php bloginfo('name'); ?>"/>
<link rel="canonical" href="<?php the_permalink() ?>" />
<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('name'); ?> : <?php bloginfo('description'); ?>">
<meta property="og:type" content="website">
<?php
    // print the post_thumbnail (image a la une) as og:image if a post_thumbnail is defined.
    if ( has_post_thumbnail() ) {
        $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
            if ( ! empty( $large_image_url[0] ) ) {
                printf(
                    '<meta property="og:image" content="%1$s">',
                    esc_url( $large_image_url[0] )
                );
            }
    } else {
    // print the "screenshot.png" from the theme
        echo '<meta property="og:image" content="'. get_template_directory_uri() .'/screenshot.png">';
    }
?>
⚠️ **GitHub.com Fallback** ⚠️