Cara Mudah Memasang Meta Tag Open Graph Yang Valid

Cara Mudah Memasang Meta Tag Open Graph Yang ValidSelamat malam rekan blogger !! pada artikel kali ini saya akan membahas tentang cara mudah memasang meta tag open graph yang valid keseluruhan tanpa ada kesalahan, dengan menggunakan meta tag open graph anda dapat memaksimalkan seo blog wordprees anda.

Kenapa harus memasang meta open graph ? dengan menggunakan meta open graph dari facebook ini anda tidak perlu khawatir lagi oleh peraturan google yang sangat mengancam blog anda tentang meta tag, pada waktu yang lalu saya telah membaca peraturan google bahwa dengan memasang meta tag tidak beraturan akan membuat seo blog anda semakin menurun dan tidak mampu bertahan di serp.

Lalu bagaimana Memasang Meta Tag Open Graph Yang Valid ? dan bagaimana peraturannya langsung saja anda simak langkah demi langkah berikut ini :

  1. Buka dashboard wordprees anda.
  2. Klik Appearance => Editor.
  3. Buka header.php carilah kode <html> atau <html lang=”en”> atau <html dir=”ltr” lang=”en-US“> (setiap blog berbeda, yang pasti di bagian atas)
  4. Ganti kode di atas menggunakan kode berikut ini.
  5. <!DOCTYPE html>
    <html lang="ID" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/Article">
    <head>
  6. Masih di header.php masukan meta tag open graph di bawah ini sebelum </head>.
  7. <meta prefix="fb: http://ogp.me/ns/fb#" property="fb:app_id" content="Masukan Id Aplikasi Facebook">
    <meta prefix="fb: http://ogp.me/ns/fb#" property="fb:profile_id" content="Masukan Id Halaman Facebook">
    <meta prefix="fb: http://ogp.me/ns/fb#" property="fb:admins" content="Masukan Id Facebook Anda">
    <meta property="og:site_name" content="Title Blog / Website Anda"/>
    <meta property="og:type" content="article"/>
    <meta property="og:locale" content="id_ID"/>
    <meta property="og:locale:alternate" content="en_US" />
    <meta property="og:title" content="<?php bloginfo('name'); ?><?php wp_title(); ?>"/>
    <meta property="og:url" content="http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>"/>
    <meta itemprop="name" content="Title Blog / Website Andaquot;>
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <meta itemprop="image" content="<?php echo get_fbimage(); ?>">
    <meta property="og:image" content="<?php echo get_fbimage(); ?>"/>

      Sampai disini anda telah berhasil memasang meta tag open graph namun masih ada sedikit kesalahan karena og:image content tidak muncul, itu juga yang saya alami bersama rekan blogger saya (www.kakiteng.com) di waktu lalu, namun saya sangatlah penasaran untuk itu dan akhirnya saya dapat menyelesaikan masalah ini, berikut langkah-langkahnya :

      1. Buka dashboard wordprees anda.
      2. Klik Appearance => Editor.
      3. Lalu bukalah Theme Functions atau functions.php masukan kode berikut ini
      4. function get_fbimage() {
          $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' );
          if ( has_post_thumbnail($post->ID) ) {
            $fbimage = $src[0];
          } else {
            global $post, $posts;
            $fbimage = '';
            $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',
            $post->post_content, $matches);
            $fbimage = $matches [1] [0];
          }
          if(empty($fbimage)) {
            $fbimage = "Masukkan Logo blog anda minimal 200x200";
          }
          return $fbimage;
        }

      Selamat anda telah berhasil menerapkan meta tag open graph, dan untuk melihat ke validasian meta tag open graph anda silahkan menuju http://developers.facebook.com/tools/debug?q dan untuk peraturan meta tag open graph tidaklah sulit anda hanya di wajibkan untuk membuat images content anda berukuran 200×200

Comments

  1. By Jam tangan online

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *