Redirect Management on Headless Wordpress w/ React Front End
-
Hello everyone,
As Headless Wordpress becomes more and more popular, it becomes more complicated to manage and track 301 redirects. I'm reaching out for advice on this.
Our main issue right now, is that after migrating from Drupal to a Headless Wordpress/React platform we lost the ability to track, manage, and view traffic analytics for users hitting those redirects. This was something we were able to do in Drupal.
Example: If we have a redirect in place we could see how many times in the past x number of days that redirect was hit by users attempting to access the old URL.
Unfortunately, Yoast Premium, has been helpful with other SEO needs, but this is one that it is not able to manage.
Anyone have any ideas, experience, or thoughts on this issue?
Thanks for your time
-
PS may I see your GitHub?
-
I love to see people using Headless WordPress below five given free ways to do this a reverse proxy is a win-win however if you. want to do it with "react-router-dom" for the WordPress settings in the first settings two URLs listed below you can't miss them.
I have always used Pantheon.io for headless or Pagely
One very simple and I believe personally saves you a lot of time method is to use a reverse proxy to do any redirects.
my personal recommendation Fastly.com if you want something a little bit more generic and not as fast or as developer-friendly you can page rules ( redirects if you want to be) very inexpensively like five dollars a month for 30 on Cloudflare.com For tools like this which are very good no matter what code you are running https://www.easyredir.com/blog/how-to-redirect-a-url/
** I would still use Fastly ( they no longer charge for SSL certs)**
I of doneness with node.js I just have not done with react but what you're going to have to read through these two URLs and decide which end of it want to do the redirections from you can redirect from PHP you have to change your settings.php and your function.php file for the setup settings number two Install react-router to create routing for React.
npm install react-router-dom
THE 2 URLs listed below
- https://www.efficiencyofmovement.com/posts/redirect-headless-wordpress/
- https://hybrit.org/blog/combine-headless-wordpress-with-a-react-spa-part-1
you're going. to have to WP changes to the settings.php as well as function.PHP
https://github.com/joshsmith01/headless-wp
- https://medium.com/moij/going-headless-with-wordpress-graphql-and-react-b939263a6f3d
- https://discourse.roots.io/t/detach-front-end-and-use-wp-headless/11419/2
- https://github.com/postlight/headless-wp-starter/issues/131
Install react-router to create routing for React.
npm install react-router-dom
React Router allows us to create individual routes for our pages and adjust our URL. In order to dynamically create the routing, we can add the following code. Don't forget to import
react-router-dom
Let's change the following code inside the render function to:
| | // Import Router at the top of the page |
| | import { |
| | BrowserRouter as Router, |
| | Link, |
| | Route |
| | } from "react-router-dom"; |
| | |
| | render() { |
| | const { pages } = this.state; |
| | |
| | return ( |
| | |
| | <fragment></fragment> |
| | {/* Links /} |
| | |
| | {pages.map((page, index) => { |
| | return {page.slug}; |
| | })} |
| | |
| | |
| | {/ Routing */} |
| | {pages.map((page, index) => { |
| | return ( |
| | |
| | exact |
| | key={index} |
| | path={/${page.slug}
} |
| | render={props => ( |
| | <examplepage {...props}="" page="{page}"></examplepage> |
| | )} |
| | /> |
| | ); |
| | })} |
| | |
| | |
| | ); |
| | } |view rawApp.js hosted with
by GitHub
Create a folder inside the
src
folder calledcomponents
and addExamplePage.js
to it. InsideExamplePage.js
we will add the following code| | import React from 'react' |
| | |
| | export default function ExamplePage(props) { |
| | const { page } = props; |
| | return ( |
| | |
| |{page.title.rendered}
|
| | |
| | |
| | ) |
| | } |view rawExamplePage.js hosted with
by GitHub I hope this is been some help to please let me know if you run into any obstacles I like that you are doing headless Pantheon is. a great resource for this as well. Let me know if you run into any obstacles or if I can be of more help. all best,Tom
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
UX and/or Conversion Help for Ecommerce
Good Morning, We recently revamped and relaunched our ecommerce website and we believe we have built a great site that is easy to navigate, find what you're looking for, get all details, and purchase. We were hoping to get some of the Moz community to take a look at the site and let us know if you have any suggestions on usability or conversion techniques that we could implement to improve user experience and amount of orders placed. You can view our site here Looking forward to your feedback. Thanks in advance
Conversion Rate Optimization | | Prime850 -
What should a small company with a difficult SEO/SEM challenge do?
Everyone here knows that SEM and SEO "experts" are everywhere. But our company has a particular challenge - our Volusion-hosted e-store's product offering is so wide that it's a huge challenge to make a dent in our search engine placement. In our earliest days, one SEM "pioneer" company issued us a refund after realizing they couldn't do anything to affect our placement. The problem is that the revenue from any one particular keyword term doesn't return enough sales to make the effort worthwhile - sales are scattered allover the product spectrum. Does anyone have any experience with this particular challenge? What would be considered a realistic monthly budget - given that the business itself is quite small? I don't know what the etiquette on Moz is but YES I am looking to engage a company to help us out.
Conversion Rate Optimization | | CrashAlpha0 -
Is "http://whereisthefold.com/" a good tool?
I came across this tool: http://whereisthefold.com/ I would like to add this to my bag of tricks but want to see if anyone has actually taken the time to verify that this tool presents an accurate representation of where things are placed on different screen sizes? I would appreciate any input. Ron
Conversion Rate Optimization | | Ron_McCabe0 -
Where I can place a banner/message in my site telling I have a new website?
Where I should place a banner or a message in my old site to tell user that I have a new website? Thanks in advance!
Conversion Rate Optimization | | esiow20130 -
301 Redirects On Sold Vehicle Listings
This is a pretty basic question but I'm looking more for ideas relating to how to deal with an RV customer of mine. Basically we setup a vehicle listing system with WordPress for him. When old listings are deleted because they were sold I'm trying to decide on either 301 redirecting those 404 pages or keeping those pages and just changing the picture to sold while giving the person who's landed on the page some other options.
Conversion Rate Optimization | | Keith-Eneix0 -
Testing Google Tag Manager
Is there a way to test if the Google Tag Manager is set up correctly? Am I right in thinking that the only code that will be output on the page will be the actual embed code, eg: SCRIPT REMOVED Cant work out if there is an issue with what has been set in the account of if there is a problem with how the code has been added to the page..
Conversion Rate Optimization | | edwardlewis0 -
Call extension only showing with some keywords/ads?
I've enabled Call Extensions with Call Forwarding on my Adwords Campaign (found out Location Extension must be enabled, so enabled that, but left out phone number in location settings). I thought these extensions should work on a campaign level. However, I can only see the google voice call forwarding extension on some of my keywords/ads. What's up?
Conversion Rate Optimization | | Mozzin0 -
Call-to-action is literally a call/dialing a number...
The call-to-action for this site is not some sort of webform, nor adding an item to a cart; it is a call, that is the action this business wants to elicit. Would there possibly be any advantage to making the number clickable and having a landing page for that, any suggestions on how to make this call-to-action more pronounced/clear? Thanks! =]
Conversion Rate Optimization | | Mozzin0