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.
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.
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:
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:
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.
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:
@Html.AmpHtml(DataResolver.Resolve(Model.DataItem, "Author", null))
@Html.AmpHtml(Model.GetDateTime("PublicationDate", "MMM d, yyyy, HH:mm tt"))
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.
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.
Peter Filipov (Pepi) is a Product Manager focused on expanding Sitefinity ecosystem. His prior experience as a Developer Advocate and Manager of Engineering helps him to understand the customers’ and market needs of Sitefinity. He also is passionate about being active and healthy 24/7 😊.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates.All Rights Reserved.
Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.