Recently I've been working on a Sitecore project for a large company that produces distilled beverages. One of the requirements was that before user can access any content within the site, they must pass age verification process. Still we needed to be able to share any of the pages on the Facebook, with the content specific for that particular page, not the data which is displayed on the age verification page.
While sharing the page on Facebook, it crawls the page and looks for the data that can be displayed for other Facebook users. The first thing which is checked is open graph data. I'm not going to explain it deeply in this post, but if you want to know more, you can learn it from here open graph protocol - facebook developers. What we need to know for the purposes of this article is that there are some meta tags that should be included within the html page header that are used by Facebook. Our goal was to display the page with those meta tags instead of the age verification page, if the site is crawled by Facebook.
For this purpose we chose the approach that uses Sitecore devices functionality. When the page is accessed by Facebook, the user agent of the facebook browser introduces itself as
We created a new device in the Sitecore that is used for the browser agent containing facebookexternalhit. Then we prepared a layout that is used for this device only and which contains all the open graph meta data required by Facebook. This allowed us to assure that all the end users will have to age verify before accessing the site, while Facebook can retrieve meaningful data.
Once you've set up the device and the layout, you can easily check whether you did it properly using the official Facebook URL Linter. The screenshot below shows an example of debug result for a page which has open graph meta data set.