How to add Twitter (X) and OpenGraph card meta tags to a page, and how to point their image at an absolute URL.
If you want to promote your pages on other platforms, you can post Twitter (X) and OpenGraph cards in the header section in the src/App/templates/layout/default.html.twig file.
Make sure to update all items based on your page content.
<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Basic description">
<meta name="twitter:image" content="{{ absolute_url(asset('images/app/logo.png')) }}">
<meta name="twitter:image:alt" content="Image alt">
<!-- OpenGraph card -->
<meta property="og:title" content="Page title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="{{ url('app::index') }}"/>
<meta property="og:image" content="{{ absolute_url(asset('images/app/logo.png')) }}"/>
<meta property="og:description" content="Basic description"/>In the example:
{{ url('app::index') }} is the absolute URL of the homepage, and url() returns an absolute URL for any route name, which is what cards require — you can point a card at another page the same way, just like the canonical URL does in {% block canonical %}{{ url(routeName ?? null) }}{% endblock %}.block item is present to mitigate for not-found pages, e.g. when the url is typed incorrectly.asset() on its own returns a path, so it is wrapped in absolute_url().
The image in the example, images/app/logo.png, is served from public/images/app/logo.png, where the Vite build copies it from src/App/assets/images/logo.png.
Replace it with your own card image by adding the file to src/App/assets/images/ and rebuilding.Q: Why does the card image use absolute_url() instead of just asset()?
A: Because asset() returns a path, but Twitter and OpenGraph cards require an absolute URL for the image.
Q: How do I get the homepage's absolute URL for the og:url tag?
A: With {{ url('app::index') }}.
Q: Where does the card image file need to live?
A: In src/App/assets/images/, so the Vite build copies it into public/images/app/.