Dynamic link previews with React helmet in ReactJS

Question

Does anyone know if there's a possibility to set truly dynamic meta tags per page in a React App without Server Side Rendering?

In a project that I am building I have some pages with a route like / article / {Id} and I would like to define dynamic meta tags (title, image, description). I use a reaction helmet as a component but it doesn't work here is the code of my component, part of the code page article / {id}, and my page index.html

index.html :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta property="og:title" content="title" data-rh="true">
<meta property="og:description" content="description" data-rh="true">
<meta property="og:image" content="icon%20maracana%20app.png" data-rh="true">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
    type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-173374516-1"></script>
  <script data-ad-client="ca-pub-7237319988145838" async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-173374516-1');
  </script>
  <!-- <script type="text/javascript" src="js/my_script.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
</head>

<body>
  <!-- Plugin Comments -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous"
    src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v9.0&appId=357191748915887&autoLogAppEvents=1"
    nonce="QVCodNV8"></script>
  <!-- ---------------- -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

component:

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { IMAGES_LINK, API_LINK } from '../../utils/constants'

//const metaDecorator = require("../../data/metaDecorator");
const MetaDecorator = ({ title, description, imageUrl, imageAlt }) => {

    if (title != undefined & description != undefined & imageUrl != undefined & imageAlt != undefined) {
        return (
            <Helmet>
            <title>{title}</title>
            <meta property="og:title" content={title} />
            <meta name="description" content={description} />
            <meta property="og:description" content={description} />
            <meta property="og:image" content={API_LINK + imageUrl} />
            <meta
                property="og:url"
                content={"https://maracanafoot.com" + window.location.pathname + window.location.search}
            />
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:image:alt" content={imageAlt} />
            {/* <meta name="twitter:site" content={metaDecoratortwitterUsername} /> */}
        </Helmet>

        );
    } else {
        return (
            <Helmet>
            </Helmet>
        );
    }
}
MetaDecorator.propTypes = {
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    imageUrl: PropTypes.string.isRequired,
    imageAlt: PropTypes.string.isRequired,
};
export default MetaDecorator;

article page :

 render = () => {
    const s = this.state;

    return (<>

      <div>
        
        {this.state.loadingArticle ? <>

          <br />
          <div style={this.styleSpinner} className='mt-3 mb-3'>
            <ImpulseSpinner size={30} color="#208FDF" loading={this.state.loadingArticle} />
          </div></>
          : null}
        {!this.isEmpty(this.state.article) ? <>
          
          
          <MetaDecorator
            description={this.state.article.resumer}
            title={this.state.article.title}
            imageUrl={this.state.article.image}
            imageAlt="image alt"
          />

Thanks in advance for any hint!

Dynamic link previews with React helmet in ReactJS

0 Answers0