Build a Page Layout with integrated content type and SEO (Page) properties in SharePoint 2013/2016

Currently, there are 3 places for users to administer

• Content Type data
• SEO data
• Page elements (web parts, article field, etc.)

Why not combine these in a nice format so users can administer all the page properties in a single area?  This article explains how:

The page layout structure explained

There are 2 main areas in a page layout that you have to be mindful of – PlaceHolderPageTitle (for the page title) and PlaceHolderMain (for your content).  Please be aware that there are a lot more placeholders to which you can add content – I’m not covering them here because they are irrelevant to this exercise.

     



     
          
     
     
          if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty(); }
     

The EditModePanel HTML Tag

Placing this tag into your PlaceHolderMain tag allows you to show content only when the page is in edit mode (SharePoint will take care of permissions for you, so you don’t have to bother with a permissions trim tag).

Adding Page Properties (Content Type Properties) to the Page

Although you can technically add these tags anywhere inside the PlaceHolderMain Content tag, place your content type fields in the EditModePanel tag (explained above).  This limits the editing of the tags to Page Edit mode only.

You can find the types and IDs of these tags by visiting the Edit Page Properties link in the ribbon.  Some samples below:

PLEASE NOTE – that for this to work, you need to register the Taxonomy Tag Prefix at the top of the file (right below all the other registers).

These are the standard registers:

<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

And you may need to add these registers to get these controls to work (depending on what you use):

<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Adding SEO (Search Engine Optimisation) Properties to the Page

The SEO properties of a publishing page are hidden in another spot in the ribbon.  To expose these on the page as well, you can add the following tags into your EditModePanel tag:

The Final Structure

PLEASE NOTE – this is a BAREBONES example of just the bits that matter.  There is no formatting included here, so what you’ll get is a working page but without a nice layout.  I’ve implemented Bootstrap and jQuery with SharePoint and recommend putting the EditModePanel content into a collapsable panel and toggling it when the header is clicked.  This has worked well for me in the past.

<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


     



     
          
          
          
          
          
          
          
          
          
          
          
     

     
      
          
      
      
           
      

      if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty(); }