https://ogp.me/# https://developers.facebook.com/docs/sharing/opengraph
This module encapsulates some of the best practices for SEO for your site.
elm-pages
will pre-render each of the static pages (in your content
directory) so that
web crawlers can efficiently and accurately process it. The functions in this module are for use
with the head
function that you pass to your Pages config (Pages.application
).
import Date
import Head
import Head.Seo as Seo
-- justinmimbs/date package
type alias ArticleMetadata =
{ title : String
, description : String
, published : Date
, author : Data.Author.Author
}
head : ArticleMetadata -> List Head.Tag
head articleMetadata =
Seo.summaryLarge
{ canonicalUrlOverride = Nothing
, siteName = "elm-pages"
, image =
{ url = Pages.images.icon
, alt = articleMetadata.description
, dimensions = Nothing
, mimeType = Nothing
}
, description = articleMetadata.description
, locale = Nothing
, title = articleMetadata.title
}
|> Seo.article
{ tags = []
, section = Nothing
, publishedTime = Just (Date.toIsoString articleMetadata.published)
, modifiedTime = Nothing
, expirationTime = Nothing
}
{ title : String
, image : Image
, canonicalUrlOverride : Maybe String
, description : String
, siteName : String
, audio : Maybe Audio
, video : Maybe Video
, locale : Maybe Locale
, alternateLocales : List Locale
, twitterCard : Head.Twitter.TwitterCard
}
These fields apply to any type in the og object types See https://ogp.me/#metadata and https://ogp.me/#optional
Skipping this for now, if there's a use case I can add it in:
{ url : Pages.Url.Url
, alt : String
, dimensions : Maybe { width : Basics.Int
, height : Basics.Int }
, mimeType : Maybe MimeType
}
See https://ogp.me/#structured
article : { tags : List String, section : Maybe String, publishedTime : Maybe Iso8601DateTime, modifiedTime : Maybe Iso8601DateTime, expirationTime : Maybe Iso8601DateTime } -> Common -> List Head.Tag
See https://ogp.me/#type_article
audioPlayer : { canonicalUrlOverride : Maybe String, siteName : String, image : Image, description : String, title : String, audio : Audio, locale : Maybe Locale } -> Common
Will be displayed as a Player card in twitter See: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card
OpenGraph audio will also be included.
The options will also be used to build up the appropriate OpenGraph <meta>
tags.
book : Common -> { tags : List String, isbn : Maybe String, releaseDate : Maybe Iso8601DateTime } -> List Head.Tag
profile : { firstName : String, lastName : String, username : Maybe String } -> Common -> List Head.Tag
See https://ogp.me/#type_profile
song : Common -> { duration : Maybe Basics.Int, album : Maybe Basics.Int, disc : Maybe Basics.Int, track : Maybe Basics.Int } -> List Head.Tag
See https://ogp.me/#type_music.song
summary : { canonicalUrlOverride : Maybe String, siteName : String, image : Image, description : String, title : String, locale : Maybe Locale } -> Common
Will be displayed as a large card in twitter See: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary
The options will also be used to build up the appropriate OpenGraph <meta>
tags.
Note: You cannot include audio or video tags with summaries.
If you want one of those, use audioPlayer
or videoPlayer
summaryLarge : { canonicalUrlOverride : Maybe String, siteName : String, image : Image, description : String, title : String, locale : Maybe Locale } -> Common
Will be displayed as a large card in twitter See: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image
The options will also be used to build up the appropriate OpenGraph <meta>
tags.
Note: You cannot include audio or video tags with summaries.
If you want one of those, use audioPlayer
or videoPlayer
videoPlayer : { canonicalUrlOverride : Maybe String, siteName : String, image : Image, description : String, title : String, video : Video, locale : Maybe Locale } -> Common
Will be displayed as a Player card in twitter See: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card
OpenGraph video will also be included.
The options will also be used to build up the appropriate OpenGraph <meta>
tags.
website : Common -> List Head.Tag