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.
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 need to make social networks for example facebook.com to display website logo when someone put link on it in post, message or share it. I have googled this question and found that website should have this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
and
<meta property="og:image" content="https://www.lucida.construction/wp-content/themes/lucida-theme/images/logo_for_sn.png" />
<meta property="og:title" content="Home - Lucida ConstructionLucida Construction" />
but it doesn't give any result. I tried to do this on Facebook and LinkedIn and both of them either not showing an image at all or display some random image and not the logo that I've set in the <meta property="og:image" /> tag.
Website I try to share are http://www.resolutemarine.com and https://www.lucida.construction
Any help appreciated! Thanks!
What you did is correct. I don't know about other social media channels but facebook caches the information of your page. So if have you shared your link before the results are probably cached before you made the change in your code (inserting the og:image part). I don't know when facebook exactly clears it but you can do it manually by using their tool (again).
I tried it with one site of your linked domain and it works for me.
So if you want to test it use their tool. Otherwise you just need to wait until they grab it automatically.
Here is the link to the tool - just enter the url that you want to be crawled again by the bot: Facebook sharing debugger
I tried to share my website sometime and it kept on showing me the website logo, till I had to uninstall all plugging and it still didn't work not knowing it was the All in one SEO plugging that I selected a default image when shared on social media, so if you have AIOS installed, kindly check the settings=> Social Networks and selected the social media you want to change the profile picture if you have it installed
I have this:
<meta property="article:publisher" content="LINK_TO_FACEBOOK_FANPAGE">
<meta name="author" content="My Name">
But it suddenly stopped working and names are not showing anymore. I'm not using meta tag article:author, since not all of our colleagues have facebook profile. I remember like 1 month ago it worked well, but I noticed this change today. Did facebook remove it on purpose? If so, is it possible to override it, so it will show peoples' names even without facebook profiles?
Try debugging via Facebook Debugger
I am using OpenGraph tags so when I share my page on Facebook or Google+, those services will know what image should be displayed in the share dialog.
<meta property="og:title" content="Best Site Ever" />
<meta property="og:description" content="This website rules" />
<meta property="og:image" content="http://example.com/image.png" />
Both services were displaying the correct image, but I changed the image (and filename) in og:image. Only Facebook is showing the new image, after running it through their URL debugger. Google+ is showing the old image, I also ran my URL through their debugger, but the image will not update. Anyone know why?
Use the structured data tool to check what metadata / schema Google is parsing out. Also, sometimes the service is caching data, try appending an anchor or parameter to your URL while testing (e.g. https://foo.com becomes https://foo.com/#test1 https://foo.com?bar=1). The time it takes for the cache to invalidate is not known, so the only consistent way to force the crawler to recalculate the snippet that appears for your page is to change the url.
You might want to try generating schema using the Google+ snippet tool. Also, note that article rendering has requirements that you can follow to control how images appear in the stream. Note that if you want your content to render with a large image, you must specify article, blog, or blog posting for the schema type.
When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.
I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net
The problem with this is that as it's a background image it's overlooked.
Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.
Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?
Yes, you can set a meta tag so that Facebook knows which image to pick.
See: https://developers.facebook.com/docs/opengraph/
Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.
Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.
You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/ (The use of the URL Linter will also rebuild Facebook's cache)
There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.
<link rel="image_src" href="http://link.to/image.png" />
For Facebook there is also an other Way to achieve this by using Open Graph protocol.
You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
Then you are able to use the og: Meta-Tags like this:
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
For Facebook this six og Meta-Tags are required:
og:title
og:type
og:image
og:url
og:site_name
og:admins OR og:app_id
You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/
Like others have answered but it only works for me when i use (https)
<meta property="og:image" content="https://link.to/image.png" />
Instead of
<meta property="og:image" content="http://link.to/image.png" />
what if you did like a img but in css put
#logo{
display: none; }
<img id="logo" src="yourlogohere.jpg">
the image would not show up on the page but i don't know if facebook would see the image
As already said: Best would be to use the metatag with the og:image opengraph property.
In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...