I recently added a share button on all of the artwork on my site, so that people viewing the artwork can easily share it on Facebook. The share button works in that the FB link does take the user to the correct artwork (url is correct). However, the image in the link is always an ugly clip out of the center of my logo banner (same image on every page on the site) and the og:xxx meta tags on my page seem to have absolutely no effect in customizing the link as Facebook claims they should. Here's the head section of one of my pages:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" type="text/css" href="stitzart.css" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="art, acrylic, flip, pour, artwork, colorful, dirty cup" />
<meta name="description" content="Hilda Stitz Art Gallery featuring dirty cup pours in acrylic." />
<meta property="og:url" content="http://www.stitzweb.com/art/art.php?id=18" />
<meta property="og:type" content="article" />
<meta property="og:title" content="StitzArt - #033" />
<meta property="og:description" content="Little Planet" />
<meta property="og:image" content="http://www.stitzweb.com/art/images/share018.png" />
<title>StitzArt - Hilda Stitz Artwork</title>
</head>
and the share button on that page pulls up this dialog:
Facebook Share Dialog (with incorrect information)
How can I make the pic, title and description in the share dialog match what's in the meta data? I've searched all day and I've almost given up. The feature works for sharing, but it would be so much better if people could see a preview of the artwork before clicking on the link. Thanks in advance for any help you might offer.
Related
I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?
When I share my website link I don't get such a one. I need to know why and how to do it.
OG tags are used by these social sites as below:
Site info OG tags Start
<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="#username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">
Site info OG tags End
Add the following tags to the <head> section of the HTML code of the page you need to share:
<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />
And replace {image} with the URL of the page image.
When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).
here is the image
anyone know? what's the problem
here are the tags i m using in html.
<meta property="og:type" content="product" />
<meta property="og:title" content="Deft Multi-concept Coming Soon Template" />
<meta property="og:description" content=" build you online presense righ now with a beautiful coming soon tempalte." />
<meta property="og:url" content="http://www.coderare.com/deft-coming-soon-template.html"/>
<meta property="og:site_name" content="Coderare" />
<meta property="og:price:amount" content="12.00" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="instock" />
<meta property="og:image" content="http://www.coderare.com/img/5.png" />
and when ever i'm tring to validate my page it shows "Something went wrong on our end" what's that?
According to the pinterest documentation the product tags you have used are not the ones pinterest supports. Instead use product:price:amount product:price:currency
You might also want to include structured data from http://schema.org for information not included in the pinterest product tags, eg In Stock.
Stackoverflow's help section has further information on debugging steps that will help you narrow down problems to the exact lines that cause the errors.
On the open graph home page it shows the following :
As an example, the following is the Open Graph protocol markup for The Rock
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
Now certain services, like twitter and facebook, can use this information within their own site when linking to the url? Trying to get the terminology correct as well. Any links to open servces (edu) of og markup in web page and its use on another site appreciated.
OG Protocol is useful for Facebook only, not Twitter, which needs it's own tags for Twitter Cards.
For Facebook, your tags must be complete, like this block:
<meta property="fb:app_id" content="ENTER YOUR APP ID"/>
<meta property="fb:admins" content="ENTER YOUR PERSONAL ID"/>
<meta property="og:site_name" content="ENTER SITE NAME" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ENTER SITE TITLE"/>
<meta property="og:description" content="ENTER SITE DESCRIPTION"/>
<meta property="og:url" content="ENTER SITE URL" />
<meta property="og:image" content="ENTER IMG URL" />
<meta property="og:image:type" content="image/png" /> <!-- enter IMG extension -->
<meta property="og:image:width" content="1200" /> <!-- enter IMG width, in px -->
<meta property="og:image:height" content="630" /> <!-- enter IMG height, in px -->
Images for big facebook cards should be 1200px x 630px and to small, 600 x 315 px, so they will fit perfectly on the screen. You can check it here.
For facebook, it's also recommended that you add this to the <head>:
<head prefix="og: http://ogp.me/ns#>
Here you'll find a guide for best practices when sharing website content on Facebook. Here you'll find a full guide for OG Protocol and here you can find the Facebook Debugger Tool for OG Protocol.
Now, for Twitter, you will have to add its own tags, like that:
<meta name="twitter:card" content="summary_large_image"> <!-- there are other card types you can choose -->
<meta name="twitter:site" content="#YOUR_USERNAME">
<meta name="twitter:creator" content="#YOUR_USERNAME"> <!-- or author's name, if that is the case -->
<meta name="twitter:title" content="ENTER THE WEBSITE TITLE">
<meta name="twitter:description" content="ENTER THE WEBSITE DESCRIPTION">
<meta name="twitter:image" content="ENTER THE IMG URL">
You can find all Twitter Cards documentation here and the testing tool here
You can see working examples in this blog (Facebook & Twitter) and in this site (Facebook only).
Finally, to understand what those things do exactly, share these sites I provided you the links and you will see how the sharing posts look like on Facebook. If you don't want to share them publicly, restrict the post for yourself only, so you don't need to explain to your friends why are you sharing these contents! For Twitter, you can give a look at my own feed so you'll see some cards there.
Hope to have helped!
this is really doing my head in. I have a site that is not allowing facebook to scrape data and show og:image parameters.
I have tried the following:
remove any disallows in robots text (just in case)
Make images smaller (they were huge)
check and double check markup of og tags
tried also adding the images to the page in case they also needed to be
there rather than displayed in a js slider
Checked blacklist of URL
cleared browsing history (as described by another user in my searches)
uploaded a resized thumbnail rather than using php to create the dynamic thumb (images are dynamic on this site)
created a blank test static html page with pretty much nothing on it to really
trouble shoot the issue.
it still doesn't work.
Here is my test page code. i removed urls for now. but if you want to check the page just ask me.
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.mysite.co/test/" />
<meta property="og:title" content="my site Test Page" />
<meta property='og:site_name' content='my site' />
<title>Homepage</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta property="og:image" content="http://www.mysite.co/test/43FINFAdeleThiel1.jpg" />
</head>
<body>
<img src="http://www.mysite.co/test/43FINFAdeleThiel1.jpg">
</body>
</html>
Thanks in advance everyone, this is really eating up my time :(
I'm using Facebooks' Open Graph protocol :
http://developers.facebook.com/docs/reference/plugins/like/
Here's code for a test page. My understanding is that when someone "likes" this, the image icon that placed in the post on their
page should be the one specified in og:image, and the linkable url in the post should be the one specified in og:url.
In reality, it seems to truncate the URL to the domain, and instead of using the image provided it picks one seemingly at random (my guess is it's just taking the first image it sees from a scan or specified elsewhere in the code).
Am I doing anything obviously wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<meta property="og:title" content="My Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.mysite.org/videos/index/16922653" />
<meta property="og:image" content="http://b.vimeocdn.com/ts/104/367/104367616_200.jpg" />
<meta property="og:site_name" content="My Site" />
<meta property="og:app_id" content="5555555555" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="image_src" href="http://b.vimeocdn.com/ts/104/367/104367616_200.jpg" />
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.mysite.org/videos/index/16922653" show_faces="false" width="450" />
</body>
</html>
Update: #echese
Good suggestion. Ran it, got this feedback from the "debug" section:
Data Source "website" extracted from <meta property="og:type" />
Data Source "My Site Title" extracted from <meta property="og:title" />
Data Source "http://www.mysite.org/videos/index/16922653" extracted from <meta property="og:url" />
Data Source Extracted 1 values from <meta property="og:image" />: http://b.vimeocdn.com/ts/104/367/104367616_200.jpg
Data Source "My Site" extracted from <meta property="og:site_name" />
Looks like it understands the image url. It suggested some iframe code which I tried but still no dice, I don't get the image I specify.
Try running the URL Linter to see if you can find any errors on your pages.
hmm maybe (maaaaaaybe) it's because you dont have the og namespace on the html tag..
or.. maybe because the image's url is on a different domain than your page?
good luck