CODEWITHSUNDEEP
reactjssingle-page-applicationmeta-tags
George
George

Reputation: 1050

dynamic OpenGraph tags for SPA React application

I want to add some opengraph tags for my create-react-app powered website. The problem is that when I add them dynamically with something like Helmet they are not parsed correctly. Are there any good workarounds for this?

Upvotes: 3

Views: 11672

Answers (2)

Ibrahimsha
Ibrahimsha

Reputation: 310

Another complicated but working method. I faced this same issue. No matter what the backend is if you have server access then the following method can be used. The following example is based on Apache and Django.

First, you can set up an Apache RewriteCond to redirect requests from Facebook's crawler to a specific URL that returns the dynamic OpenGraph tags. The RewriteCond should check for the Facebook User Agent and exclude any URLs that match the URL of your OpenGraph image.

For example your apache.conf or .httacces can be:

RewriteEngine On
RewriteCond %{REQUEST_URI} !^/media
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|LinkedInBot|Slackbot|TelegramBot) [NC]
RewriteCond %{REQUEST_URI} !^/metatags
RewriteRule ^(.*)$ https://yourdomain.com/metatags$1 [L,R=302]

This will redirect requests with a User Agent matching the regular expression facebookexternalhit/[0-9] to https://yourdomain.com/metatags but only if the current request URL does not begin with /media/og.png.

Next, in your Django views, you can create a view function that handles the redirect and extract the OpenGraph tags from the URL parameters. Use the Django HttpResponse class to construct the response with the OpenGraph tags included in the head tag.

For example views.py:

from django.http import HttpResponse

def metatags(request, slug="", *args, **kwargs):
   #Construct the head tag
   meta_tags = extract_meta_tags(slug)
   head_tag = f'<head><title>{meta_tags["title"]}</title>'
   head_tag += f'<meta name="description" content=https://bonusreview.us/>'  
   head_tag += f'<meta property="og:title" content="{meta_tags["title"]}">'  
   head_tag += f'<meta property="og:url" content="https://bonusreview.us/{slug}">'
   head_tag += f'<meta property="og:image" content="https://bonusreview.us/media/og.png">'
   head_tag += '</head>'
   #Return the head tag in the response
   return HttpResponse(head_tag)

And your urls.py can be:

bonus_hunter_urlpatterns = [
re_path("^metatags/$", views.metatags, name="metatags"),
re_path("^metatags/(?P<slug>.+)/$", views.metatags, name="metatags")]

Upvotes: 0

harish kumar
harish kumar

Reputation: 1759

You're managing a web application built with React and You may have many routes on your application, such as an /about page, or /post/:id pages where each post has a different content.

For each route, you want to set different meta tags, like the title, description, OG image, and other such things.

You might have used something like React Helmet to manage your meta tags within your React code. But the problem is that when a page or post gets shared with Facebook or Twitter, the crawlers don't run the JavaScript on your site. They simply take the metatags from the initial bundle.

This won't do, because you obviously don't want to have the same metatags for every page on the entire application. So, you need to dynamically set the meta tags server-side, so that the correct previews get shown.

Here is an article which gives you step by step process of achieving same: Link

And a demo repo here: Repo Link

Hope this is helpful!

Upvotes: 16

Related Questions