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?
dynamic OpenGraph tags for SPA React application
Asked Answered
Show what you tried and what you mean by 'not parsed correctly' –
Masorete
Are you using the Node server to serve react app? –
Johannisberger
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!
how would one do this when deployed to an IIS server without node.js? –
Empyema
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")]
© 2022 - 2024 — McMap. All rights reserved.