I've implemented Open Graph tags and Twitter Card tags on my site. The only way for the Twitter Card tags to validate as HTML5 is by changing them from ...name="twitter:card"... to ...property="twitter:card"... However, this causes Facebook's Open Graph Debugger to:
Open Graph Warnings That Should Be Fixed
Extraneous Property: Objects of this type do not allow properties named 'twitter:card'.
Are Open Graph tags, Twitter Card tags, and HTML5 incompatible?
http://developers.facebook.com/tools/debug
As #ajax mentioned with the url, the way of doing this now is for example:
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="#nytimesbits" />
<meta name="twitter:creator" content="#nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
What validator tool for HTML5 do you use?
I don't know any that handles properly such kind of markup. Even microdata is not supported properly by W3C validators so far :)
So general suggestion is to use service-related-validator for service-specific-markup.
About compatibility - they're all compatible.
Here you can find doc about RDFA support in HTML5 (and opengraph is RDFA in fact).
Here about describing new meta names (this is how twitter cards realized).
But the only thing you really need is this one :) There it is written about Open Graph and Twitter Cards relations as Twitter sees it.
I'm having the same issues. The problem is that Twitter and Facebook haven't agreed on an opengraph twitter namespace, or just Twitter hasn't got a public namespace. Anyway I hope this doesn't prevent Facebook to correctly index these pages.
Related
After deploying my react app, I noticed that when I am sharing it on whatsapp for example, The link looks really basic.
Title is "React App" and descriptions is "website created with create-react app".
I have managed to change title and description from the meta inside index.html and got something like:
My App
My description
I am trying to make it look like that:
I have read about React helmet but I did not understand if it is right for my case.
Thanks in advance!
For determining what your website looks like on social media, you'll want to add more meta tags containing Open Graph data.
// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">
Using this protocol you can tell crawlers what properties to use to make up those previews on WhatsApp, Facebook, etc.
Here's the docs for all the available properties:
https://ogp.me/
React helmet is helpful if you need to customise the meta data on a per page basis, if you just need one set of data to be shown for your entire site it's not necessary for you to use it.
You should look into Open Graph tags. To break down the example image you provided there is 4 noteworthy sections (taken from their source code):
<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">
You can take a look at the page source to see this information and match it up if you would prefer to learn by seeing.
If you do look, you'll notice there is a seeming repetition of some tags, e.g. twitter:image, this allows you to provide images in different aspect ratios for these platforms to pull.
Note: It can sometimes take time for the crawler to pick up on changes to your meta tags, so be aware changes might not be immediately reflected.
I was wondering if someone could explain how social media rich previews define which og:title to pick.
I use wordpress and for certain pages I insert php echo strings to inject them into the <head>. I choose to do that to change certain titles and descriptions into more commercial texts. What obvisouly happens is that there are 2 og:title meta tags; my injected one and the Wordpress backend page title.
Once I was told that the first meta tag in the top of the <head> will be picked as thé meta tag to be picked up for rich previews for example, but this seems not to happen (anymore).
Below is my current situation and exact order of meta tags in the <head>:
<html>
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title> // my injected and used by Google
<link rel="canonical" content="https://example.com">
<meta name="description" content="description">
<meta name="subject" content="example">
<meta name="og:image" content="/image.jpg"> // my injected and used by Social Media
<meta property="og:title" content="og:title #1"> // my injected og:title, but ignored
<meta property="og:description" content="description">
<meta property="og:url" content="https://example.com">
<meta name="twitter:title" content="EXAMPLE">
<meta name="twitter:description" content="description">
<link rel="alternate" href="https://example.com" hreflang="nl-nl">
<link rel="alternate" href="https://example.com" hreflang="nl-be">
<title>EXAMPLE</title> // default by Wordpress
<meta property="og:title" content="og:title #2"> // default by Wordpress and being used
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
<meta name="og:image" content="/image.jpg"> // default by Wordpress
</head>
</html>
What happens is that Whatsapp and Facebook are taking the 2nd og:title meta tag, which doesn't make sense in my opinion.
Changing the title page in the backend is not a solution, because it becomes something like Check out our wonderful shop!, this is not user friendly. Also I'm not a fan of Yoast, because Yoast loads extra code into the pages, which I don't want.
Who knows a solution to this, or can explain why this is happening?
Update & Answer
Thanks to Chris I understand that og: meta tags are being scanned from top to bottom in the <head>, and updates the 2 identical properties with the last one that is being scanned. This RDFa process is typical for apps like Facebook, Whatsapp, Twitter. One exception: og:image seems to be needed in the top, it doesn't override a second or third one below it.
Google Search related tags are being picked up by the first one in the top of the <head> and keeps that one as "first come, first serve".
Solution: I will inject og: tags into the bottom of the <head> and the other ones will be kept in the top. Tested it and it works.
Facebook and other apps generally use their own slimmed down versions of RDFa parsing, which from my understanding is a way to parse meta data from xml and html documents. From what I was reading, it seems that as the parser goes through your html page, it will add the first metadata piece it finds to it's "current subject", and if it finds another one with the same name, it will then overwrite the "current subject" with the updated info.
It seems like a pretty complicated topic, so I suppose the simple answer would just be that their parser will always take the last meta data tag and use that.
To fix the issue, I would see if you can inject your custom og:title/metadata below the one autoinjected by Wordpress.
You can read more about RDFa parsing here
I'm developing a website in Weebly platform. I'm having issues with the meta-tags because without them I can't publish/advertise the website on Facebook which is a must for the organization.
So, I have already went to Settings > SEO and than added:
<link rel="canonical" href="https://www.website.com" />
<meta property="og:url" content="https://www.website.com" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.website.com/files/theme/facebook-logo.png"/>
Because that didn't work I also added on the Pages > Index > SEO Settings the same code excerpt to the header of the page. That also didn't work.
When I go inspect the page on Chrome I verified that there are 3 repetitions of the meta tag
<meta property="og:url" content="https://www.website.com" />
which one of them is http...
What am I missing here? Is Weebly filling out meta tags by default? Is it some mechanism?
Thanks in advance
Weebly adds Open Graph meta tags for the site automatically and fills them out by default using the information you supply while defining/building your site.
If you want to change the values for these automatically injected, Open Graph meta tags, you will want to change the settings and SEO for your site/pages.
Facebook is not picking up open graph meta tags and the debugger responds as if they're not in the source code at all.
Here's the relevant page source (with title and url anonymized)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta property="og:title" content="Page Title" />
<meta property="og:url" content="http://page.url/page-name" />
<meta property="og:type" content="article" />
I found the problem. For posterity: Grav CMS sends a Content-Encoding: none header when GZIP is not enabled. Facebook doesn't like this header, it breaks it's libcurl. In the sharing debugger it doesn't report this, it instead says the tags are missing.
The simplest solution of course is to turn on GZIP in Grav config.
Side note: I thought Grav was going to be a quick solution for a family member, the simple interface coupled with it supposedly being developer friendly under the hood appealed to me. Turns out it's developer friendly in the sense that you will encounter problems that will require your developer experience to solve as a result of there being numerous documentation errors, missing basic features and bugs in the plugins required for basic functionality. Also note that Google is not your friend for solving Grav problems as there's surprisingly little community support compared to other popular CMS.
Not saying this to trash Grav, there's a lot about it that's good, the above is just stuff I wish I'd known going in.
The Social Meta Link plugin readme now explains the gzip issue, but for me I additionally had to patch the plugin source code by hand on the server to strip the internal port number from the og:url meta links because I run a reverse proxy setup.
I need to create custom share buttons for Facebook, Twitter and Google +.
At the moment I have the following:
Facebook
facebook
Google
google
Twitter
twitter</li>
This seems to be working. But I still have a few problems:
How to specify the title of the page being sent in each service?
In Google + I there is the following on the url: "confirm?hl=en" ...
If the site is not in English should I change "en" to the site's language?
Thank You,
Miguel
Social networking services look for Open Graph metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page. The following should be your bare minium tags to include. For the rest, google them and you will find them easily enough:
For the page title:
<meta property="og:title" content="Title Here" />
For the URL
<meta property="og:url" content="http://www.example.com/" />
For the image that is typically displayed when someone shares a page to their wall:
<meta property="og:image" content="http://example.com/image.jpg" />
Description text that is generally included when someone shares a page:
<meta property="og:description" content="Description Here" />
However, I'm not exactly sure what "confirm?hl=en" does, but if you want to tell a search engine to crawl a site in a different language, then you can do so with the locale property.
That's a bit more complicated, though. Check out this article for more info on internationalization.
https://developers.facebook.com/docs/opengraph/guides/internationalization/