Accelerated Mobile Pages (AMP) with Sitefinity

Sitefinity 10.1 comes with Accelerated Mobile Pages (AMP) support. The feature is in Beta, so further improvements will come with the next version of the product. 

How to Create an AMP Version of Your Articles?

Sitefinity automatically generates an AMP version for your blog posts, news and events. For the dynamic content types, you must define your own template in order to have those pages out of the box. 

The first step to start using the AMP functionality is to enable the Mobile Formats (BETA) module from Administration -> Modules & Services. The second step is to choose which content types Sitefinity should create AMP counterparts for. Go to Administration -> Settings -> Global Settings -> Mobile formats. Activate the Google AMP format and select the content type you want.   

Once you create a post, news or event, Sitefinity will automatically create an AMP page for you with the respective content. 

How to Open an AMP Page Locally?

One of the limitations of the Beta version of this feature is that you don’t have direct access to the AMP page URL—you have to do some work to get it :). Even though you don’t have the links in a convenient place in the CMS, the AMP pages of your website are indexed by the search engine properly. The easiest way to find this “secret” link is to open the details view of the article that you want (in our case a blog post) and look at its source (Ctrl + U). Find the amphtml attribute and get the URL.

The AMP page should look like this:

How to Modify the AMP Layout and Page Templates?

There are two templates that are used to build the AMP pages— the layout and content templates. The first one is used to make the shell of your AMP page, e.g. navigation and footer. The second one renders the content of your article.

The default implementation of the templates comes with each Sitefinity project. Go to MVC -> AMP and include that folder in your solution. The Layout.Default.cshtml contains the markup for your page layout. In the News.NewsItem.Default.cshtml and Blogs.BlogPost.Default.cshtml files you can find the default implementation for the News and Posts items. In case you delete those files or want to revert them, open the Telerik.Sitefinity.MobileFormats.dll and look at the embedded resources.

For new templates, you have to follow particular naming conventions:

• Layout.<TemplateName>.cshtml—for layouts
• News.NewsItem. <TemplateName>.cshtml—for news items
• <MobuleName>.<TypeName>.<templateName>.cshtml—for dynamic content types

To choose between templates, go to Administration -> Settings -> Global Settings -> Mobile formats and click on the data type you want to change. From the drop-down menu select the desired template.

How to Create a Template for a Dynamic Type?

Let’s create a new content module Animals, name the type Animal and add two fields: Title and Age. By following the above pattern we have to create a Animals.Animal.MyZooTemplate.cshtml file in the  MVC-> AMP folder to visualize the content for the AMP version of each Animal.

The template is created and we need to add some markup to complete the exercise. Keep in mind that the Fields collection of the Model is a dynamic type and to access the fields you need get them directly, e.g. Model.Fields.

Here is the full implementation:

The last step is to add the Animal type in the Publish Content list and to select the MyZooTemplate. Go to Administration -> Settings -> Global Settings -> Mobile formats and click on the Animal data type. From the drop-down menu select the MyZooTemplate.

To get the AMP URL and test the appearance of your page, you should use the approach previously described above.

Conclusions

Sitefinity provides a quick way to create AMP version of your articles with click of a button. With minimal efforts, the used templates could be extended as well. The feature is still in Beta and we would like to hear your thoughts from a marketing and developer perspective, as we work to make it as great as we can for your needs.