I'm hoping someone has some experience using the comments social plugin, specifically with regards to formatting the story Facebook publishes when a user leaves a comment.
I had expected the process would be exactly the same as the Like plugin, whereby I make sure the URL I'm using in the comments plugin points to a page that contains a bunch of OG meta tags, all correctly supplied and defined. Yet despite having set this up (and working fine with Like buttons), and having ran the target URL through the Linter tool and seeing everything appear as I expect (no warnings or errors either), whenever I have a test user leave a comment and publish the story to their wall all I see is the comment they left and the full URL link displayed underneath.
It's pretty ugly on the one hand, and confusing on the other. All the meta data is present AFAIK and as I say, it works perfectly fine with the Like button; I get a nice image, title/description text etc.
Here's the meta data I'm using (note: the URL and IMAGE meta tags are dynamically written in depending upon some querystring parameters in the comments plugin url I'm using. I've also replaced potentially sensitive values for dummy values):
<meta property="fb:app_id" content="MY-APP-ID">
<meta property="og:type" content="article">
<meta property="og:url" content="https://apps.facebook.com/MY-APP/?key1=val1&key2=val2&key3=val3&key4=val4">
<meta property="og:site_name" content="My Site">
<meta property="og:image" content="http://domain.com/myimage.jpg">
<meta property="og:title" content="My title">
<meta property="og:description" content="Some description here">
<meta property="article:published_time" content="1341126000">
<meta property="article:expiration_time" content="1356940800">
<meta property="article:author" content="http://www.mywebsite.com/">
<meta property="article:section" content="My Section">
<meta property="article:tag" content="My Tag">
Is it that comments only create basic stories in the user's feed (seems unlikely). Do I have to use "blog" or "website" as the "og:type" (seems unlikely too)?
Would appreciate any help!
Cheers
Lee
It turns out the problem was caused by the Page being set to unpublished, and the test app set to sandbox mode. I've no idea why the Comments social plugin has this problem when Like button social plugin doesn't, but hopefully this might help someone else with the same issue.
<meta property="og:url" content="https://apps.facebook.com/MY-APP/?key1=val1&key2=val2&key3=val3&key4=val4">
The og:url you specified could be causing your issue. This url is supposed to be the same domain as set in your app settings. As a test, change the url, post a comment.
Leaving the url this way, Facebook tries to scrape the canvas. This will cause undesired results.
Related
I have a website, that people share on whatsapp. When I share the link, I get a small image right next to the site title and description. I would like it to be a big iamge, with the title and descrption under it, just as they are when I share a youtube link
Right now A link to the meta tag for the image looks something like this:
<meta property="og:image" content="URL">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
It changes nothing if the width matches the image or not
Any idea how can I get to this result, or WhatsApp just created something for some websites, and I'm just not one of them?
I'm trying to relocate a few select posts from my blogger URL to my new blog located in a Wix website.
I'm trying to use the meta refresh tag to get my SEO transfered for each of my blogger posts.
Blogger does not provide 301 redirects outside of the blogger domain. Hence I'm using the meta refresh tags.
I notice that Wix's blog pages have Ajax based URL links. Should I be providing the URL (of the Wix post) in the Meta Refresh tag (in the blogger post) with the "#!" or should the URL in the meta refresh be the one with "?_escaped_fragment_"?
Which of these URLs will transfer the SEO from the blogger post to the Wix post?
If you intend to preserve the link profile and search engine optimisation value of the posts, then a Meta refresh cannot quite replace a 301 redirect.
To answer your question, though, Google can deal with hashbang (#!) as well as escaped fragments, depending on how the Wix site is coded. You should definitely refer to Google's guide to making AJAX crawlable:
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Use the following code in head tag:
<noscript>
<meta http-equiv="Refresh" content="3;url=yourpage.html">
</noscript>
Google can understand #! sign. That would not be a problem.
If you query site:www.[something-made-with-wix].com on Google, You'll see all the links in the form of #! in the results.
You can try this one as an example.
After many trial and error I have found the answer to my own question.
Here's what happened when I did this on the old/url
<meta http-equiv="Refresh" content="2; URL=new/url/#!BlogPost" />
This did the redirection after 2sec, but after weeks of waiting, the old/url continued to show on google and the new/url never showed up.
Then I tried this on the old/url:
<meta http-equiv="Refresh" content="2; URL=new/url/?_escaped_fragment_=BlogPost" />
This did nothing as well.
Then I figured that if content=n (n is a number other than 0) , this is treated as a 302 redirect. Which is a temporary redirect.
So I tried the following:
<meta http-equiv="Refresh" content="0; URL=new/url/?_escaped_fragment_=BlogPost" />
This was a weird reaction that google gave. The old/url got removed from the search results and the new/url too was nowhere to be found. This is bad, never do this.
The final option was:
<meta http-equiv="Refresh" content="0; URL=new/url/#!=BlogPost" />
This finally did the trick. The link juice passed on from the old/url to the new/url after a few days. It is important however to go to google webmaster and get the old/url re-crawled. Only then will the link juice be passed on.
Please can you look into this, it may be useful for you:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Welcome Back
title>
<meta http-equiv="Refresh" content="2; URL=/wwstore/Profile.aspx" />
head>
You can add this into an ASP.NET page with code like this:
// *** Create META tag and add to header controls
HtmlMeta RedirectMetaTag = new HtmlMeta();
RedirectMetaTag.HttpEquiv = "Refresh";
RedirectMetaTag.Content = string.Format("{0}; URL={1}", this.Context.Items["ErrorMessage_Timeout"], NewUrl);
this.Header.Controls.Add(RedirectMetaTag);
But I never put 2 and 2 together to realize that the meta tag is actually mapping an HTTP header. A much easier way to do this is to simply add a header:
Response.AppendHeader("Refresh", "4");
Or refresh and go off to another page:
Response.AppendHeader("Refresh", "4; url=profile.aspx");
For more details please look here : http://weblog.west-wind.com/posts/2006/Aug/04/No-more-Meta-Refresh-Tags
Google Plus is pretty good at pulling images specified by Open Graph meta tags when standard URLs are shared like:
http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048
See:
But things start to get screwy when you start appending query strings, such as is done in this URL:
http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048?utm_source=google-plus&utm_medium=social&utm_campaign=stackoverflow-general-promotion
And for certain URLs + query strings the default image seems to make no sense at all:
http://skeptics.stackexchange.com/questions/4508/can-every-grain-of-sand-be-addressed-in-ipv6?xyz_12312313
The image featured in the above screengrab is the user pic of the guy who last left an answer to the shared question.
Is there any way to force Google Plus to fall back on images defined by og:image tags even when query strings are appended?
No, there is no way to fallback with Google+.
This behaviour is possible with Facebook scraper because it supports checking for og:url which Google+ does not support (Why???). These are the items Google+ supports
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
Normally when query parameters are added if og:url is defined
Their recommended format is Schema as described at https://developers.google.com/+/web/snippet/
The order in which Google+ checks
Schema
Open Graph
Title and meta description tags
Guess???
Seeing that multiple Schema are defined on the pages you linked, according to the https://developers.google.com/+/web/snippet/ documentation, it should take the information from the itemscope defined nearest to the top
<body class="question-page new-topbar" itemscope itemtype="http://schema.org/QAPage">
which is a little funny/weird since their tool doesn't pick this up http://www.google.com/webmasters/tools/richsnippets?q=stackoverflow.com%2Fquestions%2F22342854%2Fwhat-is-the-optimal-algorithm-for-the-game-2048%3Futm_source%3Dgoogle-plus%26utm_medium%3Dsocial%26utm_campaign%3Dstackoverflow-general-promotion
So, then this brings us back to looking at your second image
The title is different as well, so og:title isn't being detected either. <title> is being scraped instead
What does this all mean?
Google plus sucks with markup for sharing.
You will need to adjust your top most Schema.org microdata and hope Google+ makes sense of it when adding params to the canonical url.
<body itemscope itemtype="http://schema.org/QAPage">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
Read this in the FAQ section for OpenGraph in Google+ :
Why isn't my +Snippet image appearing?
Images that are too small or not square enough are not included in the +Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.
I have a dynamic page, where the contents and title will change based on the parameters in the URL. I want the same to be done for meta tag description. As I don't have a sound knowledge of SEO, I don't know whether it will be valid or not.
Say suppose URL contains word "test"
I will do,
if("test" is present)
{
<title>test</test>
<meta decription="test"/>
}
else
{
<title>test1</test>
<meta decription="test1"/>
}
Can I do this? Does giving two meta tag descriptions for same page work.
It is best practice to have different, on the page content based values of the title element and the meta description for each web page. It is not forbidden by the the HTML5 specification to have multiple <meta name="description" content="YOUR DESCRIPTION"> elements but I would guess that search engines process only the first appearance of the element. So my recommendation would be use one <meta name="description" content="YOUR DESCRIPTION"> element for each page.
As long as you code it server-side (eg in PHP) when the page is generated rather than client-side (javascript) after the page has loaded, then it will be fine. That's how most CMS systems work already.
Done server-side, only one of the description tags will actually appear in the code Google see.
Done client-side, it is likely that they will see no description at all as I don't think many search engines render javascript.
Testing posting a snippet on Google+ with following HTML -
<!DOCTYPE html>
<head>
<meta property="og:image" content="http://i.imgur.com/le2WbeU.jpg" />
<meta itemprop="image" content="http://i.imgur.com/le2WbeU.jpg">
</head>
<body>
</body>
</html>
What I see is:
Looking at network traffic I see a failed request:
UPDATE: Looks like it was a caching problem. Once I appended a query string on to the URL, I got the image to pull up. I must have had a bad URL to an image the first time and it cached that bad URL request.
I don’t know if it causes the error, but you might want to use link instead of meta if the value is a URI.
The HTML5 spec defines that the meta element:
[…] represents various kinds of metadata that cannot be expressed using the […] link […] elements.
Microdata also explicitly requires it:
[…] the property must be specified using a URL property element
Also note that you don’t have created an item in your Microdata, so the image property is not defined (unless an item is created on the html start tag, which is missing in your example; or you reference it via itemref from the body).
Looks like it was a caching problem. Once I appended a query string on to the URL, I got the image to pull up. I must have had a bad URL to an image the first time and it cached that bad URL request.