SEO Optimization

Example Code

```jsx
import React from 'react';
import { Helmet, HelmetProvider } from 'react-helmet-async';

// Imagine this data comes from an API call or a global state
const product = {
  id: 'prod123',
  name: 'Premium React Widget',
  description: 'An advanced widget designed to enhance your React application with superior performance and elegant UI.',
  price: '129.99',
  currency: 'USD',
  image: 'https://example.com/images/premium-react-widget.jpg',
  url: 'https://example.com/products/premium-react-widget',
  sku: 'PRW-001',
  brand: 'InnovateTech Solutions',
  ratingValue: '4.8',
  reviewCount: '235',
  availability: 'InStock'
};

function ProductPage() {
  // Structured Data for Google Rich Snippets (JSON-LD)
  // This provides explicit information about the product to search engines.
  const productSchema = {
    "@context": "http://schema.org",
    "@type": "Product",
    "name": product.name,
    "image": product.image,
    "description": product.description,
    "sku": product.sku,
    "brand": {
      "@type": "Brand",
      "name": product.brand
    },
    "offers": {
      "@type": "Offer",
      "priceCurrency": product.currency,
      "price": product.price,
      "itemCondition": "http://schema.org/NewCondition",
      "availability": `http://schema.org/${product.availability}`,
      "url": product.url
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": product.ratingValue,
      "reviewCount": product.reviewCount
    }
  };

  return (
    // HelmetProvider must wrap the components that use Helmet.
    // Typically, you'd wrap your entire App component in index.js/main.jsx.
    <HelmetProvider>
      <div className="product-page">
        <Helmet>
          {/* Page Title: Critical for SEO and user experience in browser tabs */}
          <title>{product.name} | {product.brand}</title>

          {/* Meta Description: Summarizes page content for search results snippets */}
          <meta name="description" content={product.description} />

          {/* Canonical URL: Tells search engines the preferred version of a page to prevent duplicate content issues */}
          <link rel="canonical" href={product.url} />

          {/* Open Graph Meta Tags: For better social media sharing previews (e.g., Facebook, LinkedIn) */}
          <meta property="og:title" content={product.name} />
          <meta property="og:description" content={product.description} />
          <meta property="og:image" content={product.image} />
          <meta property="og:url" content={product.url} />
          <meta property="og:type" content="product" />
          {/* More Open Graph tags like 'og:site_name', 'og:locale' can be added */}

          {/* Twitter Card Meta Tags: For better Twitter sharing previews */}
          <meta name="twitter:card" content="summary_large_image" />
          <meta name="twitter:title" content={product.name} />
          <meta name="twitter:description" content={product.description} />
          <meta name="twitter:image" content={product.image} />
          {/* Add 'twitter:site' and 'twitter:creator' for account attribution */}

          {/* Structured Data (JSON-LD): Embedded as a script tag to provide explicit data to search engines for rich snippets */}
          <script type="application/ld+json">
            {JSON.stringify(productSchema)}
          </script>
        </Helmet>

        {/* Visible Page Content - Use semantic HTML for clarity */}
        <h1 className="product-title">{product.name}</h1>
        <img
          src={product.image}
          alt={`Image of ${product.name} from ${product.brand}`}
          className="product-image"
          style={{ maxWidth: '400px', height: 'auto', display: 'block', margin: '20px auto' }}
        />
        <p className="product-description">{product.description}</p>
        <p className="product-price">
          Price: <strong>{product.currency} {product.price}</strong>
        </p>
        <p className="product-brand">Brand: {product.brand}</p>
        <p className="product-rating">
          Rating: {product.ratingValue} out of 5 ({product.reviewCount} reviews)
        </p>
        {/* Add more product details, reviews, call to action, etc. */}

      </div>
    </HelmetProvider>
  );
}

export default ProductPage;

/*
To use this code:
1. Install react-helmet-async: npm install react-helmet-async or yarn add react-helmet-async
2. Render the <ProductPage /> component within your main App component or router setup.
   Ensure the <HelmetProvider> wraps the part of your application where Helmet is used.
   A common pattern is to wrap your root App component in index.js or main.jsx:

   import { createRoot } from 'react-dom/client';
   import { HelmetProvider } from 'react-helmet-async';
   import App from './App'; // Or your main component

   const container = document.getElementById('root');
   const root = createRoot(container);
   root.render(
     <React.StrictMode>
       <HelmetProvider>
         <App />
       </HelmetProvider>
     </React.StrictMode>
   );
*/
```