Pinterest rich pin not working for html website - html

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.

Related

How to change the image from the google search result of my website?

here’s the google search image I’m referring to
Can I change that toothbrush image to a different one? Or remove it entirely?
Also, my favicon is a different image, and has been for about a week. How can I change that in the search results?
I tried looking for ways to change the image but no luck. Any help is appreciated!
Add these in head tag to specify the data in google search engine
<head>
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="Your Image URL" />
<meta property="og:description" content="Description " />
<meta property="og:site_name" content="My Website, Inc." />
</head>

How can I embed an image like this in html? [duplicate]

Facebook fetches all pictures from my site.
I want to share only one picture which is on that page.
I heard about the og meta tag, but I don't know how to put it.
Use:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Fill the content =" ... " according to the content of your page.
For more information, visit 18 Meta Tags Every Webpage Should Have in 2013.
Facebook uses what's called the Open Graph Protocol to decide what things to display when you share a link. The OGP looks at your page and tries to decide what content to show. We can lend a hand and actually tell Facebook what to take from our page.
The way we do that is with og:meta tags.
The tags look something like this -
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
You'll need to place these or similar meta tags in the <head> of your HTML file. Don't forget to substitute the values for your own!
For more information you can read all about how Facebook uses these meta tags in their documentation. Here is one of the tutorials from there - https://developers.facebook.com/docs/opengraph/tutorial/
Facebook gives us a great little tool to help us when dealing with these meta tags - you can use the Debugger to see how Facebook sees your URL, and it'll even tell you if there are problems with it.
One thing to note here is that every time you make a change to the meta tags, you'll need to feed the URL through the Debugger again so that Facebook will clear all the data that is cached on their servers about your URL.
I built a tool for meta generation. It pre-configures entries for Facebook, Google+ and Twitter, and you can use it free here: http://www.groovymeta.com
To answer the question a bit more, OG tags (Open Graph) tags work similarly to meta tags, and should be placed in the HEAD section of your HTML file. See Facebook's best practises for more information on how to use OG tags effectively.

Facebook share button shares same link as Like button?

I am using the facebook share plugin for the first time and I can't see that I'm doing wrong.
I am using their Like/Share buttons but can not get the share button to share the link that is placed in the OG:url tag, it shares the link that is also linked to the Like button.
I added
<meta property="og:url" content="https:///" />
<meta property="og:type" content="website" />
<meta property="og:title" content=" | „" />
<meta property="og:description" content="....." />
<meta property="og:image" content="/img/BG.png" />
and it still doesn't work.
The Like/Share div looks like this:
<div class="fb-like" data-href="https:/" data-width="" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
data-href is not supposed to be your Facebook page. data-href should be the current page the widget is on, and according to the documentation, should be the same as the open graph <meta property="og:url" /> content attribute:
og:url and data-href should use the same URL.
The open graph meta tags are really just meant for sites that need meta information about the page for generating previews - they are not even strictly necessary for the like button (but you should still keep/use them).
If you want to encourage page likes, you might want the Page Plugin.
Check the code href-data and og:url should contain same url of your site
check out this example of share/like button from Facebook developers site itself.
<meta property="og:url" content="https://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://www.your-domain.com/path/image.jpg" />
<div class="fb-share-button"
data-href="https://www.your-domain.com/your-page.html"
data-layout="button_count">
</div>

Facebook og:image issue

I've got problem with the facebook image. My image is not being displayed on sharing, while on google+ is working fine. The facebook debugger is giving me the following message:
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'https://marketsrally.com/images/video/text-banner.png' will be used instead.
My og tags:
<meta property="fb:app_id" content="388490671332868" />
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta property="og:title" content="Markets Rally" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://marketsrally.com" />
<meta property="og:image" content="https://marketsrally.com/images/socialLogo.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="313" />
<meta property="og:site_name" content="Markets Rally" />
<meta property="og:description" content="Join us and get a pole position on the Markets Rally" />
<meta name="description" content="The World Leaders in online Binary Options, for trading on indices, commodities, currencies and stocks." />
<meta name="keywords" content="https://marketsally.com binary options, digital options, trade options, options trading, options, binary trading, easy profit, quick profit, easy trading, simple trading, forex, forex trading, online trading, nasdaq, dow jones, dax, crude oil, gold" />
The link to the site:
https://marketsrally.com/
My image is around 300 pixels width and height, and the link is valid. It is jpg format, although I tried with PNG. What could be the problem?
Have a look at http://beta.beantin.se/clearing-linkedin-link-sharing-preview-cache/ Apparantly you need to set the caching directrives in your page's header for Google+, and add an additional parameter for LinkedIn.
You can either use meta tags in the page's html code (see http://www.i18nguy.com/markup/metatags.html), or in the http response headers in your webserver (see http://www.mobify.com/blog/beginners-guide-to-http-cache-headers/).

Facebook Open Graph not picking up images (or anything in debugger)

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 :(