Tuesday, 24 January 2017

Facebook Open Graph Meta Tags Ko Blogger Blog Me Kaise Add Kare



Aaj ke tutorial me hum log janege ki facebook open graph meta tags kya hai aur isko apne blog me add karna kyo jaruri hai. Bahut sare free blogger template me facebook open graph meta tags add nahi hota hai. Jis blogger template me OG meta tags add nahi hota, agar us blog ke post ke link ko facebook par share kiya jata hai to post ka correct thumbnail image fb par show nahi hota hai ya phir kabhi-kabhi to image show hota hi nahi.

how-to-add-facebook-open-graph-meta-tags-in-blogger

Bahut sare users ka to yah bhi complain hota hai ki unke post ka shai title bhi show nahi hota hai. OG meta tags add nahi hone ke karan post ka thumbnail image ka quality thik nahi hota hai matlab image bahut hi small hota hai jiske karan visitor image ki taraph utna attract nahi hota hai.


Facebook open graph meta tags blogger me add karne ke baad Facebook aapke blog information ko jaise ki post ka title, description, author, image ko correctly show karega.






Blogger Ke Liye Facebook Open Graph Meta Tags :-

Is tutorial ko aage badhane se pahle hum log ke liye yah sikhna jaruri hai ki facebook open graph me kis attribute ka use kiya jata hai. Isse aapko sirf attribute ko samajhne me aasani nahi hogi balki iske function ko bhi sikhne me help milegi.

  • og:title : Yah blogger post ke title ko represent karta hai. 
  • og:url : Yah aapke post ke URL ko represent karta hai. 
  • og:image : Yah us post ke image ko represent karta hai jo ki facebook par show hona chahiye.
  • og:type : Yah aapke page ke type ko represent karta hai.

Ab hum aaage badhte hai aur batana start karte hai ki FB og meta tags ko blogger me kaise add kare.


Facebook Open Graph Meta Tags Ko Blogger Me Kaise Add Kare ?

Fb OG meta tags blog me add karne ke liye aap mere steps ko follow kare :-

Step 1

Sabse pahle apne blogger account me login kare.


Step 2

Ab blogge Dashboard >> Template >> Edit HTML par click kare. [HTML ko edit karne se pahle apne template ka backup le le.]


Step 3

Editor me, sabse upar kuchh is tarah ka code show hoga jaisa ki maine niche likha hai. Yah code aapke template me thoda alag jaisa ho sakte hai.

<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


Step 4

Ab niche likhe code ko copy karke upar wale HTML code ke closing tag (>) ke just pahle paste kar de. [Agar aapke template me yah code nahi hai, tabhi code add kare.]

xmlns:og='http://ogp.me/ns#'

Ab yah code aapke html editor me kuchh is tarah se dikhega :-

<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Notes :-
Agar aapko upar code ko template me add karne me problem ho rahi ho to simply aap upar ke code ko copy karke <head> ke upar ya pahle paste kar de aur uske baad 5th steps se follow kare.


Step 5

Aapne facebook open graph protocol tags ko template me add kar liya hai. Ab aapko facebook open graph meta tags ko apne blogger template me add karna hai.

CTRL+F key press kar search box me <head> likh kar search kare aur phir niche following code ko <head> tag ke baad ya niche paste kar de.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName'
property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle'
property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.pageName'
property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl'
property='og:url'/>
<meta expr:content='data:blog.title'
property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-default-
thumbnail.jpg
' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if><meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/> 

Is code me aapko kuchh customize karna hai :-

  •  https://www.your-default-thumbnail.jpg ke place par apne blog ke logo ka link daale. Agar aapke post me koi image nahi hoga to yah image facebook par show hoga jab aap fb par post link ko share karege.
  • App-ID ke place par apne facebook app ki ID dale.
  • Facebook-Profile-ID ke place par apne fb profile ka ID dale.


Step 6

Code me customize karne ke baad Save Template par click karna hai.

Ab aap soch rahe hoge ki App-ID aur Facebook-Profile-ID kaise pata chalega. Aapko utna pareshan hone ki jarurat nahi hai mai aapko batata hu.


Facebook App-ID Kaise Pata Kare :-

Step 1

Sabse pahle apne facebook account me login kare aur phir Facebook Developers page par visit kare.


Step 2

Register Now par click kare.

click-on-register-now


Step 3

Register Now par click karne ke baad ek new page open hoga.


write company name job title and click on register

  1. Apne blog ka naam likhe.
  2. Job title me apne blog se related title ko choose kar select kare.
  3. Yes select kare.
  4. Register par click kare.


Step 4

Ab Done par click kare.



Step 5

Done par click karne ke baad ek page open hoga.

click on create app

Create App par click kare.


Step 6

  1. Apne blog ka naam likhe.
  2. Email ID dale.
  3. Apne blog se related category select kare.
  4. Create App ID par click kare.



Step 7

Ab ek page open hoga jisme Choose Platform par click karna hai.

click on choose platform



Step 8

Ab ek popup window open hoga jisme se website par click kare.

click on website



Step 9

Website par click karne ke baad aapko new page me App ID milegi.

copy facebook app id



App ID ko copy karke facebook open graph meta tags code me App-ID ke place par paste kar de.



Facebook Profile ID Kaise Pata Kare :-

Step 1

Facebook profile ID pata karne ke liye sabse pahle http://findmyfbid.com/ site par visit kare.


Step 2

  1. Apne facebook profile URL link ko dale.
  2. Find numeric ID par click kare.
  3. Ab aapko facebook profile ID prapt hogi. Yah ID number me hoga.

fill your facebook profile url and find numeric id


Is numeric ID ko fb open graph meta tags code me Facebook-Profil-ID ke place par lagana hai.


Facebook open graph meta tags code ko blog me add karne ke baad ek bar Facebook Debugger Tool me yah check kar le aapne jo open graph meta tags add kiya hai wah thik tarah se work kar raha hai ki nahi. Agar kuchh problem hogi to aapko pata chal jayega.





Facebook open graph meta tags code ko blogger me add karne me agar koi problem aati hai to mujhe comment kare. Isi tarah ke NewFeatureBlog ke sabhi new post direct apne email par pane ke liye subscribe kare.

Agar aapko yah post pasand aaya ho to social media par share kare.

No comments:

Post a Comment

Comment Rules :

1. Comments deemed to be spam or solely promotional in nature will be deleted.
2. Anonymous comments will be deleted. We only accept comment from posters who identify themselves.

Advetisement

About Admin

Follow by Email