Missing twitter:url in metadata: Add support for it

[sabeerbikba]

Goals

1. Enhance Twitter Card Metadata: Enable developers to specify the twitter:url property in the metadata configuration, allowing for precise control over shared content on Twitter.

2. Alignment with Twitter Requirements: Ensure compatibility with Twitter's best practices for displaying shared links, enhancing the visibility and engagement of content.

3. Developer Flexibility: Provide developers with a comprehensive set of tools to optimize social sharing features, facilitating better integration and usability in applications built with Next.js.

Non-Goals

No response

Background

The current implementation of metadata in Next.js provides robust support for Open Graph and other metadata standards but lacks the ability to specify twitter:url within the twitter metadata object. This omission restricts developers from fully leveraging Twitter's Card metadata features, which include specifying the exact URL associated with shared content.

Proposal

Implementation Details:

• Extend Metadata Interface: Introduce twitter:url as a valid property within the twitter object of the Metadata interface in Next.js. This addition will align with existing standards and ensure seamless integration with Twitter's Card validator tools.

• Compatibility Checks: Ensure compatibility with existing metadata configurations and validation processes within Next.js. This includes maintaining backward compatibility where applicable and providing clear documentation on usage.

Example Usage:

// Updated metadata configuration example
export const metadata: Metadata = {
  title: "Page Title",
  description: "Page description.",
  openGraph: {
    type: 'website',
    url: "https://example.com",
    title: "Page Title",
    description: "Page description.",
    images: [
      {
        url: "https://example.com/image.jpg",
        alt: "Image Alt Text"
      }
    ]
  },
  twitter: {
    card: 'summary_large_image',
    url: "https://example.com", // Newly added property
    title: "Page Title",
    description: "Page description.",
    images: [
      {
        url: "https://example.com/image.jpg"
      }
    ]
  }
};

Benefits:

• Improved Content Identification: Specify the exact URL for Twitter Card metadata, ensuring that shared content accurately reflects the intended source.

• Enhanced User Engagement: Facilitate better engagement on Twitter by providing enriched metadata that complies with Twitter's display guidelines.

• Developer Empowerment: Empower developers to implement comprehensive social media strategies with confidence, leveraging Next.js's robust metadata capabilities.

Conclusion:

Adding support for twitter:url in Next.js's metadata configuration enhances the platform's capability to manage and optimize shared content on Twitter. This enhancement aligns with modern web development standards and improves the user experience across social media platforms.

[Netail]

I believe twitter:url has been deprecated in favour of og:url. Twitter does not mention the meta tag in their developer docs anymore, here neither here.

[sabeerbikba]

Yes but it works on website. When use it.

[little077]

Oh, these documents are really hard to describe. Our SEO engineer asked us to write Twitter: URL before, but now it seems to be useless