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.
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.
This could be something very simple, but I am having a hard time with this. I have to add some additional information into the heading information of a page. The issue is that the information always ends up in the body instead of heading.
Here is the sample code
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<text id="test">
//Wish to add some additional information here
tester
</text>
<title>Test Heading</title>
</head>
<body>
</body>
</html>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test Heading</title>
<meta name="description" content="Latest sports news and live scores from Yahoo! Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby, Tennis and more.">
<meta name="keywords" content="eurosport,sports,sport,sports news,live scores,football,cricket,f1,golf,rugby,tennis,uk,yahoo">
</head>
<body>
</body>
</html>
The customer is forcing the browser to behave like IE8; as a result, adding an xml tag in the heading works. Adding a line for IE8 compatibility did the trick for them.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8;" />
<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<text id="students">
<name>Name</name>
<sCode>122</sCode>
</text>
<title>Test Heading</title>
</head>
<body>
</body>
</html>
I have a source code use manifest. When i run code in chorme it work. But when i run in ie 10 AppCache Fatal Error.
Code html:
<html manifest="demo.manifest">
<head>
<meta charset="utf-8" />
<meta http-equiv="EXPIRES" content="0" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
</head>
<body>
<script src="js/jquery.min.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="imgs/img_logo.gif" width="336" height="69"></p>
<p>Try opening this page, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
And code manifest file:
CACHE MANIFEST
js/demo_time.js
imgs/img_logo.gif
Some body help me. Thank you for support.
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>
<!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.