Metatags in react, share on facebook and twitter-CodePudding

I am using metatags for my app it has 3 pages, and each one has its own metatags, I used helmet-react for that when I click the menu options metatags change correctly, but I want to share my page on Facebook and Twitter, I deployed on vercel, I copied the URLs and paste on Facebook and Twitter but nothing happens, I cant see the title description and image from metatags, is it possible to do that from the front side? what would happen if metatags were dynamic? thanks for your help.

deployed app: https://helmet-peach.vercel.app sandbox: https://codesandbox.io/s/lucid-ride-26s08

import React from 'react';
import Helmet from 'react-helmet';

function Home() {
  return <div>
      <Helmet>
          <title>tienda de ropa</title>
          <meta name="description" content="Home de la tienda" />
          <meta property="og:url"              content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
          <meta property="og:type"               content="article" />
          <meta property="og:title"              content="titulo para el home de la tienda" />
          <meta property="og:description"        content="esta es la decripcion del home de la tienda" />
          <meta property="og:image"              content="https://media.gettyimages.com/photos/bogota-at-sunset-picture-id107069344?s=612x612" />
      </Helmet>
      <h1>esta es la pagina del home</h1>
  </div>;
}

export default Home;

CodePudding user response：

Facebook and Twitter fetch your page without running any of the javascript. They only fetch the HTML page. react-helmet uses Javascript and React to update the DOM. Since your browser runs the web-app, the tags are visible. To fix this, you need some sort of server-side rendering or default tags for the whole app.

One solution is to use next.js because it supports server-side rendering.

Alternatively, you can add the tags into the static/index.html like such:

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

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />

  <title>tienda de ropa</title>
  <meta name="description" content="Home de la tienda" data-react-helmet="true" />
  <meta property="og:title" content="titulo para el home de la tienda" data-react-helmet="true" />
  <meta property="og:description" content="esta es la decripcion del home de la tienda" data-react-helmet="true" />
  <meta property="og:type" content="article" data-react-helmet="true" />
  <meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" data-react-helmet="true" />
  <meta property="og:image" content="https://media.gettyimages.com/photos/bogota-at-sunset-picture-id107069344?s=612x612" data-react-helmet="true" />
</head>

<body>
</body>

</html>

This solution does have a major drawback, which is you can only use one set of meta tags for the whole app. This might or might not be a dealbreaker.

CodePudding user response：

If your app is not server-side-rendering, I am not sure if open-graph will work. I used react-helmet before with server-side-rendered react app. Since I switched to next.js, I never tried react-helmet with single page application.

To create dynamic metatags, create a component importing Helmet component.

import Helmet from "react-helmet";

const HeadTags = (props) => {
  
  const {
    title = "Portfolio - your name",
    metaDescription = "defaul tdescription",
  } = props;
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="description" key="description" content={metaDescription} />
      <meta name="title" key="title" content={title} />
      <meta property="og:title" key="og:title" content={title} />
      <meta property="og:locale" key="og:locale" content="en_US" />
      <meta charSet="utf-8" />
      <meta property="og:type" key="og:type" content="website" />
      <meta
        property="og:description"
        key="og:description"
        content={metaDescription}
      />
      <meta
        property="og:image"
        key="og:image"
        content={`${process.env.BASE_URL}/images/frontend.jpeg`}
      />  
    </Helmet>
  );};

Now use this component inside Header component because Header gets rendered in every page. (You could create a layout file but for simplicity I will skip that)

import HeadTags from "./Head";
// you pass props from pages, also some props for metatags

const Header = (props) => {
    // those props will be passed to HeadTags component
    const {metaDescription,title}=props
     return (
        <>
          <HeadTags
            title={title}
            metaDescription={metaDescription}
          ></HeadTags>
        .. rest of Header view

}