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!