Update OpenGraph website helper.

examples/docs/src/Main.elm

@@ -181,7 +181,7 @@ pageTags metadata =
             OpenGraph.website
                 { url = canonicalUrl
                 , name = "elm-pages"
-                , imageUrl = ""
+                , image = { url = "", alt = "", dimensions = Nothing, secureUrl = Nothing }
                 , description = Just siteTagline
                 }
 

examples/docs/src/OpenGraph.elm

@@ -1,4 +1,4 @@
-module OpenGraph exposing (website)
+module OpenGraph exposing (Image, website)
 
 {-| <https://ogp.me/#>
 -}
@@ -11,7 +11,7 @@ import Pages.Head as Head
 website :
     { url : String
     , name : String
-    , imageUrl : String
+    , image : Image
     , description : Maybe String
     }
     -> List Head.Tag
@@ -24,22 +24,40 @@ type Content
     = Website
         { url : String
         , name : String
-        , imageUrl : String
+        , image : Image
         , description : Maybe String
         }
 
 
+{-| See <https://ogp.me/#structured>
+-}
+type alias Image =
+    { url : String
+    , alt : String
+    , dimensions : Maybe { width : Int, height : Int }
+    , secureUrl : Maybe String
+    }
+
+
+tagsForImage image =
+    [ ( "og:image", Just image.url )
+    , ( "og:image:alt", Just image.alt )
+    , ( "og:image:width", image.dimensions |> Maybe.map .width |> Maybe.map String.fromInt )
+    , ( "og:image:height", image.dimensions |> Maybe.map .height |> Maybe.map String.fromInt )
+    ]
+
+
 tags content =
     case content of
         Website details ->
-            [ ( "og:type", Just "website" )
-            , ( "og:url", Just details.url )
-            , ( "og:locale", Just "en" )
-            , ( "og:site_name", Just details.name )
-            , ( "og:title", Just details.name )
-            , ( "og:image", Just details.imageUrl )
-            , ( "og:description", details.description )
-            ]
+            tagsForImage details.image
+                ++ [ ( "og:type", Just "website" )
+                   , ( "og:url", Just details.url )
+                   , ( "og:locale", Just "en" )
+                   , ( "og:site_name", Just details.name )
+                   , ( "og:title", Just details.name )
+                   , ( "og:description", details.description )
+                   ]
                 |> List.filterMap
                     (\( name, maybeContent ) ->
                         maybeContent