কীভাবে ওয়ার্ডপ্রেস ওয়েবসাইটে ফেসবুক ওপেনগ্রাফ ইমেজ যুক্ত করতে হয়?

আপনি কি আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে ফেসবুক ওপেনগ্রাফ ইমেজ যুক্ত করতে চান?

ওপেনগ্রাফ ইমেজ ফেসবুক আর অন্যান্য সোশাল মিডিয়া সাইট গুলো কে আপনার পোস্ট সম্পর্কে একটা ধারনা দেয়। এর ফলে ঐ সাইট গুলো আপনার পোস্টকে কাংখিত ইউজারের কাছে পৌছে দিতে পারে। ওপেনগ্রাফ আমাদের সাইটের এসইও ভালো করতে সাহায্য করে।

এই আর্টিকেলে আজ আমরা ওয়ার্ডপ্রেস সাইটে কিভাবে সহজে ওপেনগ্রাফ ইমেজ যুক্ত করা যায় সেটাই শিখব। অনেক গুলো মেথড আছে, আমরা সহজ দুইটা মেথড দেখাব।

ওয়ার্ডপ্রেস ওয়েবসাইটে ফেসবুক ওপেনগ্রাফ ইমেজ যুক্ত করুন

পদ্ধতি-১ র‍্যাংকম্যাথ প্লাগইনের মাধ্যমে

ওয়ার্ডপ্রেসে যত গুলো ফ্রি এসইও প্লাগইন আছে তার মধ্য র‍্যাংক ম্যাথ বেস্ট। পেইড হলে ইয়োস্ট প্লাগইন টা বেস্ট হবে। এর মাধ্যমে আপনি দুই তিন ক্লিকেই ওয়ার্ডপ্রেস ওয়েবসাইটে ফেসবুক ওপেন গ্রাফ মেটা ডাটা যুক্ত করতে পারবেন।

(প্লাগইন ইন্সটল করতে পারেন না? আমাদের এই আর্টিকেলটি দেখুন।)

প্রথমে আপনার সাইটে লগ ইন করুন-

ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে Rankmath প্লাগইনে কার্সর নিলে অপশন দেখাবে-

Titles & Meta তে ক্লিক করুন-

Global Meta পেজ আসবে। স্ক্রল করে নিচে গেলে OpenGraph Thumbnail অপশন আসবে। এখানে আপনার সাইটের লোগো আপলোড করুন-

লোগো আপলোড হয়ে গেলে নিচে গিয়ে সেভ করুন। সেভ না করলে Opengraph দেখাবে না।

ওপেন গ্রাফ মেটা ডাটা দেয়ার সুবিধা হল- যদি আপনার পোস্টে কোন ফিচার ইমেজ না থাকে তাহলে ফেসবুকে যখন আপনি কোন পোস্ট শেয়ার করবেন তখন এই লোগো আপনার পোস্টের থাম্বনেইলে দেখাবে।

পদ্ধতি-২ ম্যানুয়ালি ওয়ার্ডপ্রেস ওয়েবসাইটে ফেসবুক ওপেনগ্রাফ ইমেজ যুক্ত করা

ম্যানুয়ালি করতে গেলে আপনার ওয়ার্ডপ্রেস সাইটের থিম ফাইল এডিট করতে হবে। আপনার যদি পূর্বের অভিজ্ঞতা না থাকে তাহলে এই পদ্ধতি অনুসরণ করা ঠিক হবে না। তারপরও করতে চাইলে প্রথমেই আপনার থিম ফাইলের ব্যাক আপ নিয়ে নিন।

এরপর নিচের কোডটুকু আপনার থিমের functions.php ফাইলে পেস্ট করে দিন অথবা থিমে কোড এড করার প্লাগইন আছে সেটিতে পেস্ট করতে পারেন।

//Adding the Open Graph in the Language Attributes

function add_opengraph_doctype( $output ) {

        return $output . ‘

xmlns:og=”http://opengraphprotocol.org/schema/”

xmlns:fb=”http://www.facebook.com/2008/fbml”‘;

    }

add_filter(‘language_attributes’, ‘add_opengraph_doctype’);

 //Lets add Open Graph Meta Info

 function insert_fb_in_head() {

    global $post;

    if ( !is_singular()) //if it is not a post or a page

        return;

        echo ‘<meta property=”fb:app_id” content=”আপনার ফেসবুক আইডি দিন” />’;

        echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’;

        echo ‘<meta property=”og:type” content=”article”/>’;

        echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;

        echo ‘<meta property=”og:site_name” content=”এখানে আপনার সাইটের নাম দিন”/>’;

    if(!has_post_thumbnail( $post->ID )) {

        $default_image=”http://আপনার সাইটের এড্রেস/image.jpg”; //আপনার লোগো

        echo ‘<meta property=”og:image” content=”‘ . $default_image . ‘”/>’;

    }

    else{

        $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] ) . ‘”/>’;

    }

    echo “

“;

}

add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );

এরপর functions.php ফাইল সেভ করলেই ওপেনগ্রাফ ইমেজ আর মেটা ডাটা যুক্ত হয়ে যাবে।

ফেসবুকে আমার পোস্টের ফিচার ইমেজ শো করছে না

অনেকের এই সমস্যা হয়। ফেসবুকে কোন পোস্ট শেয়ার করলে পোস্টের ফিচার ইমেজ শো করে না। সাইটের ওপেনগ্রাফ বা লোগো শো করে। এটা মূলত হয় ফিচার ইমেজের ফরম্যাটের কারনে। ব্লগ সাইটে আমরা সবসময় চেষ্টা করি webp ফরম্যাটের ছবি ব্যবহার করতে। এই ফরম্যাটের ছবি দ্রুত লোড হয়। সমস্যা হল ফেসবুক webp ফরম্যাট সাপোর্ট করে না। কাজেই আপনার ব্লগ পোস্টের সব ছবি webp ফরম্যাটের দিলেও ফিচার ইমেজ jpg ফরম্যাটে দিন। ইমেজের সাইজ চেষ্টা করবেন ১০০ কিলোবাইটের নিচে রাখতে।

অনেক সময় আমরা সাইটের স্পিড ঠিক রাখার জন্য ফিচার ইমেজ দেই না। ফিচার ইমেজ না থাকলে ফেসবুক সাইটের লোগোকেই ফিচার ইমেজ হিসেবে শো করবে। এ জন্য আপনার সাইটের লোগোও jpg ফরম্যাটে আপলোড করুন।

লোগোর সাইজ তো আর বেশি বড় হবে না। ফলে jpg ফরম্যাটের লোগো আপনার সাইটের স্পিড পারফরম্যান্সে খুব একটা ইফেক্ট ফেলবে না।

ফেসবুক শুধুমাত্র gzip এবং dflate এনকোডিং এক্সেপ্ট করে। আপনার হোস্টিং প্রোভাইডারের সাথে যোগাযোগ করে এ বিষয়টা নিশ্চিত হয়ে নিতে পারেন। আপনার হোস্টিং যদি এই এনকোডিং ব্যবহার না করে তাহলে তাদের সেটা করতে বলুন।

নতুন ইমেজ ব্যবহার করেছি কিন্তু ফেসবুকে আগেরটাই দেখাচ্ছে

ফেসবুক আগের ইমেজটাই ক্যাশ করে রাখে। যদি আপনি নতুন ইমেজ ব্যবহার করেন সেক্ষেত্রে নতুন ইমেজের নতুন ইউ আর এল পুনরায় ফেসবুকে শেয়ার করতে হবে।

ওপেনগ্রাফ ইমেজের মিনিমাম সাইজ কত

ওপেনগ্রাফ ইমেজের দৈর্ঘ্য ও প্রস্থ অনুপাত ১.৯১ঃ১ হলে ভালো হয়। পিক্সেলে হিসেব করলে 1200×630 পিক্সেল। এতে সব ধরনের ডিভাইসে (ডেক্সটপ, ল্যাপটপ, ট্যাব বা মোবাইল ফোন) ক্লিয়ার একটা ইমেজ পাওয়া যাবে। যদিও 200 x 200 হল মিনিমাম রিকোয়ারমেন্ট।

ওপেনগ্রাফ ইমেজের সাইজ ৮ মেগাবাইটের বেশি হওয়া যাবে না।