Skip to content

Expand meta tags for better social media card support #2822

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
StevenClontz wants to merge 8 commits into
base: master
Choose a base branch
from
+106 −43
Open

Expand meta tags for better social media card support #2822

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7ce788f
first pass at social metas
StevenClontz Apr 7, 2026
857c311
fix xsl:if
StevenClontz Apr 7, 2026
baf880b
use subtitle as backup description, normalize spacing for blurb
StevenClontz Apr 7, 2026
f8b9276
revert to title-plain, add subtitle if blurb exists
StevenClontz Apr 7, 2026
4e7b6b0
add blurb to sample-article
StevenClontz Apr 7, 2026
fda1db0
use subtitle template instead of value-of
StevenClontz Apr 7, 2026
e0dab2c
finish comment in sample article
StevenClontz Apr 7, 2026
b867072
DRY up code, fix twitter card type when no image exists
StevenClontz Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions examples/sample-article/sample-article.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,11 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
<!-- use of the translation, "external/" -->
<directories data="numerical"/>

<!-- A blurb that briefly describes the document -->
<blurb>
This is a simple string (no markup is allowed) that describes
this document, a sample article for the PreTeXt markup language.
</blurb>
</docinfo>

<!--
Expand Down
144 changes: 101 additions & 43 deletions xsl/pretext-html.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
<meta http-equiv="refresh" content="0; URL='{$html-index-page}'" />
<!-- Add a canonical link here, in generic build case? -->
<!-- more "meta" elements for discovery -->
<xsl:call-template name="open-graph-info"/>
<xsl:call-template name="social-meta-info"/>
</head>
<!-- body is non-existent, i.e. empty -->
<body/>
Expand Down Expand Up @@ -11146,7 +11146,7 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
<xsl:call-template name="keywords-meta-element"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- more "meta" elements for discovery -->
<xsl:call-template name="open-graph-info"/>
<xsl:call-template name="social-meta-info"/>
<xsl:call-template name="pretext-js"/>
<xsl:call-template name="runestone-header"/>
<xsl:call-template name="diagcess-header"/>
Expand Down Expand Up @@ -11464,18 +11464,19 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
</xsl:template>


<!-- Open Graph Protocol, advertise to Facebook, others -->
<!-- Social meta tags (OpenGraph/Facebook, Twitter/X, others) -->
<!-- https://ogp.me/ -->
<!-- https://developers.facebook.com/docs/sharing/webmasters/ -->
<!-- https://webcode.tools/generators/open-graph/book -->
<!-- Sanity-check live instance: https://opengraphcheck.com/ -->
<!-- Includes Twitter/X: https://www.digitalocean.com/community/tutorials/how-to-add-twitter-card-and-open-graph-social-metadata-to-your-webpage-with-html -->
<!-- NB not used for EPUB nor Jupyter (could be in RevealJS?) -->

<xsl:template name="open-graph-info">
<!-- og:type - book, article, or missing -->
<xsl:template name="social-meta-info">
<!-- type (og) - book, article, or missing -->
<xsl:if test="$b-is-article or $b-is-book">
<xsl:call-template name="open-graph-meta-element">
<xsl:with-param name="namespace" select="'og'"/>
<xsl:call-template name="social-meta-element">
<xsl:with-param name="og" select="'yes'"/>
<xsl:with-param name="property" select="'type'"/>
<xsl:with-param name="content">
<xsl:choose>
Expand All @@ -11489,10 +11490,11 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
</xsl:with-param>
</xsl:call-template>
</xsl:if>
<!-- og:image - if it's URL can be constructed -->
<!-- image (og,twitter) - if its URL can be constructed -->
<xsl:if test="$b-has-baseurl and $docinfo/brandlogo">
<xsl:call-template name="open-graph-meta-element">
<xsl:with-param name="namespace" select="'og'"/>
<xsl:call-template name="social-meta-element">
<xsl:with-param name="og" select="'yes'"/>
<xsl:with-param name="twitter" select="'yes'"/>
<xsl:with-param name="property" select="'image'"/>
<!-- URL = baseurl + external + @source -->
<xsl:with-param name="content">
Expand All @@ -11502,48 +11504,104 @@ along with MathBook XML. If not, see <http://www.gnu.org/licenses/>.
<xsl:value-of select="$docinfo/brandlogo/@source"/>
</xsl:with-param>
</xsl:call-template>
</xsl:if>
<!-- -->
<!-- book:title (always exactly one)-->
<xsl:if test="$b-is-book">
<xsl:call-template name="open-graph-meta-element">
<xsl:with-param name="namespace" select="'book'"/>
<xsl:with-param name="property" select="'title'"/>
<!-- alttext -->
<xsl:call-template name="social-meta-element">
<xsl:with-param name="og" select="'yes'"/>
<xsl:with-param name="twitter" select="'yes'"/>
<xsl:with-param name="property" select="'image:alt'"/>
<xsl:with-param name="content">
<xsl:apply-templates select="$document-root" mode="title-plain"/>
<xsl:text>Document Logo</xsl:text>
</xsl:with-param>
</xsl:call-template>
</xsl:if>
<!-- -->
<!-- book:author (allow for multiple) -->
<xsl:if test="$b-is-book">
<xsl:for-each select="$bibinfo/author">
<xsl:call-template name="open-graph-meta-element">
<xsl:with-param name="namespace" select="'book'"/>
<xsl:with-param name="property" select="'author'"/>
<xsl:with-param name="content">
<xsl:value-of select="personname"/>
</xsl:with-param>
</xsl:call-template>
</xsl:for-each>
<!-- title (og,twitter,book) (always exactly one)-->
<xsl:call-template name="social-meta-element">
<xsl:with-param name="og" select="'yes'"/>
<xsl:with-param name="twitter" select="'yes'"/>
<xsl:with-param name="book" select="$b-is-book"/>
<xsl:with-param name="property" select="'title'"/>
<xsl:with-param name="content">
<xsl:apply-templates select="$document-root" mode="title-plain"/>
<xsl:if test="$docinfo/blurb and $document-root/subtitle">
<xsl:text>: </xsl:text>
<xsl:apply-templates select="$document-root" mode="subtitle" />
</xsl:if>
</xsl:with-param>
</xsl:call-template>
<!-- description (og,twitter) -->
<xsl:if test="$docinfo/blurb or $document-root/subtitle">
<xsl:call-template name="social-meta-element">
<xsl:with-param name="og" select="'yes'"/>
<xsl:with-param name="twitter" select="'yes'"/>
<xsl:with-param name="property" select="'description'"/>
<xsl:with-param name="content">
<xsl:choose>
<xsl:when test="$docinfo/blurb">
<xsl:value-of select="normalize-space($docinfo/blurb)"/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="$document-root" mode="subtitle" />
</xsl:otherwise>
</xsl:choose>
</xsl:with-param>
</xsl:call-template>
</xsl:if>
<!-- -->
<!-- card (twitter) -->
<xsl:call-template name="social-meta-element">
<xsl:with-param name="twitter" select="'yes'"/>
<xsl:with-param name="property" select="'card'"/>
<xsl:with-param name="content">
<xsl:choose>
<xsl:when test="$b-has-baseurl and $docinfo/brandlogo">
<xsl:text>summary_large_image</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>summary</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:with-param>
</xsl:call-template>
</xsl:template>

<xsl:template name="open-graph-meta-element">
<xsl:param name="namespace"/>
<xsl:template name="social-meta-element">
<xsl:param name="twitter"/>
<xsl:param name="og"/>
<xsl:param name="book"/>
<xsl:param name="property"/>
<xsl:param name="content"/>
<meta>
<xsl:attribute name="property">
<xsl:value-of select="$namespace"/>
<xsl:text>:</xsl:text>
<xsl:value-of select="$property"/>
</xsl:attribute>
<xsl:attribute name="content">
<xsl:value-of select="$content"/>
</xsl:attribute>
</meta>
<xsl:if test="$twitter">
<meta>
<xsl:attribute name="name">
<xsl:text>twitter:</xsl:text>
<xsl:value-of select="$property"/>
</xsl:attribute>
<xsl:attribute name="content">
<xsl:value-of select="$content"/>
</xsl:attribute>
</meta>
</xsl:if>
<xsl:if test="$og">
<meta>
<xsl:attribute name="property">
<xsl:text>og:</xsl:text>
<xsl:value-of select="$property"/>
</xsl:attribute>
<xsl:attribute name="content">
<xsl:value-of select="$content"/>
</xsl:attribute>
</meta>
</xsl:if>
<xsl:if test="$book">
<meta>
<xsl:attribute name="property">
<xsl:text>book:</xsl:text>
<xsl:value-of select="$property"/>
</xsl:attribute>
<xsl:attribute name="content">
<xsl:value-of select="$content"/>
</xsl:attribute>
</meta>
</xsl:if>
</xsl:template>


Expand Down