Like normal web applications I want to implement social sharing by providing share button for this I have defined the meta tag in my current html component but It's not showing the image. I think in angular there is some different way of implementing social sharing.
share.component.html
<meta name="twitter:card" content="summary"/> <!-- Card type -->
<meta name="twitter:site" content="Pratyashi"/>
<meta name="twitter:title" content="Pratyashi From Title">
<meta name="twitter:description" content="Description" />
<meta name="twitter:creator" content="Creater"/>
<meta name="twitter:type" content="image"/>
<meta name="twitter:image:src" content="https://www.gstatic.com/webp/gallery3/1_webp_a.png" />
<meta name="twitter:domain" content="http://vmandi.com" />
tWITTER
This code just displays a text : Twitter which takes to a link. If you want image associated with it, just add an <img> tag. And kindly explain what you actually want to do. meta tag is mainly for SEO purpose.
More about meta tags: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
Hope it helps: Angular6 Social Share Demo
Related
** I made a website and I want to post on fb and twitter. I want to put a different thumbnails, title and description on each web page. But i can't figure out, so every time I post a web page on fb/twitter, I need to change the og:image,title,desc. I also encounter problems, my past post in fb ( mnyweb pages), changes the thumbnail to the new :(
eg. Animal page and Fruit page
I posted yesterday about my animal page, i put an animal thumbnail and title. Then today i have to post my fruit page, I have to change again my og tags (new thumbnails (image,title,desc)). Now the post I posted yesterdat has the same thumbnail even tho they have different content. This problem keeps recurring because I need to post my web pages weekly :(
Is it possible to have different og tags for every page? This is my code. Thank you in advance**
<meta charset="utf-8">
<!-- Primary Meta Tags -->
<title>Title</title>
<meta name="title" content="title thumbnail">
<meta name="description" content="Desc thumbnail">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://website.com.ph/">
<meta property="og:title" content="TITLE THUMBNAIL">
<meta property="og:description" content="DESC THUMBNAIL">
<meta property="og:image" content="https://image.jpg"/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://website.com.ph/">
<meta property="twitter:title" content="TITLE THUMBNAIL">
<meta property="twitter:description" content="DESC THUMBNAIL">
<meta property="twitter:image" content="https://image.jpg"/>
Facebook fetches all pictures from my site.
I want to share only one picture which is on that page.
I heard about the og meta tag, but I don't know how to put it.
Use:
<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />
<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />
Fill the content =" ... " according to the content of your page.
For more information, visit 18 Meta Tags Every Webpage Should Have in 2013.
Facebook uses what's called the Open Graph Protocol to decide what things to display when you share a link. The OGP looks at your page and tries to decide what content to show. We can lend a hand and actually tell Facebook what to take from our page.
The way we do that is with og:meta tags.
The tags look something like this -
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
You'll need to place these or similar meta tags in the <head> of your HTML file. Don't forget to substitute the values for your own!
For more information you can read all about how Facebook uses these meta tags in their documentation. Here is one of the tutorials from there - https://developers.facebook.com/docs/opengraph/tutorial/
Facebook gives us a great little tool to help us when dealing with these meta tags - you can use the Debugger to see how Facebook sees your URL, and it'll even tell you if there are problems with it.
One thing to note here is that every time you make a change to the meta tags, you'll need to feed the URL through the Debugger again so that Facebook will clear all the data that is cached on their servers about your URL.
I built a tool for meta generation. It pre-configures entries for Facebook, Google+ and Twitter, and you can use it free here: http://www.groovymeta.com
To answer the question a bit more, OG tags (Open Graph) tags work similarly to meta tags, and should be placed in the HEAD section of your HTML file. See Facebook's best practises for more information on how to use OG tags effectively.
I'm trying to set up a Twitter card for a website. I've the following meta tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Title">
<meta name="twitter:description" content="My description">
<meta name="twitter:image" content="img/foo.png">
All seems fine. Strangely enough, the Twitter's card validator does not display the image. I've just read a lot of posts about this kind of issue but none of them worked for my case.
It seems that also LinkedIn sharings do have the same no-image problem.
How can I fix that?
I fixed with the complete URL of the image:
<meta name="twitter:image" content="http://bar/img/foo.png">
I recently added a share button on all of the artwork on my site, so that people viewing the artwork can easily share it on Facebook. The share button works in that the FB link does take the user to the correct artwork (url is correct). However, the image in the link is always an ugly clip out of the center of my logo banner (same image on every page on the site) and the og:xxx meta tags on my page seem to have absolutely no effect in customizing the link as Facebook claims they should. Here's the head section of one of my pages:
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<link rel="stylesheet" type="text/css" href="stitzart.css" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="art, acrylic, flip, pour, artwork, colorful, dirty cup" />
<meta name="description" content="Hilda Stitz Art Gallery featuring dirty cup pours in acrylic." />
<meta property="og:url" content="http://www.stitzweb.com/art/art.php?id=18" />
<meta property="og:type" content="article" />
<meta property="og:title" content="StitzArt - #033" />
<meta property="og:description" content="Little Planet" />
<meta property="og:image" content="http://www.stitzweb.com/art/images/share018.png" />
<title>StitzArt - Hilda Stitz Artwork</title>
</head>
and the share button on that page pulls up this dialog:
Facebook Share Dialog (with incorrect information)
How can I make the pic, title and description in the share dialog match what's in the meta data? I've searched all day and I've almost given up. The feature works for sharing, but it would be so much better if people could see a preview of the artwork before clicking on the link. Thanks in advance for any help you might offer.
On the open graph home page it shows the following :
As an example, the following is the Open Graph protocol markup for The Rock
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
Now certain services, like twitter and facebook, can use this information within their own site when linking to the url? Trying to get the terminology correct as well. Any links to open servces (edu) of og markup in web page and its use on another site appreciated.
OG Protocol is useful for Facebook only, not Twitter, which needs it's own tags for Twitter Cards.
For Facebook, your tags must be complete, like this block:
<meta property="fb:app_id" content="ENTER YOUR APP ID"/>
<meta property="fb:admins" content="ENTER YOUR PERSONAL ID"/>
<meta property="og:site_name" content="ENTER SITE NAME" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ENTER SITE TITLE"/>
<meta property="og:description" content="ENTER SITE DESCRIPTION"/>
<meta property="og:url" content="ENTER SITE URL" />
<meta property="og:image" content="ENTER IMG URL" />
<meta property="og:image:type" content="image/png" /> <!-- enter IMG extension -->
<meta property="og:image:width" content="1200" /> <!-- enter IMG width, in px -->
<meta property="og:image:height" content="630" /> <!-- enter IMG height, in px -->
Images for big facebook cards should be 1200px x 630px and to small, 600 x 315 px, so they will fit perfectly on the screen. You can check it here.
For facebook, it's also recommended that you add this to the <head>:
<head prefix="og: http://ogp.me/ns#>
Here you'll find a guide for best practices when sharing website content on Facebook. Here you'll find a full guide for OG Protocol and here you can find the Facebook Debugger Tool for OG Protocol.
Now, for Twitter, you will have to add its own tags, like that:
<meta name="twitter:card" content="summary_large_image"> <!-- there are other card types you can choose -->
<meta name="twitter:site" content="#YOUR_USERNAME">
<meta name="twitter:creator" content="#YOUR_USERNAME"> <!-- or author's name, if that is the case -->
<meta name="twitter:title" content="ENTER THE WEBSITE TITLE">
<meta name="twitter:description" content="ENTER THE WEBSITE DESCRIPTION">
<meta name="twitter:image" content="ENTER THE IMG URL">
You can find all Twitter Cards documentation here and the testing tool here
You can see working examples in this blog (Facebook & Twitter) and in this site (Facebook only).
Finally, to understand what those things do exactly, share these sites I provided you the links and you will see how the sharing posts look like on Facebook. If you don't want to share them publicly, restrict the post for yourself only, so you don't need to explain to your friends why are you sharing these contents! For Twitter, you can give a look at my own feed so you'll see some cards there.
Hope to have helped!