opengraph/twittercard previews #5

New issue

Open

opened 2020-01-26 21:04:19 +00:00 by rinpatch · 5 comments

rinpatch commented

2020-01-26 21:04:19 +00:00

Member

No description provided.

shpuld commented

2021-01-23 21:15:03 +00:00

Owner

noticed this too just now, if no one else will I can look into it

seanking commented

2022-08-13 05:26:10 +00:00

Member

I can always look into it. Been trying to come up with a game plan to test and develop these previews because it is relatively speaking not easy to do with a basic localhost deployment. There's no tools to my knowledge to just test the way a link will look just in an IDE or whatever. For Facebook, we'd have to use their Sharing Debugger, which requires a Facebook account. For Twitter and Discord, we'd have to make test posts with the links in them.

One idea I had was to deploy my development environment and test it out over localtunnel but I'm not sure if that's really ideal. If anyone has other ideas or info on testing OG and Twitter card previews, lmk.

I can always look into it. Been trying to come up with a game plan to test and develop these previews because it is relatively speaking not easy to do with a basic `localhost` deployment. There's no tools to my knowledge to just test the way a link will look just in an IDE or whatever. For Facebook, we'd have to use their [Sharing Debugger](https://developers.facebook.com/tools/debug/), which requires a Facebook account. For Twitter and Discord, we'd have to make test posts with the links in them. One idea I had was to deploy my development environment and test it out over localtunnel but I'm not sure if that's really ideal. If anyone has other ideas or info on testing OG and Twitter card previews, lmk.

lanodan commented

2022-08-13 05:32:09 +00:00

Owner

Well… Pleroma supports OpenGraph so basics tests can be done with it.

Otherwise, Facebook/Discord/Twitter/… should have proper documentation somewhere about what they expect.

Well… Pleroma supports OpenGraph so basics tests can be done with it. Otherwise, Facebook/Discord/Twitter/… should have proper documentation somewhere about what they expect.

seanking commented

2022-08-14 07:15:37 +00:00

Member

Ok. So, I looked into it. Our biggest friend will probably be documentation and perhaps checking on tools like OpenGraph.xyz. The framework you have currently is pretty solid for changing titles for certain pages and articles. The only improvements I can identify are figuring out using the image tags in the markdown to over-ride the OpenGraph site-wide meta tags and maybe making the og:type be article for blog posts and announcements. See this site for more info on OpenGraph spec: https://ogp.me

Otherwise, it probably should be good. Twitter cards will first check for Twitter-specific meta tags and then fall back on OpenGraph. So, we shouldn't have to worry too much about that. https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

Ok. So, I looked into it. Our biggest friend will probably be documentation and perhaps checking on tools like [OpenGraph.xyz](https://opengraph.xyz). The framework you have currently is pretty solid for changing titles for certain pages and articles. The only improvements I can identify are figuring out using the image tags in the markdown to over-ride the OpenGraph site-wide meta tags and maybe making the `og:type` be `article` for blog posts and announcements. See this site for more info on OpenGraph spec: https://ogp.me Otherwise, it probably should be good. Twitter cards will first check for Twitter-specific meta tags and then fall back on OpenGraph. So, we shouldn't have to worry too much about that. https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

lanodan commented

2022-08-15 01:12:32 +00:00

Owner

For overriding OG-Images you can probably do it like this:

diff --git a/build_article.sh b/build_article.sh
index 92d8394..1746c98 100755
--- a/build_article.sh
+++ b/build_article.sh
@@ -8,6 +8,13 @@ title=$(lowdown -Xtitle "$1")
 date=$(lowdown -Xdate "$1")
 author=$(lowdown -Xauthor "$1")
 
+if og_image=$(lowdown -Xog_image "$1")
+then
+	og_image="<meta property=\"og:image\" content=\"${og_image}\"/>"
+else
+	og_image=""
+fi
+
 cat <<EOF
 <!DOCTYPE html>
 <html xmlns:xi="http://www.w3.org/2001/XInclude" xmlns="http://www.w3.org/1999/xhtml" lang="en">
@@ -15,6 +22,7 @@ cat <<EOF
     <xi:include href="${SRCDIR}/source/layout/base_head.xml" parse="xml" xpointer="xpointer(/xml/*)" />
     <title>${title}</title>
     <link rel="stylesheet" href="/stylesheets/blog.css"/>
+    ${og_image}
   </head>
   <body>
     <xi:include href="${SRCDIR}/source/layout/navbar.xml" parse="xml"/>
diff --git a/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown b/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown
index f4cc88e..842be62 100644
--- a/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown
+++ b/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown
@@ -2,6 +2,7 @@ title: Releasing Pleroma 2.1.0
 date: 2020-08-28 1:00 UTC
 tags: ["Release"]
 author: lain
+og_image: /images/pleroma_tan_2.1_cofe.png
 
 <a class="no-style" title="Pleroma-tan drawn by hakui" href="https://pleroma.soykaf.com/notice/9yWL0EmBpZcNKqCEuO">
 ![](/images/pleroma_tan_2.1_cofe.png)

For overriding OG-Images you can probably do it like this: ```diff diff --git a/build_article.sh b/build_article.sh index 92d8394..1746c98 100755 --- a/build_article.sh +++ b/build_article.sh @@ -8,6 +8,13 @@ title=$(lowdown -Xtitle "$1") date=$(lowdown -Xdate "$1") author=$(lowdown -Xauthor "$1") +if og_image=$(lowdown -Xog_image "$1") +then + og_image="<meta property=\"og:image\" content=\"${og_image}\"/>" +else + og_image="" +fi + cat <<EOF <!DOCTYPE html> <html xmlns:xi="http://www.w3.org/2001/XInclude" xmlns="http://www.w3.org/1999/xhtml" lang="en"> @@ -15,6 +22,7 @@ cat <<EOF <xi:include href="${SRCDIR}/source/layout/base_head.xml" parse="xml" xpointer="xpointer(/xml/*)" /> <title>${title}</title> <link rel="stylesheet" href="/stylesheets/blog.css"/> + ${og_image} </head> <body> <xi:include href="${SRCDIR}/source/layout/navbar.xml" parse="xml"/> diff --git a/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown b/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown index f4cc88e..842be62 100644 --- a/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown +++ b/source/blog/2020/08/28/releasing-pleroma-2-1-0.markdown @@ -2,6 +2,7 @@ title: Releasing Pleroma 2.1.0 date: 2020-08-28 1:00 UTC tags: ["Release"] author: lain +og_image: /images/pleroma_tan_2.1_cofe.png <a class="no-style" title="Pleroma-tan drawn by hakui" href="https://pleroma.soykaf.com/notice/9yWL0EmBpZcNKqCEuO"> ![](/images/pleroma_tan_2.1_cofe.png) ```