How to customize og tags (Open Graph) on the post page - Wordpress

Asked

Viewed 792 times

0

I am creating a template from scratch for Wordpress, but would like to change the content of og tags according to the content of the post, ie set image title and description

Thank you in advance

javascript html wordpress wordpress-theme

1 answer

2


The recommendation in Guideline for Themes Development is to separate functionality from drawing. Things like SEO and Shortcodes do not belong in themes, because when changing Theme -which happens frequently- the site loses these features, needing to be migrated from one Theme to another. Even if you are developing your own Heme, you will most likely develop another at some point in the future.

What is most indicated in the development of Theme is to follow the SEO Guide to Themes (mirror) of Yoast. And even being a Theme Developer nothing prevents create plugins who work with their themes.

That said, what the plugin Wordpress SEO is to print the tags on <head> using the action hook wp_head.

Here, I started to dry the full class where the plugin takes care of this output. It is necessary check the other methods within the class to complete the meta tags. The code is commented and each missing tag has the name of the method where you can check how Yoast handles each meta property.

<?php
/**
 * Plugin Name: (SOPT) OG Meta Tags
 */

add_action( 'wp_head', 'sopt_32080_head', 1 ); // Prioridade 1, imprime o antes possível

function sopt_32080_head()
{
    # POST ATUAL
    # as Conditional Tags como is_front_page, is_archive, is_singular, etc, cuidarão de saber qual a página atual
    # http://codex.wordpress.org/Conditional_Tags
    global $post;

    # LINGUAGEM
    echo '<meta property="og:locale" content="pt_BR" />' . "\n";

    # TIPO
    if ( is_front_page() || is_home() ) {
        $type = 'website';
    } elseif ( is_singular() ) {
        $type = 'article';
    }  else {
        // We use "object" for archives etc. as article doesn't apply there
        $type = 'object';
    }
    echo '<meta property="og:type" content="' . $type . '" />' . "\n";

    # TITULO
    if ( is_singular() ) {
        $title = 'Article - ' . $post->post_title;
    } else if ( is_front_page() ) {
        $title = 'Website - ' . get_bloginfo('name');
    } else {
        $title = 'Outro tipo de página';
    }
    echo '<meta property="og:title" content="' . $title . '" />' . "\n";

    # TODO: OUTRAS TAGS

    # fb:app_id ou fb:admins
    // public function site_owner()

    # og:description
    // public function description()

    # og:url
    // public function url()

    # og:site_name
    // public function site_name()

    # article:publisher
    // public function website_facebook()

    # ARTIGOS INDIVIDUAIS
    if ( is_singular() && ! is_front_page() ) {
        # article:author
        // public function article_author_facebook()

        # article:tag
        // public function tags()

        # article:section
        // public function category()

        # article:published_time e article:modified_time e og:updated_time
        // public function publish_date()
    }

    # og:image
    // public function image()
}

Browser other questions tagged javascript html wordpress wordpress-theme

You are not signed in. Login or sign up in order to post.