common/app/views/fragments/metaData.scala.html (147 lines of code) (raw):
@import views.support.StripHtmlTagsAndUnescapeEntities
@()(implicit page: model.Page, request: RequestHeader, context: model.ApplicationContext)
@import common.{AnalyticsHost, _}
@import conf.{Configuration, _}
@import model.meta.LinkedData
@import model.Page
@import views.support.{SeoThumbnail, StripHtmlTags}
@import conf.switches.Switches.SmartAppBanner
@import play.api.Mode.{Dev, Prod}
<meta charset="utf-8">
@page.metadata.description.map { description =>
<meta name="description" content="@StripHtmlTags(description)" />
}
@* Critical meta data that have an impact on rendering speed *@
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
@* http://www.chromium.org/developers/design-documents/dns-prefetching *@
<link rel="dns-prefetch" href="@Configuration.assets.path" />
<link rel="dns-prefetch" href="@Configuration.images.host" />
<link rel="dns-prefetch" href="@Configuration.ajax.url" />
<link rel="dns-prefetch" href="@AnalyticsHost()" />
<link rel="dns-prefetch" href="//j.ophan.co.uk" />
<link rel="dns-prefetch" href="//ophan.theguardian.com" />
<link rel="dns-prefetch" href="@Configuration.debug.beaconUrl" />
<link rel="preconnect" href="@Configuration.assets.path" />
<link rel="preconnect" href="@Configuration.images.host" />
<link rel="preconnect" href="//interactive.guim.co.uk" />
@if(context.environment.mode == Prod){
<link rel="preconnect" href="https://sourcepoint.theguardian.com" />
}
<link rel="apple-touch-icon" sizes="152x152" href="@Static("images/favicons/152x152.png")" />
<link rel="apple-touch-icon" sizes="144x144" href="@Static("images/favicons/144x144.png")" />
<link rel="apple-touch-icon" sizes="120x120" href="@Static("images/favicons/120x120.png")" />
<link rel="apple-touch-icon" sizes="114x114" href="@Static("images/favicons/114x114.png")" />
<link rel="apple-touch-icon" sizes="72x72" href="@Static("images/favicons/72x72.png")" />
<link rel="apple-touch-icon-precomposed" href="@Static("images/favicons/57x57.png")" />
@Page.getContentPage(page).map { page =>
@if(page.item.content.shouldAmplify) {
<link rel="amphtml" href="@AmpLinkTo{/@page.metadata.id}">
}
}
@* Additional meta data that does not impact rendering speed (and can live at the end of the <head>) *@
@if(context.environment.mode == Dev){
<link rel="shortcut icon" type="image/png" href="@Static("images/favicons/32x32-dev.ico")" />
} else {
<link rel="shortcut icon" type="image/png" href="@Static("images/favicons/32x32.ico")" />
}
@*
ONLY for EDITONALISED sections
https://support.google.com/webmasters/answer/189077
*@
@Edition.localizedEditionLinks(request).map{ link =>
<link rel="alternate" href="@LinkTo(link.path, link.edition)" hreflang="@link.locale.toLanguageTag" />
}
@page.metadata.rssPath.map { path =>
<link href="@{LinkTo(path)}" rel="alternate" type="application/rss+xml" title="@views.support.Title(page) RSS feed" />
}
@if(!page.metadata.shouldGoogleIndex) { <meta name="robots" content="noindex"> }
<link rel="canonical" href="@LinkTo(page.metadata.canonicalUrl.map(LinkTo(_)).getOrElse(CanonicalLink(request, page.metadata.webUrl)))" />
<meta name="apple-mobile-web-app-title" content="Guardian" />
<meta name="application-name" content="The Guardian" />
<meta name="msapplication-TileColor" content="#052962" />
<meta name="theme-color" content="#052962">
<meta name="msapplication-TileImage" content="@Static("images/favicons/windows_tile_144_b.png")" />
@if(SmartAppBanner.isSwitchedOn) {
<meta name="apple-itunes-app" content="app-id=@Configuration.ios.ukAppId, app-argument=@page.metadata.webUrl, affiliate-data=ct=newsmartappbanner&pt=304191">
}
@Page.getContent(page).map { content =>
@content.tags.contributors.map { contributor =>
<meta name="author" content="@contributor.name" />
}
}
@* https://support.google.com/customsearch/answer/1626955?hl=en *@
@SeoThumbnail(page).map{ thumb =>
<meta name="thumbnail" content="@thumb" />
}
@page match {
case c: model.ContentPage => {
@* https://support.google.com/news/publisher/answer/68297?hl=en-GB *@
@if(c.item.tags.keywords.nonEmpty) {
<meta name="keywords" content="@c.item.tags.keywords.map(_.name).mkString(",")" />
<meta name="news_keywords" content="@c.item.tags.keywords.take(10).map(_.name).mkString(",")" />
}
@c.getOpenGraphProperties.map { case (key, value) =>
<meta property="@key" content="@StripHtmlTagsAndUnescapeEntities(value)" />
}
@c.getTwitterProperties.map{ case (key, value) =>
<meta name="@key" content="@StripHtmlTagsAndUnescapeEntities(value)" />
}
}
case s: model.StandalonePage => {
@s.getOpenGraphProperties.map{ case (key, value) =>
<meta property="@key" content="@StripHtmlTagsAndUnescapeEntities(value)" />
}
@s.getTwitterProperties.map{ case (key, value) =>
<meta name="@key" content="@StripHtmlTagsAndUnescapeEntities(value)" />
}
}
case _ => {}
}
@* https://dev.twitter.com/web/overview/privacy *@
<meta name="twitter:dnt" content="on">
@page.metadata.openGraphImages.map{ case (imageUrl) =>
<meta property="og:image" content="@Html(imageUrl)" />
}
@Configuration.facebook.pages.authorisedIdsForLinkEdits.map { id =>
<meta property="fb:pages" content="@id" />
}
@page.metadata.pagination.map{ pagination =>
@pagination.next.map{ next => <link rel="next" href="@LinkTo(page.metadata.url+"?page="+next)" /> }
@pagination.previous.map{ prev => <link rel="prev" href="@LinkTo(page.metadata.url+(if(prev != 1){"?page="+prev}else{""}))" /> }
}
@*
this script allows you to hook up an external debugger for mobile devices
see: http://people.apache.org/~pmuellr/weinre/docs/latest/
*@
@if(context.environment.mode == Dev) {
@Configuration.javascript.pageData.get("guardian.page.iphoneDebugger").map{ scriptUrl => <script src="@scriptUrl"></script> }
}
@page.metadata.linkedData.map { linkedData =>
<script data-schema="@{linkedData.`@type`}" type="application/ld+json">
@Html(LinkedData.toJson(linkedData))
</script>
}
@*
This add structured data markup for google enhanced search result (https://developers.google.com/search/docs/data-types/data-type-selector)
and the semantic web.
Sources of the markup is our own structured data from the Content API
*@
@Page.getContentPage(page).map(_.item).map { item =>
@for(review <- item.content.atoms.map(_.reviews).getOrElse(Nil)) {
@review.data.game.map { game => @fragments.atoms.structureddata.gameReview(review, game, item.tags.contributors) }
@review.data.film.map { film => @fragments.atoms.structureddata.filmReview(review, film, item.tags.contributors) }
@review.data.restaurant.map { restaurant => @fragments.atoms.structureddata.restaurant.restaurantReview(review, restaurant, item.tags.contributors) }
}
@* add here another atom (organisations, people, events, ...) *@
}
@page.metadata.iosId("google").map { iosId =>
<link rel="alternate" href="ios-app://409128287/gnmguardian/@iosId" />
}
@*
As a European publisher, we need to include snippets and thumbnails in our search previews - https://search.google.com/search-console/settings/eucd?resource_id=https%3A%2F%2Fwww.theguardian.com%2F
https://developers.google.com/search/reference/robots_meta_tag
*@
<meta name="robots" content="max-image-preview:large">