If you have tried sharing a nopCommerce product page over to Facebook, or Twitter, you know that it doesn’t always look good. The image scrapped by Facebook is often not the main product image. Sometimes the description is blank, and sometimes it is erroneous.

The question is, can we improve nopCommerce such that the products shared over to major social networks can be displayed nicely, with nice picture and proper title and description? Yes, and it turned out that it’s quite easy to do so!

NOTE: This tutorial only works for nopCommerce 3.30 and above.

Adding the Social Media Meta Tags

First, open up your nopCommerce project in Visual Studio. Determine the Product Template you want to work on. You most probably want to work on both ProductTemplate.SimpleProduct and ProductTemplate.GroupedProduct. The process is the same, so we’ll just take ProductTemplate.SimpleProduct as example.

You should see something like:

//title, meta
Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);

Now, all you need to do is add to following codes.

//Twitter Card
Html.AddHeadCustomParts("<meta name=\"twitter:card\" content=\"summary\">");
Html.AddHeadCustomParts("<meta name=\"twitter:site\" content=\"" + storeContext.CurrentStore.Name + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:url\" content=\"" + Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme) + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:title\" content=\"" + Model.Name + "\">");
Html.AddHeadCustomParts("<meta name=\"twitter:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\">");
if (!String.IsNullOrEmpty(Model.ShortDescription))
{
    Html.AddHeadCustomParts("<meta name=\"twitter:description\" content=\"" + Model.ShortDescription + "\">");
}

//Open Graph Data
Html.AddHeadCustomParts("<meta property=\"og:url\" content=\"" + Url.RouteUrl("Product", new { SeName = Model.SeName }, this.Request.Url.Scheme) + "\">");
Html.AddHeadCustomParts("<meta property=\"og:site_name\" content=\"" + storeContext.CurrentStore.Name + "\">");
Html.AddHeadCustomParts("<meta property=\"og:type\" content=\"product\">");
Html.AddHeadCustomParts("<meta property=\"og:title\" content=\"" + Model.Name + "\">");
Html.AddHeadCustomParts("<meta property=\"og:image\" content=\"" + Model.DefaultPictureModel.ImageUrl + "\">");
if (!String.IsNullOrEmpty(Model.ShortDescription))
{
    Html.AddHeadCustomParts("<meta property=\"og:description\" content=\"" + Model.ShortDescription + "\">");
}

And now your nopCommerce product page will make full use of Facebook and Twitter’s Meta Tags parsing feature.

Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!