commit: 7bdeb9a1e561bd061410a4174d4ee155589943c5
parent 6f48ade41736ffd5ac02eee445c35516cbbbe907
Author: Mark Felder <feld@feld.me>
Date: Fri, 28 Feb 2025 13:17:44 -0800
Fix OpenGraph/TwitterCard meta tag ordering for posts with multiple attachments
Diffstat:
5 files changed, 150 insertions(+), 40 deletions(-)
diff --git a/changelog.d/twittercard-tag-order.fix b/changelog.d/twittercard-tag-order.fix
@@ -0,0 +1 @@
+Fix OpenGraph/TwitterCard meta tag ordering for posts with multiple attachments
diff --git a/lib/pleroma/web/metadata/providers/open_graph.ex b/lib/pleroma/web/metadata/providers/open_graph.ex
@@ -78,10 +78,10 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraph do
# object when a Video or GIF is attached it will display that in Whatsapp Rich Preview.
case Utils.fetch_media_type(@media_types, url["mediaType"]) do
"audio" ->
- [
- {:meta, [property: "og:audio", content: MediaProxy.url(url["href"])], []}
- | acc
- ]
+ acc ++
+ [
+ {:meta, [property: "og:audio", content: MediaProxy.url(url["href"])], []}
+ ]
# Not using preview_url for this. It saves bandwidth, but the image dimensions will
# be wrong. We generate it on the fly and have no way to capture or analyze the
@@ -89,18 +89,18 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraph do
# in timelines too, but you can get clever with the aspect ratio metadata as a
# workaround.
"image" ->
- [
- {:meta, [property: "og:image", content: MediaProxy.url(url["href"])], []},
- {:meta, [property: "og:image:alt", content: attachment["name"]], []}
- | acc
- ]
+ (acc ++
+ [
+ {:meta, [property: "og:image", content: MediaProxy.url(url["href"])], []},
+ {:meta, [property: "og:image:alt", content: attachment["name"]], []}
+ ])
|> maybe_add_dimensions(url)
"video" ->
- [
- {:meta, [property: "og:video", content: MediaProxy.url(url["href"])], []}
- | acc
- ]
+ (acc ++
+ [
+ {:meta, [property: "og:video", content: MediaProxy.url(url["href"])], []}
+ ])
|> maybe_add_dimensions(url)
|> maybe_add_video_thumbnail(url)
diff --git a/lib/pleroma/web/metadata/providers/twitter_card.ex b/lib/pleroma/web/metadata/providers/twitter_card.ex
@@ -61,13 +61,13 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
Enum.reduce(attachment["url"], [], fn url, acc ->
case Utils.fetch_media_type(@media_types, url["mediaType"]) do
"audio" ->
- [
- {:meta, [name: "twitter:card", content: "player"], []},
- {:meta, [name: "twitter:player:width", content: "480"], []},
- {:meta, [name: "twitter:player:height", content: "80"], []},
- {:meta, [name: "twitter:player", content: player_url(id)], []}
- | acc
- ]
+ acc ++
+ [
+ {:meta, [name: "twitter:card", content: "player"], []},
+ {:meta, [name: "twitter:player:width", content: "480"], []},
+ {:meta, [name: "twitter:player:height", content: "80"], []},
+ {:meta, [name: "twitter:player", content: player_url(id)], []}
+ ]
# Not using preview_url for this. It saves bandwidth, but the image dimensions will
# be wrong. We generate it on the fly and have no way to capture or analyze the
@@ -75,16 +75,16 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
# in timelines too, but you can get clever with the aspect ratio metadata as a
# workaround.
"image" ->
- [
- {:meta, [name: "twitter:card", content: "summary_large_image"], []},
- {:meta,
+ (acc ++
[
- name: "twitter:image",
- content: MediaProxy.url(url["href"])
- ], []},
- {:meta, [name: "twitter:image:alt", content: truncate(attachment["name"])], []}
- | acc
- ]
+ {:meta, [name: "twitter:card", content: "summary_large_image"], []},
+ {:meta,
+ [
+ name: "twitter:image",
+ content: MediaProxy.url(url["href"])
+ ], []},
+ {:meta, [name: "twitter:image:alt", content: truncate(attachment["name"])], []}
+ ])
|> maybe_add_dimensions(url)
"video" ->
@@ -92,17 +92,17 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCard do
height = url["height"] || 480
width = url["width"] || 480
- [
- {:meta, [name: "twitter:card", content: "player"], []},
- {:meta, [name: "twitter:player", content: player_url(id)], []},
- {:meta, [name: "twitter:player:width", content: "#{width}"], []},
- {:meta, [name: "twitter:player:height", content: "#{height}"], []},
- {:meta, [name: "twitter:player:stream", content: MediaProxy.url(url["href"])],
- []},
- {:meta, [name: "twitter:player:stream:content_type", content: url["mediaType"]],
- []}
- | acc
- ]
+ acc ++
+ [
+ {:meta, [name: "twitter:card", content: "player"], []},
+ {:meta, [name: "twitter:player", content: player_url(id)], []},
+ {:meta, [name: "twitter:player:width", content: "#{width}"], []},
+ {:meta, [name: "twitter:player:height", content: "#{height}"], []},
+ {:meta, [name: "twitter:player:stream", content: MediaProxy.url(url["href"])],
+ []},
+ {:meta, [name: "twitter:player:stream:content_type", content: url["mediaType"]],
+ []}
+ ]
_ ->
acc
diff --git a/test/pleroma/web/metadata/providers/open_graph_test.exs b/test/pleroma/web/metadata/providers/open_graph_test.exs
@@ -9,6 +9,7 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraphTest do
alias Pleroma.UnstubbedConfigMock, as: ConfigMock
alias Pleroma.Web.Metadata.Providers.OpenGraph
+ alias Pleroma.Web.Metadata.Utils
setup do
ConfigMock
@@ -197,4 +198,58 @@ defmodule Pleroma.Web.Metadata.Providers.OpenGraphTest do
"http://localhost:4001/proxy/preview/LzAnlke-l5oZbNzWsrHfprX1rGw/aHR0cHM6Ly9wbGVyb21hLmdvdi9hYm91dC9qdWNoZS53ZWJt/juche.webm"
], []} in result
end
+
+ test "meta tag ordering matches attachment order" do
+ user = insert(:user, name: "Jimmy Hendriks", bio: "born 19 March 1994")
+
+ note =
+ insert(:note, %{
+ data: %{
+ "actor" => user.ap_id,
+ "tag" => [],
+ "id" => "https://pleroma.gov/objects/whatever",
+ "summary" => "",
+ "content" => "pleroma in a nutshell",
+ "attachment" => [
+ %{
+ "url" => [
+ %{
+ "mediaType" => "image/png",
+ "href" => "https://example.com/first.png",
+ "height" => 1024,
+ "width" => 1280
+ }
+ ]
+ },
+ %{
+ "url" => [
+ %{
+ "mediaType" => "image/png",
+ "href" => "https://example.com/second.png",
+ "height" => 1024,
+ "width" => 1280
+ }
+ ]
+ }
+ ]
+ }
+ })
+
+ result = OpenGraph.build_tags(%{object: note, url: note.data["id"], user: user})
+
+ assert [
+ {:meta, [property: "og:title", content: Utils.user_name_string(user)], []},
+ {:meta, [property: "og:url", content: "https://pleroma.gov/objects/whatever"], []},
+ {:meta, [property: "og:description", content: "pleroma in a nutshell"], []},
+ {:meta, [property: "og:type", content: "article"], []},
+ {:meta, [property: "og:image", content: "https://example.com/first.png"], []},
+ {:meta, [property: "og:image:alt", content: nil], []},
+ {:meta, [property: "og:image:width", content: "1280"], []},
+ {:meta, [property: "og:image:height", content: "1024"], []},
+ {:meta, [property: "og:image", content: "https://example.com/second.png"], []},
+ {:meta, [property: "og:image:alt", content: nil], []},
+ {:meta, [property: "og:image:width", content: "1280"], []},
+ {:meta, [property: "og:image:height", content: "1024"], []}
+ ] == result
+ end
end
diff --git a/test/pleroma/web/metadata/providers/twitter_card_test.exs b/test/pleroma/web/metadata/providers/twitter_card_test.exs
@@ -202,4 +202,58 @@ defmodule Pleroma.Web.Metadata.Providers.TwitterCardTest do
{:meta, [name: "twitter:player:stream:content_type", content: "video/webm"], []}
] == result
end
+
+ test "meta tag ordering matches attachment order" do
+ user = insert(:user, name: "Jimmy Hendriks", bio: "born 19 March 1994")
+
+ note =
+ insert(:note, %{
+ data: %{
+ "actor" => user.ap_id,
+ "tag" => [],
+ "id" => "https://pleroma.gov/objects/whatever",
+ "summary" => "",
+ "content" => "pleroma in a nutshell",
+ "attachment" => [
+ %{
+ "url" => [
+ %{
+ "mediaType" => "image/png",
+ "href" => "https://example.com/first.png",
+ "height" => 1024,
+ "width" => 1280
+ }
+ ]
+ },
+ %{
+ "url" => [
+ %{
+ "mediaType" => "image/png",
+ "href" => "https://example.com/second.png",
+ "height" => 1024,
+ "width" => 1280
+ }
+ ]
+ }
+ ]
+ }
+ })
+
+ result = TwitterCard.build_tags(%{object: note, activity_id: note.data["id"], user: user})
+
+ assert [
+ {:meta, [name: "twitter:title", content: Utils.user_name_string(user)], []},
+ {:meta, [name: "twitter:description", content: "pleroma in a nutshell"], []},
+ {:meta, [name: "twitter:card", content: "summary_large_image"], []},
+ {:meta, [name: "twitter:image", content: "https://example.com/first.png"], []},
+ {:meta, [name: "twitter:image:alt", content: ""], []},
+ {:meta, [name: "twitter:player:width", content: "1280"], []},
+ {:meta, [name: "twitter:player:height", content: "1024"], []},
+ {:meta, [name: "twitter:card", content: "summary_large_image"], []},
+ {:meta, [name: "twitter:image", content: "https://example.com/second.png"], []},
+ {:meta, [name: "twitter:image:alt", content: ""], []},
+ {:meta, [name: "twitter:player:width", content: "1280"], []},
+ {:meta, [name: "twitter:player:height", content: "1024"], []}
+ ] == result
+ end
end
