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
-
BEST WEBSITE/SEO/DIGITAL MARKETING AGENCY FOR A GROWING MULTI-SITE MEDICAL PRACTICE [Edited by moderators]
[This content has been removed by moderators as off-topic. The Q&A Forum should not be used for job posting or recommending SEO companies and, as commenters have pointed out, we have a specific resource for this information]
Conversion Rate Optimization | | KetamineTreatmentCenters0 -
What are the best practices for server-side A/B testing?
When performing a full-site server-side A/B test, what best practices should you follow to ensure that you're: not cloaking or at least not being shady only showing Google (and other search engines) the version you want them to see (i.e. not the test pages) Thanks in advance!
Conversion Rate Optimization | | vsem0 -
Google Adwords Offered to Redesign My Website & A/B Test... Thoughts?
I received a call from the Google Adwords team today offering to redesign major pages of my website & A/B test their design against mine. The rep said that this is not a standard service they offer and that we had been "selected". Despite it's overt marketing overtones, I would hate to pass by the opportunity to apply Google's conversion insight to my site. Has anyone experienced this before? Good experience? Bad experience?
Conversion Rate Optimization | | Glathrop1 -
Browser-based redirect vs. dynamic content
Hey everyone, We have a free browser extension for Chrome and a paid web product for all other browsers. Given the differences in product and pricing (free vs. paid) I'd like visitors to see a different landing page based on their browser. Visitors using Chrome should see a landing page with content about the free browser extension, while visitors from every other browser should see a landing page with content about the paid, premium web product. I'm trying to decide between these two options: a) 302 redirect visitors from one static HTML landing page to another if their user agent suggests they're using Chrome b) Use javascript to make parts of the landing page dynamic and show a different CTA and different copy for visits from Chrome Does anyone have any experience with having to make this choice? What are some things I should take into consideration for optimal "crawlability" and page-load-speed? Thanks in advance!
Conversion Rate Optimization | | ipancake0 -
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 -
Can using the Google Keywords tool and/or SEOmoz cause problems for my company's IP address?
I just started with a company a few weeks back, working on-site doing SEO work. I've been using SEOmoz as well as Google Adwords' Keywords tool. I just got a message from one of our reps saying that people at the office (and this is a huge office) have reported tons of CAPTCHAs being thrown up frequently. I told them I had been running searches with Google Keywords tool and SEOmoz, but would that really cause that much of a problem? Is there anything I can do in order to fix this, some keyword finders that won't get me in trouble, etc.?
Conversion Rate Optimization | | SmokewagonKen0 -
Analytics (Other Than Google) & A/B Testing Tools
Hey, I have Google Analytics on my website, like most people, but I was looking at some other analytics and testing tools like heat maps, click maps, A/B, etc. I was hoping that some of you could recommend a few that you use to see where pages are going wrong, track user behaviour and to how improve conversion rate. I have had a look at a few websites like: https://www.clicktale.com/
Conversion Rate Optimization | | JonathanRolande
https://www.optimizely.com/ It would also be interesting to know how acurate these tools actually are, they seem quite legit. Cheers0 -
Which A/B test software do you prefer? Howcome?
I am about to start some research on software for experimental design on websites. So I'd really like to know which A/B test software do you prefer? Howcome?
Conversion Rate Optimization | | ThomasHgenhaven1