Latest Music :
Home » , , » Integrating Open Graph Into A Public-Facing Website Built With SharePoint 2013

Integrating Open Graph Into A Public-Facing Website Built With SharePoint 2013

Wednesday, March 12, 2014 | 0 comments

Publishing Open Graph metadata for a website that is built with SharePoint 2013 isn’t complex, but there a few things that you should consider. First of all Open Graph defines different types of web content – similar to what you can achieve with Content Types in SharePoint. Before you start integrating Open Graph into your website, you should have a clear understanding of what types of content you have on your website, and how it can be described most effectively by using Open Graph.

Next to the different types of content that you can publish on your website, there are also differences in how that content is published. SharePoint 2013 offers two content publishing models:
  1. The classic content publishing model, that you might have known from SharePoint 2007 and 2010 and where the physical location of pages determined their location in the hierarchy and navigation of the website.
  2. The new search-driven publishing model that uses SharePoint 2013 Search to publish content from one or more sources.
These publishing models have two different ways of publishing content and, depending on which one you are using on your website, you should plan for publishing the information according to your content publishing model.
Open Graph information is published using HTML meta tags. Those tags must be located in the head section of your website. To support publishing different Open Graph information for different types of pages and content publishing models, you should define a Content Place Holder in your Master Page. This will allow you to fill that placeholder with the appropriate metadata from within the different Page Layouts.. The following code snippet shows a Content Place Holder added to the standard seattle.master Master Page to support publishing Open Graph information:
<head>
<!–MS:<asp:ContentPlaceHolder
id=”OpenGraphPlaceHolder” runat=”server”>–>
<!–ME:</asp:ContentPlaceHolder>–>
</head>
According to the Open Graph protocol there are four properties that are required for every web page: titletype,image and URL. Although Open Graph defines a few content types, if you are not publishing information about video or audio, the odds are high that you will be using the article type for the majority of your web pages. Because not every page is an article, you might want to use the website type. The website type is the default type if no type is specified. To simplify working with Open Graph we could expand the code snippet above by adding the information about the title, URL and type. This would prevent us from repeating the same code snippet within each Page Layout.
Although the basic Open Graph information is a part of the SEO information published by SharePoint 2013, standard SharePoint 2013 SEO controls cannot be used directly to render this information on Master Pages and Page Layouts as Open Graph meta tags. To use those controls for the purpose of publishing Open Graph metadata, I have built a set of wrapper controls and published together with this article to illustrate how you can build similar wrapper controls.
By leveraging Search Engine Optimization capabilities of SharePoint 2013 we can retrieve the information about the page as follows:
<head>
<!–SPM:<%@Register Tagprefix=”Contoso”
Namespace=”Contoso.SharePoint.Seo.Controls”
Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=a285ef6967f781d3″%>–>
<!–MS:<Contoso:TemplatedControlWrapper
runat=”server”>–>
<Control>
   <control
type=”Microsoft.SharePoint.Publishing.WebControls.SeoBrowserTitle”
assembly=”Microsoft.SharePoint.Publishing, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
</Control>
<ContentTemplate><meta
property=”og:title” content=”$Value$”/></ContentTemplate>
<!–ME:</Contoso:TemplatedControlWrapper>–>
<!–MS:<Contoso:HyperlinkControlWrapper
runat=”server”>–>
<Control>
   <control
type=”Microsoft.SharePoint.Publishing.WebControls.SeoCanonicalLink”
assembly=”Microsoft.SharePoint.Publishing, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c” />
</Control>
<ContentTemplate><meta
property=”og:url”
content=”$Url$”/></ContentTemplate>
<!–ME:</Contoso:HyperlinkControlWrapper>–>
<meta property=”og:type content=”article”
/>
<!–MS:<asp:ContentPlaceHolder
id=”OpenGraphPlaceHolder” runat=”server”>–>
<!–ME:</asp:ContentPlaceHolder>–>
</head>
This approach assumes that you want the title of your page to be published on social networks in the same way as it is displayed in the title bar of a web browser. Should your scenario differ, you can replace the contents of the title property
with a suitable alternative, or remove it and have it filled from within the OpenGraphPlaceHolder content place
holder.
The great benefit of leveraging the standard SharePoint 2013 Search Engine Optimization controls, as shown above, is that they work for both classic as well as search-driven content publishing model and will automatically retrieve the necessary content using the necessary approach.
The next step is to provide the page-type specific information according to the Open Graph protocol. For pages using the classic publishing model you can use Publishing controls to retrieve the content, for example:
<!–MS:<asp:ContentPlaceHolder
id=”OpenGraphPlaceHolder” runat=”server”>–>
   <!–SPM:<%@Register
Tagprefix=”Contoso”
Namespace=”Contoso.SharePoint.Seo.Controls”
Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=a285ef6967f781d3″%>–>
   <!–MS:<Contoso:TemplatedControlWrapper
runat=”server”>–>
   <Control>
     <control
type=”Microsoft.SharePoint.WebControls.FieldValue”
assembly=”Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c” FieldName=”PublishingContactProfileUrl”
/>
   </Control>
   <ContentTemplate><meta
property=”article:author”
content=”$Value$”/></ContentTemplate>
   <!–ME:</Contoso:TemplatedControlWrapper>–>
<!–ME:</asp:ContentPlaceHolder>–>
When using search-driven publishing you would use Catalog Item Reuse Web Parts instead:
<!–MS:<asp:ContentPlaceHolder
id=”OpenGraphPlaceHolder” runat=”server”>–>
   <!–SPM:<%@Register
Tagprefix=”Contoso ”
Namespace=”Contoso.SharePoint.Seo.Controls”
Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=a285ef6967f781d3″%>–>
   <!–MS:<Contoso:TemplatedControlWrapper
runat=”server”>–>
   <Control>
     <control
type=”Microsoft.Office.Server.Search.WebControls.CatalogItemReuseWebPart”
assembly=”Microsoft.Office.Server.Search, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c”
UseSharedDataProvider=”True”
SelectedPropertiesJson=”[&quot;PublishingContactProfileUrlOWSTEXT&quot;]“
/>
   </Control>
   <ContentTemplate><meta
property=”article:author” content=”$Value$”/></ContentTemplate>
   <!–ME:</Contoso:TemplatedControlWrapper>–>
<!–ME:</asp:ContentPlaceHolder>–>
When using cross-site publishing, in most scenarios the content of the detail pages, called catalog item page, is surfaced from the search index and can be retrieved as shown above.The content of overview pages, called category pages, is determined by the information coming from the Managed Metadata Service. Should you need to retrieve information from your taxonomy to render it as part of your Open Graph manifest, you can do so by using the TermProperty control:
<!–MS:<asp:ContentPlaceHolder
id=”OpenGraphPlaceHolder” runat=”server”>–>
   <!–SPM:<%@Register
Tagprefix=”Contoso”
Namespace=”Contoso.SharePoint.Seo.Controls”
Assembly=”Contoso.SharePoint.Seo, Version=1.0.0.0, Culture=neutral,
PublicKeyToken=a285ef6967f781d3″%>–>
   <!–SPM:<%@Register
TagPrefix=”Taxonomy”
Namespace=”Microsoft.SharePoint.Taxonomy”
Assembly=”Microsoft.SharePoint.Taxonomy, Version=15.0.0.0,
Culture=neutral, PublicKeyToken=71e9bce111e9429c”%>–>
   <!–MS:<Contoso:TemplatedControlWrapper
runat=”server”>–>
   <Control>
     <control
type=”Microsoft.SharePoint.Taxonomy.TermProperty” assembly=” Microsoft.SharePoint.Taxonomy,
Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c”
PropertyName=”Title” />
   </Control>
   <ContentTemplate><meta
property=”article:section”
content=”$Value$”/></ContentTemplate>
   <!–ME:</Contoso:TemplatedControlWrapper>–>
<!–ME:</asp:ContentPlaceHolder>–>
Different social networks support different meta data. Depending on which social network you want to integrate with your website, you should verify the relevant API. By using the techniques showed above, you can provide relevant information about your web pages, and ensure proper presentation of your content on social networks.
Having configured the basic information about our web pages, let’s explore the different integration capabilities offered by social networks. For brevity we will focus on Facebook, but presented mechanisms could apply to other social networks as well.
Share this article :

No comments:

Post a Comment

 
Support : Chandra Optiandi || STMIK Amikom Yogyakarta
Copyright © 2014. Welcome,Reader! - All Rights Reserved
Template Modify By : Chandra Optiandi
Proudly Powered By : Blogger