CODEWITHSUNDEEP
facebookreactjs
nik7
nik7

Reputation: 101

How to include meta tags dynamically in react js?

I am using reactjs , i want to share my content in facebook,it is happening but after sharing it is not showing images,title,description of the content. so I used react-helmet to dynamically add meta tags in index.html.

<Helmet>
<meta property="og:type" content="video.other" />
<meta property="og:image"       content="https://www.w3schools.com/css/trolltunga.jpg" />
<meta property="og:title" content="My Title" />
<meta property="og:url" content="https://www.afnity.com/video/155" />
<meta property="og:description" content="some discription of the shared    content" />

</Helmet>

and here is the share button

   <button> <a title="dummy" 
href="http://www.facebook.com/sharer.php? u=https://dummy.com/videos/id=25"     target="_blank">
share</a>
</button>

but it is not working.

Upvotes: 8

Views: 16699

Answers (4)

Jamal
Jamal

Reputation: 1361

By default, the app will be generated with the below title

<title>React App</title>

And it's pretty simple to change, just by having this life-cycle hook into your app file

componentDidMount() {
document.title = 'Custom Title';  }

Upvotes: 0

Stuart Aitken
Stuart Aitken

Reputation: 1012

The tags need to be rendered on the server side.

The other answers here seem to focus on a purely JS solution.

For those working on a .Net MVC app, my solution is described below:

The main entry point to the website is through the Index() method of the default Home Controller, like so:

//Home Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

No matter what URL you type in, it'll always go here first.

The key is to use the URL from the HttpRequest parameters, by feeding it through into the View, like so:

// Home Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View(Request);
    }
}

Firstly, if your website uses a shared layout page, don't forget to create a RenderSection within the <head> tags, like so: 

//Layout.cshtml

<head>
    @RenderSection("meta", required: false) 
</head>

Now in Index.cshtml, set HttpRequest as the view model, pluck the URL out from the Request Path and place it in <meta> tags as required (and have it all within the meta RenderSection if you made one).

The complete path value is of the form "/pathName/". 

//Index.cshtml

@model Microsoft.AspNetCore.Http.HttpRequest

@section meta  {

    @if (Model.Path.Value.Contains("pathName"))
    {
        <meta property="og:url" content="https://mywebsite.com/@Model.Path.Value.Substring(1)" />
    }
}

It's possible to do a lot of other stuff too. For example, my website has request paths based on IDs from a database, i.e. /pathName/45, so my work looks a bit like this:

//Index.cshtml

@model Microsoft.AspNetCore.Http.HttpRequest

@section meta  {

    @if (Model.Path.Value.Contains("pathName"))
    {
        MyWebsite.Models.DatabseContext db = new MyWebsite.Models.DatabseContext();
        int itemID = int.Parse(Model.Path.Value.Substring(10, Model.Path.Value.Length - 10));
        Item item = db.Items.Find(itemID);

        <meta property="og:title" content="@item.Name" />
        <meta property="og:description" content="@item.Description" />
        <meta property="og:url" content="https://mywebsite.com/@Model.Path.Value.Substring(1)" />
        <meta property="og:image" content="@item.ImageURL" />
    }
}

With this I can render quite detailed and specific meta tags for any page of my React website. Works perfectly so far!

Upvotes: 0

Pavan
Pavan

Reputation: 858

This can be achieved using react-document-meta npm module when server side rendering enabled in your react application

const meta = {
      title: 'Samvikshana - New Perspective of Exploration',
      meta: {
        property: {
          'og:title': 'Samvikshana',
          'og:url': 'https://samvikshana.weebly.com/',
          'og:image': imageUri,
          'og:description': 'New Perspective of Exploration',

          'twitter:card': 'summary_large_image',
          'twitter:title': 'Samvikshana',
          'twitter:description': 'New Perspective of Exploration',
          'twitter:image': imageUri
        }
      }
    };

    return (
      <div className='container-fluid'>
        <DocumentMeta {...meta} />
         </div>);
    }

Read this blog for more information - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

Upvotes: 5

Irfan Ali
Irfan Ali

Reputation: 2258

Replace Helmet Component with below code.

<Helmet
  meta={[
    {"property": "og:type", "content": "video.other"}
    {"property": "og:image", "content": "https://www.w3schools.com/css/trolltunga.jpg"}
    {"property": "og:title", "content": "My Title"}
    {"property": "og:url", "content": "https://www.afnity.com/video/155"}
    {"property": "og:description", "content": "some discription of the shared    content"}
  ]}
/>

This will add meta tags as per your requirement.

Upvotes: -3

Related Questions