I'd like to enable my Bigcommerce website for Rich Pins in Pinterest. What are the appropriate meta tags to do this?
The above is incorrect, it should actually be as follows:
<meta property="og:type" content="product" />
<meta property="og:price:amount" content="%%GLOBAL_ProductPrice%%" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="in stock"/>
Below are the rich pins meta tags that you can put it in your Bigcommerce template
File. product.html
just after %%Panel.HTMLHead%%
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="%%GLOBAL_RetailPrice%%"/>
<meta property="product:price:currency" content="AUD" />
<meta property="og:availability" content="in stock"/>
All others tags are already provided from BigCommerce Template
in HTMLhead.html file
%%GLOBAL_AdditionalMetaTags%%
But if something is missing here is the full list you can use in addition to above.
<meta property="og:site_name" content="YOURSITE.COM" />
<meta property="og:title" content="%%GLOBAL_ProductName%%" />
<meta property="og:url" content="%%PageContent%%" />
<meta itemprop="description" content="%%ProductDescription%%" />
<meta property="og:image" content="%%GLOBAL_ThumbImageURL%%"/>
Unfortunately, neither will work if you load additional products on your page, for example with "Related" or "Recently Viewed" blocks as it will load the last product on the page as the product price.
Instead you can use the Schema.org Semantic Markup option instead.
The following code at the bottom of my productdetails.html page passed the Pinterest validator.
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="%%GLOBAL_ProductName%%" />
<meta itemprop="image" content="%%GLOBAL_ThumbImageURL%%" />
<meta itemprop="description" content="%%Page.MetaDescription%%">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="%%GLOBAL_ProductPrice%%">
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="availability" itemtype="http://schema.org/ItemAvailability" content="http://schema.org/InStock" />
</div>
</div>
Related
I want to modify the index html during the vue cli build process. (vue.config.js)
Is there any way to do this?
This is my index html looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<%= foo %>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>blabla</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui" />
</head>
<body>
<noscript>
<strong>We're sorry but tera.com-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
and I want vue/webpack to parse the value 1 to foo.
Vue will attach to the DIV with id app. So your {{foo}} will be out of range for Vue to change it.
You should look into Single File Components, that way you'll be able to wrap your whole HTML inside Vue.
I'm trying to deal with a strange behavior of G+ sharing.
I wrote two lightweight HTML pages to demonstrate my problem. Those pages are almost identical except images in their bodies. On the first page, the content image is much larger that the og:image. On the second page, the content image is slightly smaller than the og:image.
First HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Test page" />
<meta property="og:description" content="This is page for G+ strange behavior testing." />
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/wikimania2014/thumb/e/e2/Ask-Logo-Small.jpg/250px-Ask-Logo-Small.jpg" />
<title>Test page</title>
</head>
<body>
<div>
<p>Hello world!</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" />
</div>
</body>
</html>
Second HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Test page" />
<meta property="og:description" content="This is page for G+ strange behavior testing." />
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/wikimania2014/thumb/e/e2/Ask-Logo-Small.jpg/250px-Ask-Logo-Small.jpg" />
<title>Test page</title>
</head>
<body>
<div>
<p>Hello world!</p>
<img src="http://previewcf.turbosquid.com/Preview/2014/07/05__19_56_51/01.jpg90ddaa05-e3a9-4607-b466-29ade8412934Small.jpg" />
</div>
</body>
</html>
The problem is that in the first case, G+ shows the image from the body (ignores og:image). In the second case, G+ shows og:image as expected.
I've also tried using schema microdata, but the behavior is the same.
I share pages using https://plus.google.com/share?url=PAGE_URL.
Solved! The reason was that in the second case, the og:image had smaller width than G+ requires.
<!DOCTYPE html>
<html lang="en-US"
xmlns:fb="http://ogp.me/ns/fb#" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:image" content="http://www.98quotes.com/wp-content/uploads/2013/11/mysis2-300x300.gif"/>
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.4.22 - http://yoast.com/wordpress/seo/ -->
<title>sister love1 - 98Quotes</title>
<link rel="canonical" href="http://www.98quotes.com/sister-love1/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="sister love1 - 98Quotes" />
<meta property="og:description" content="Search TagX on Google View all posts tagged as Tagx Find TagX related info in WikiPedia I love my sister Your sister isn’t always your blood relation. Sometimes it’s that close friends who understands you, loves you and has always got your back. If you have a loving sister or someone in your life you …" />
<meta property="og:url" content="http://www.98quotes.com/sister-love1/" />
<meta property="og:site_name" content="98Quotes" />
<meta property="article:tag" content="I Love You" />
<meta property="article:tag" content="Sister" />
<meta property="article:section" content="Relationship" />
<meta property="article:published_time" content="2013-11-07T12:20:10+00:00" />
<meta property="og:image" content="http://www.98quotes.com/wp-content/uploads/2013/11/mysis2.gif" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="98Quotes"/>
<!-- / Yoast WordPress SEO plugin. -->
my page head is as above.. but still google+ unable to fetch content, though it fetch the image. Can any body tell me what is the reason for it.
The +Snippet description/preview is now only displayed on Google+ if you use interactive shares.
how to define the static pricing in new payment system and how to pay?
I defiened the price (defiend "USD"). But I use sterling to pay , it return error that is 'Sorry, there was a problem and we can’t complete your request. Please try again later'.Please tell me how to deal with it.
Thanks.
<head prefix=
"og: http://ogp.me/ns#
fb: http://ogp.me/ns/fb#
product: http://ogp.me/ns/product#">
<meta property="og:type" content="og:product" />
<meta property="og:title" content="Golds" />
<meta property="og:image" content="http://****/icon_box_1.png" />
<meta property="og:description" content="Coins!" />
<meta property="og:url" content="http://****/product.html" />
<meta property="product:price:amount" content="0.1"/>
<meta property="product:price:currency" content="USD"/>
</head>
Is it possible when integrating with the save to foursquare api to use only Open Graph Data?
The foursquare API states:
In order for the Save to foursquare button to work on your site, your site should include hCard or OpenGraph location metadata so that foursquare knows which place your web page is referring to.
However when I load my page with the following data:
<head>
<meta property="og:latitude" content="40.707992194260186"/>
<meta property="og:longitude" content="-74.05560369801627"/>
<meta property="og:street-address" content="222 Jersey City Blvd."/>
<meta property="og:locality" content="Jersey City"/>
<meta property="og:region" content="NJ"/>
<meta property="og:postal-code" content="07305"/>
<meta property="og:country-name" content="USA"/>
</head>
as per https://developers.facebook.com/docs/opengraphprotocol/
I get "No matching venues were found for this page." from https://foursquare.com/business/brands/offerings/savetofoursquare/tester
I believe I should receive the following venue: https://foursquare.com/v/liberty-science-center/4bf2e2fa6991c9b66e9f29e9
You have to give some additional information (see required Open Graph fields), esp. a title:
<meta property="og:title" content="Liberty Science Center" />
<meta property="og:type" content="landmark" />
<meta property="og:latitude" content="40.707992194260186" />
<meta property="og:longitude" content="-74.05560369801627" />
<meta property="og:street-address" content="222 Jersey City Blvd" />
<meta property="og:locality" content="Jersey City" />
<meta property="og:region" content="NJ" />
<meta property="og:postal-code" content="07305" />
<meta property="og:country-name" content="USA" />
<meta property="og:phone_number" content="201-200-1000" />
This should point to Liberty Science Center.