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.
Related
Noob question. I have a chrome extension that is throwing back funky results when it accesses an api.
I think the problem is with the user ID I'm scraping from the DOM.
What exactly are the purposes of these elements?
<meta name="twitter:app:url:googleplay" content="website://user/22457128">
<meta name="twitter:app:url:googleplay" content="website://user/22457128">
<meta property="fb:app_id" website="127876283963492">
<meta property="twitter:app:id:iphone" content="517684114">
<meta property="twitter:app:id:ipad" content="517684114">
<meta property="twitter:creator:id" content="385941344">
And why are some of the Ids at the end of them the same but others are different?
They basically show other sites how to display your website.
Like if you share a YouTube video in Twitter or Facebook is shows all nice with the video title, thumbnail, length and all those great stuff. Its all done using meta tags.
Google use website meta tags to determine what the website is about and if it is appropriate.
Here is a link example:
https://youtu.be/Luo_wCcWAaw
The first two are the exact same that's why they're I'd is the same. They tell you the name of the website to Twitter.
Onto Property's
They tell you how the website should look on different devices and on different websites
iPhone property tells how the meta tag should look on iPhone.
IPad meta says how it should look on ipad.
Fb one says how it should look on Facebook.
Im very new to html and im wondering how to do people do this with their site? https://i.leastrio.net/CVUCo5PIR6.png I would like to do this with my site but im very confused. Thanks!
Technical Background
Many social network such as Discord generate link previews by grabbing the metadata of the web page. Most of the time they grab the following metadata.
<meta property="og:type" content="website">
<meta property="og:url" content="https://linkfork.co/">
<meta property="og:title" content="LinkFork | Link Preview Customization">
<meta property="og:description" content="LinkFork lets you shorten, and customize how your link will appear when shared on social media, for free.">
<meta property="og:image" content="https://linkfork.co/images/poster.png">
So to change this for your website you need to be able to modify the HTML source code. Each social network grabs different metadata. Therefor you need to modify it for the all social network you are targeting.
Easy Solution
One easy solution is using a service that allows you to customize the link preview for any link such as LinkFork. LinkFork will allow you customize the image, title, and description of the link preview. It will generate a shorten link that you can post to any social network and have consistent link preview for all your social media.
I have added the following tag to a website:
<meta property="og:title" content="Support Seekers" />
<meta property="og:description" content="Support Seekers is an online support group where members can share personal problems in an anonymous and safe forum. Everyday our counseling psychologist will post professional recommendations regarding each issue - which is free expert help!" />
<meta property="og:image" content="http://fminteractive.co/projects/supportseekers/wp-content/uploads/2015/01/ss-newlogo.png" />
Still when I share it on Facebook, the title, description and image are different than what is mentioned in here. Why is it so?
Note: I followed the advice here.
Go to: https://developers.facebook.com/tools/debug/ and debug the URL, this will clear Facebook's cache of the meta data and force Facebook to scrape the page again.
Look out for errors of missing OG tags as sometimes these can affect what Facebook outputs.
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/
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.