Tailwind CSS and Next.js Head Component for SEO

Illustrate the use of Tailwind CSS to style SEO friendly HTML structures in the Next.js Head component for metadata and open graph tags.

import Head from 'next/head';

export default function HomePage() {
  return (
    <>
      <Head>
        <title>Page Title | Your Site Name</title>
        <meta name="description" content="A brief description of your page" />
        <meta property="og:title" content="Page Title" />
        <meta property="og:description" content="A detailed description of your page" />
        <meta property="og:image" content="https://example.com/thumbnail.jpg" />
        <meta property="og:url" content="https://example.com/page" />
        <meta name="twitter:card" content="summary_large_image" />
        <!-- Add more SEO and social media meta tags as necessary -->
      </Head>
      <div className="flex justify-center items-center">
        <!-- Content of your page using Tailwind CSS for styling -->
        <h1 className="text-4xl font-bold">Welcome to Your Site</h1>
      </div>
    </>
  );
}

This piece of code uses Next.js's Head component to set SEO relevant meta tags such as title, description, Open Graph, and Twitter Card. The HTML content uses Tailwind CSS classes for styling.