I'm trying to use Facebook Open Graph meta tags for my site. I want my links to be showed correctly when I share them in Facebook. But it doesn't. When I test the link in Facebook Debuger but it always shows Error parsing input URL, no data was cached, or no data was scraped.. I searched a lot and read the Facebook's documentation about good examples and followed them. But no success. Here is my Page Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="utf-8" />
<title>تست</title>
<link rel="canonical" href="www.kaladaran.com">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="Product">
<meta name="description" content="Product">
<!--FACEBOOK-->
<meta property="og:type" content="website">
<meta property="og:title" content="Test">
<meta property="og:site_name" content="Kaladaran">
<meta property="og:url" content="www.kaladaran.com/test.html">
<meta property="og:description" content="Descritption">
<meta property="fb:app_id" content="My App Id">
<meta property="og:image" content="http://kaladaran.com/Data/1598/6ccec951-f124-43f6-abb0-a59e3d94bd67.jpg">
<meta property="og:image:width" content="250px">
<meta property="og:image:height" content="169px">
<meta property="og:locale" content="fa_IR"><meta property="article:author" content="https://www.facebook.com/KDAdsCo" />
<meta property="article:publisher" content="https://www.facebook.com/KDAdsCo" />
</head>
<body>
<div>
<h1>
Facebook Open Graph Tag Test
</h1>
<img src="http://kaladaran.com/Data/1598/6ccec951-f124-43f6-abb0- a59e3d94bd67.jpg" alt="Panasonic" />
</div>
</body>
</html>
I can't understand what is wrong with my code? Any help is appreciated in advance.
The line:
<link rel="canonical" href="www.kaladaran.com”> is causing the error. A canonical link is meant to point to the current page, not the home page.
Also, note that, the URL inside a <link> is relative if you leave out the http:// which is why you are getting the error.
Make it like :
<link rel="canonical" href="http://www.kaladaran.com/test.html">
<meta property="og:url" content="http://www.kaladaran.com/test.html">
Also, remember to type the exact same URL in the Facebook scraper.
When Facebook finds a canonical link that points to a different URL, it will treat it like a redirect .
From Facebook:
The following will be treated as a redirect by the crawler:
A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
https://en.wikipedia.org/wiki/Canonical_link_element
Related
i watch 1 youtube https://www.youtube.com/watch?v=KnsanTdY2Lc and i coding follow them but when i post a link on facebook it not show the photo why? here my code where is wrong point i can't event debug it
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<meta property="og:url" content="https://3.bp.blogspot.com/-HJiRD8AiC4k/V_8MznQ6d7I/AAAAAAAADOg/yR2fUN0ja3gPltQ5S_e0NlGZ9gYRzcyyQCLcB/s1600/download.jpg" />
<meta name="googlebot" content="noarchive" />
<meta content="noindex, nofollow" name="robots" />
<meta name="medium" content="image" />
<meta property="og:type" content="website" />
<title>Berani yer....akik ni.........-(video inside)</title>
<meta http-equiv="refresh" content="0; URL=uuuuuuuuuuu" />
Try this ;)
Check your url here(URL debugger) to make sure you are providing info as expected by Facebook. Like to share image you need to add og:image property with meta tag.
Why are you adding following meta?
<meta http-equiv="refresh" content="0; URL=uuuuuuuuuuu" />
This will redirect from current url to uuuuuuuuuuu
i have created an Open graph storie on my facebook app. I want to to integrate the code to my website...
this is the meta tags i use
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# rovespier: http://ogp.me/ns/fb/rovespier#">
<meta property="fb:app_id" content="349547121879416" />
<meta property="og:type" content="rovespier:art" />
<meta property="og:url" content="Put your own URL to the object here" />
<meta property="og:title" content="<?php $message; ?>" />
<meta property="og:image" content="http://www.rovespier.com/uploads/videos/images/142367443594.jpg" />
<meta charset="utf-8">
i used facebook debugger. the thing is that (because i use this code for mulptiple pages) in some pages the open graph shows ok but in some shows values like 'sample video' or another image from the one i specified on the meta tag or no image at all. Any idea why is that? Sounds kind of crazy
Start adding a width and a heigt to your og:image. If there is no image width or height set, it may take another image than the one that is defiend.
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
How can I customize the content display when I share a page on facebook or google plus. title, description, image..etc.. When I share my page now on facebook, it adds a certain image and title other the required. In case of google plus, image is shared correctly but still the title is not the one I need.
Here's how I currently use them:
<!-- Google+ -->
Any idea how can I customize it to my need or if there is any packages that could support me as well. Also, do I need to create an app on facebook or google plus in order to do so. I'm just using share button.
something like this for facebook share
<meta property="og:title" content="title here" />
<meta property="og:image" content="image url here" />
<meta property="og:type" content="website" />
debug your page first on facebook using https://developers.facebook.com/tools/debug/
to clear facebook cache on your site
you don't have to create app on facebook to use share button, i think it's same with gplus but i'm not sure.
or create this page as a target url to share
<php
$title = 'title';
$image = 'image';
?>
<meta property="og:title" content="{{$title}}" />
<meta property="og:image" content="{{$image}}" />
<meta property="og:type" content="website" />
<script>
window.location = "http://www.url-to-real-shared-page";
</script>
Lets say this is the content of your master.blade.php template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
#yield('og')
<title>Manny Isles</title>
Then this is your show.blade.ph template that extends the master.blade.php
#extends('layouts.master')
#section('content')
{{ $blog->content }}
#endsection
#section('og')
<meta property="og:title" content="{{ $blog->title }}" />
<meta property="og:image" content="{{ $blog->image_url }}" />
<meta property="og:type" content="website" />
#endsection
Just notice the #yield('og') and #section('og')
Im trying to generate fb opengraph meta tags on my site, so that it can be picked up by the facebook scraper, but scraper isnt picking up my data.
Here's a screenshot of my scraper data
And here is the PHP code that I'm inserting into my page to generate the meta tags.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="fb:app_id" content="APP _ID" />
<meta property="og:site_name" content="Moodle Deliverable"/>
<meta property="og:title" content="Communities Discussion Forum!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://54.201.93.242/moodle" />
<meta property="og:image" content="http://www.india-forums.com/tellybuzz/images/uploads/D38_Vivek-Oberoi_0.jpg" />
<meta property="og:site_name" content="Moodle Deliverable" />
<meta property="fb:admins" content="admin number" />
</head>
</html>
I've used a dummy image link and supplied the rest of the required parameters. But as you can see the scraper says the og:type data is missing/
Can anyone help me with this?
If you want to add some parameters to the object url, please make sure you change the og:url parameter too.
The facebook scraps the og tags from the og:url that you mentioned.
I try to do include multiple og:image meta properties to associate multiple images with my page. According to Facebook's Open Graph protocol documentation, you have only put multiple og:image tags in the html head.
That's what I did but unfortunately it doesn't work.
I would be pleased, if anyone could give me a hint.
Code:
<head>
<meta name="og:title" content="Parents Inc." />
<meta name="og:type" content="website" />
<meta name="og:image" content="http://theparentingplace.automatem.co.nz//images/stories/media/Our%20Speakers/amanda_headshot.jpg" />
<meta name="og:image" content="http://theparentingplace.automatem.co.nz//images/stories/media/Our%20Speakers/bruce_headshot.jpg" />
<meta name="og:image" content="http://theparentingplace.automatem.co.nz//images/stories/media/Our%20Speakers/dave_phoebe_headshot.jpg" />
...
<meta name="og:image" content="http://theparentingplace.automatem.co.nz//images/stories/media/Our%20Speakers/zane_headshot.jpg" />
...
You can see an example page here:
http://pastehtml.com/view/bl3wbdtiu.html
http://pastehtml.com/view/bl3wbdtiu.html
This has
<meta name="og:title" content="Parents Inc.">
which should be changed to
<meta property="og:title" content="Parents Inc.">
You should also add xmlns:og="http://ogp.me/ns#" as a property of your HTML tag too.
<html prefix="og: http://ogp.me/ns#"> or like <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Further reading can be done: http://ogp.me/ and https://developers.facebook.com/docs/opengraph/