Enable X (Twitter) Cards in Docusaurus
To enable X (formerly Twitter) cards in Docusaurus, you primarily configure the metadata within your docusaurus.config.js (or .ts) file. Docusaurus uses these settings to populate the <head> tags that social media platforms crawl to generate preview cards. [1, 2, 3]
1. Global Configuration
Open your docusaurus.config.js and add or update the themeConfig object. This sets the default card behavior for your entire site. [2, 4, 5]
module.exports = {
// ... other config
themeConfig: {
metadata: [
{name: 'twitter:card', content: 'summary_large_image'},
{name: 'twitter:site', content: '@YourTwitterHandle'},
{name: 'twitter:creator', content: '@YourTwitterHandle'},
],
image: 'img/docusaurus-social-card.jpg', // Path to your default social card image
},
};
2. Individual Page Metadata
If you want a specific blog post or documentation page to have its own unique X card image, you can override the global settings using Front Matter at the top of your Markdown file. [1, 6]
---
title: My Awesome Page
description: A brief summary of this page for the X card.
image: /img/unique-page-card.png
---
# Your Content Here
3. Key Metadata Tags
Ensure these specific tags are present (either globally or per page) for the best results:
twitter:card: Set tosummary(small image) orsummary_large_image(full-width image).twitter:image: The URL to the image. Docusaurus typically handles this via theimagefield in your config or front matter.og:title&og:description: X often falls back to Open Graph (OG) tags if specific Twitter tags are missing. [7, 8]
4. Testing Your Card
After deploying your site, you can verify how the card looks using the X Post Validator (note: X has moved some validation features directly into the post composer preview, but third-party tools like OpenGraph.xyz are also excellent for testing). [9, 10, 11]
Would you like to know how to automate social card generation for every page instead of creating images manually?
