Adding social images to phpBB
What we’re going to do is edit the overall_header.html file for the theme. It’s usually located in the /styles/ folder
/forum/styles/prosilver/template
<link rel="image_src" href="https://res.cloudinary.com/account/my-cover-image.jpg" />
<!-- here's our code for a Twitter card -->
<meta name="twitter:image" content="https://res.cloudinary.com/account/my-cover-image.jpg">
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{PAGE_TITLE}">
<meta name="twitter:description" content="{SITENAME}: {PAGE_TITLE}">
<meta name="twitter:creator" content="@twitter-handle">
<meta name="twitter:image" content="https://res.cloudinary.com/account/my-cover-image.jpg">
<meta name="image" property="og:image" content="https://res.cloudinary.com/account/my-cover-image.jpg">
<!-- regular template code continues below -->
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>One thing to keep in mind is the templates are actually Twig files, so they are generated usually the first time the file is used.
Twig is a template system that is meant for non-developers. On a side-note, CakePHP has used Twig files internally for a while and via a plugin since 2019.
You can clear the cache from phpBB’s control panel or by deleting the forum/cache/production directory.
Test your card out with Twitter’s validator: https://cards-dev.twitter.com/validator
