0

I am creating a asp.net website using c# and I have placed buttons so that users can share desired articles on various social media platforms.

I have also added a g+ share button, it does share the links but while sharing it is not showing the title and description of the article, instead it keeps on showing the website heading in place of title of article and instead of description it shows the text placed in Contact Us tag.

The following are the images of the page to share and what it shows while sharing:

enter image description here enter image description here

You can try it yourself by visiting this website.(You might find various issues with this website as this site is in development so please ignore any such issues)

This is the HTML code that I'm using:

<a href="https://plus.google.com/share?url=<%=HttpContext.Current.Request.Url.AbsoluteUri %>" target="_blank"><i class="fa fa-google-plus"></i></a>

Please suggest me how I can solve this issue, do I need to place buttons at a certain position or there is some extra code that I need to write.

Akshay Bhardwaj
  • 65
  • 2
  • 12

1 Answers1

1

You should add the <meta> tags https://developers.google.com/+/web/snippet/article-rendering

<meta property="og:type" content="article" /> <meta itemprop="og:headline" content="Top 10 Most Challenging Hikes in North America" /> <meta itemprop="og:description" content="Looking for a challenging hike? We spent the past year spanning the continent for the most grueling trails. Check out the entire ranked list, and learn about our methodology..." /> <meta property="og:image" content="http://i.sportyfitness.com/media/tough-trail-lrg.jpg" />

Facebook (https://developers.facebook.com/docs/sharing/webmasters) uses the same metas twitter (https://dev.twitter.com/cards/getting-started) uses twitter:card

if you're doing a SPA you should check https://prerender.io/

EDIT

Facebook Sharing debugger (https://developers.facebook.com/tools/debug/) Twitter card validator (https://cards-dev.twitter.com/validator)

jjchiw
  • 4,375
  • 1
  • 29
  • 30
  • That seems to be the right solution to me, but can you please suggest me where to write this code, as I have an anchor tag and also a CSS class that provides me with the image. – Akshay Bhardwaj Nov 19 '16 at 13:03
  • should be in the , if you're using a contentpage here it's the answer http://stackoverflow.com/questions/6198726/how-to-add-meta-tag-to-asp-net-content-page – jjchiw Nov 19 '16 at 13:31
  • Should I remove the anchor tag or modify that in some way? – Akshay Bhardwaj Nov 19 '16 at 14:33
  • You need to put the fullurl of the site, article, image in the metas... yes remove the anchor tag – jjchiw Nov 19 '16 at 14:43