How to add twitter metatags dynamically in Next.js 13

How to Add Twitter Meta Tags Dynamically in Next.js 13 As we dive deeper into dynamic content generation with Next.js 13's generateMetadata function, a common...

2026-08-10

How to Add Twitter Meta Tags Dynamically in Next.js 13

As we dive deeper into dynamic content generation with Next.js 13's generateMetadata function, a common question arises: If we successfully implement OpenGraph (OG) tags for social sharing, how do we extend this to include specific Twitter card properties? While Next.js handles the core structure beautifully, adding platform-specific tags requires careful structuring of the returned metadata object.

This post will walk you through the practical steps and best practices for dynamically generating Twitter meta tags using the App Router approach in Next.js 13.

Understanding Metadata Structure in Next.js

The generateMetadata function allows you to define the <head> content dynamically based on the route parameters or data fetched on the server. For OpenGraph, we typically structure this under the openGraph key. Twitter uses a parallel set of properties prefixed with twitter:. The key is ensuring that both sets of data are ready before being rendered to the client.

The standard Next.js metadata API focuses primarily on OpenGraph because it covers the broadest range of major social platforms. To include custom or platform-specific tags like those for Twitter, we simply extend the returned object.

Implementing Dynamic Twitter Tags

To successfully add Twitter meta tags, you need to ensure that the data required by the Twitter API (like title, description, and image) is available within your generateMetadata function. Since these often mirror the OpenGraph data, the implementation becomes straightforward—it’s all about mapping the correct properties.

Here is a complete example demonstrating how to structure the metadata object to include both standard OG and Twitter tags:

// app/page.js or layout.js (using App Router)
  
  import { Metadata } from 'next';
  
  export async function generateMetadata({ params, searchParams }: { params: { slug: string }, searchParams: { [key: string]: string } }): Promise<Metadata> {
    const url = 'https://example.com/dynamic-post';
    const title = 'Dynamic Post Title for Twitter';
    const description = 'This is the dynamic description optimized for social sharing.';
    const imageUrl = 'https://example.com/image.jpg';
  
    // Fetch data dynamically here based on params or database calls...
  
    return {
      title: title,
      description: description,
      openGraph: {
        type: 'article',
        url: url,
        title: title,
        description: description,
        images: [imageUrl],
      },
      twitter: {
        card: 'summary_large_image', // Use summary_large_image for best results
        title: title,
        description: description,
        images: [imageUrl],
      },
    };
  }

Code Breakdown and Best Practices

Notice how we structured the return object. We kept the standard openGraph block for Facebook/LinkedIn compatibility, and then introduced a separate twitter block containing the specific tags (card, title, description, images).

Data Source: The power of this approach lies in ensuring that all necessary data (the dynamic title, description, and image URL) is available before the function executes. This often involves fetching data from a database or an external API within this same function.
twitter:card: Setting card: 'summary_large_image' is highly recommended for Twitter previews as it allows for a larger, more visually engaging preview.
Consistency: Always ensure the content in twitter:title, twitter:description, and twitter:image perfectly matches what the social media platform expects. Inconsistent data leads to broken or poor-looking previews.

Architectural Considerations

When building large-scale applications, managing this type of cross-platform metadata efficiently is crucial. Thinking about how data flows from your backend (or database) into these rendering functions mirrors sound architectural principles. Just as in robust systems like those championed by a framework like Laravel, separating concerns—where the data layer provides clean inputs to the presentation layer—ensures that dynamic content generation remains predictable and maintainable. Managing complex relational data efficiently is key, whether you are dealing with Eloquent models or Next.js metadata objects.

Conclusion

Adding dynamic Twitter meta tags in Next.js 13 using generateMetadata is achieved by structuring your return object to include the specific twitter properties alongside the standard openGraph properties. By treating these platform-specific requirements as distinct, structured data points, you ensure that your application remains flexible and easily adaptable for future social media integrations. Focus on consistency in your data fetching, and your dynamic metadata generation will be robust and scalable.

Stefan

SEO engineer and Laravel developer. Building tools to help Laravel applications rank higher in search results.

Share this article

Back to Blog