dillonkearns / elm-pages / Head.Seo

https://developers.facebook.com/docs/sharing/opengraph

This module encapsulates some of the best practices for SEO for your site.

elm-pages pre-renders the HTML for your pages (either at build-time or server-render time) so that web crawlers can efficiently and accurately process it. The functions in this module are for use with the head function in your Route modules to help you build up a set of <meta> tags that includes common meta tags used for rich link previews, namely OpenGraph tags and Twitter card tags.

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
            }


type alias Common =
{ 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:


type alias Image =
{ 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 DateOrDateTime, modifiedTime : Maybe DateOrDateTime, expirationTime : Maybe DateOrDateTime } -> 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 DateOrDateTime } -> List Head.Tag

See https://ogp.me/#type_book

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

https://ogp.me/#type_website