Search code examples
reactjsfacebook-opengraphshare-open-graph

Creating Opengraph metatags for each individual video link on website?

The site is say https://videosite.com. Currently each video has its individual link which is generated by the following:

I want to add the OG metatags like thumbnail onto each of these video links like I did for the index.html homepage.

video._id is variable which holds the id of video uploaded to our site.

Thanks in advance for any advice.

                 <Button
                      style={{ float: "left" }}
                      variant="contained"
                      color={this.state.copied ? "danger" : "primary"}
                      onClick={() => {
                        "https://videosite.com/#/video/" + video._id));
                        this.setState({ copied: "Copied!" });
                        setTimeout(() => {
                          this.setState({ copied: null });
                        }, 2000);
                      }}
                    >
                      Share {this.state.copied && " - " + this.state.copied}
                    </Button>
Solution

  • To be able do this, you need server side rendering (SSR). The crawlers aren't really clients, so the server needs to render a specific page for them. Unless you're using server rendering to generate dynamic meta tags, your meta will always be whatever is in index.html. Server rendering is a bit hard to explain how to apply without knowing what you're running and how, but at least it should point you in the right direction.

    Some reading material: