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
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
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 -
Server-Side A/B Testing - Okay for SEO?
Hey Moz Community! I've been digging into the differences between server-side testing and client-side testing and had a generic question. Is it safe to run server-side A/B testing? For example, if I want to Split Test the home page of a site and show 50% of my traffic one home page, and show 50% of my traffic a completely different (read: new template, new content, new CTAs, etc) home page, are there any implications to SEO and organic search? I've spent about five hour researching and from what I can find A/B testing is acceptable as long as you don't show Googlebot different content or run A/B tests on Googlebot. Matt Cutts, head of Webspam at Google, has stated that A/B testing does not impact search rankings. "A/B or split testing or other forms of testing web sites is okay by Google as long as you don't test GoogleBot or don't treat GoogleBot differently." The biggest concerns for SEO cloaking, so from my understanding, for server-side testing, you'd need to do user-agent based redirection so that Googlebot (or any search bot) gets the normal version of the home page. The bots shouldn't be part of the test. Technically that is cloaking, but intention-wise, we're not trying to be sneaky. I've also read through this article about experimentation from Google developers here. Am I missing anything here or is there a definitive answer? If we serve a “B” as a different site for user testing, just exclude google bot by user-agent and we’re good? THANKS!
Conversion Rate Optimization | | andrewmeyer0 -
Contact form at the end of all posts
I notice a lot of sales blogs have contact forms at the end of all their posts. Can anyone give me some information on the effectiveness of this tactic? Case studies, examples, or your experience from adding contact forms and what it did to conversions? I imagine it would help increase conversions. It would reduce a step from moving to a new page, but might turn off some visitors? Any information would be appreciated.
Conversion Rate Optimization | | Oren.0 -
Google Merchant/ Googlebase Images at top of SERPS
Hi We are based in the UK and the new merchant rules have recently been applied here. We offer free shipping but now most of our click throughs come from the images at the top of the SERPS that simply give an image and a price. The prices do not include shipping and there's no indication to the user that shipping is included. Hence our conversion rate from PPC is way down. Is there any way to counter this or do we just need to go back to charging for shipping? Thanks!
Conversion Rate Optimization | | Jonnygeeuk0 -
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 -
How can I track the traffic source/keyword of form submissions?
I'm using Google Analytics on www.nhfinehomes.com and would like to track the source of leads submitted via form submissions. Ideally, I could track if the lead originated from organic search (and what keyword phrase), PPC, referral links, etc. Is this possible with Google Analytics and if so, can anyone point to some documentation on how to do this or better yet someone who can help me set this up? This site is running ASP.NET and uses JQuery so there is not a 'traditional' thank you page that I can reference. I'm not a programmer and do not pretend to be one! Thanks in advance. Link
Conversion Rate Optimization | | LinkMoser0 -
A/B Testing. What do you use?
About to do some A/B testing (conversion improvement) for multiple clients. There are so many solutions out there. Does anyone have any suggestions. A/B testing will be done for both SEO & PPC Campaigns.
Conversion Rate Optimization | | waqid0 -
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