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
-
Channel grouping path / assisted conversion benchmarks by industry
Hi Mozzers, I'm trying to find benchmark channel grouping paths to conversion, or assisted conversion trends, by industry... is anybody aware of any benchmark data out there? Thanks!
Conversion Rate Optimization | | Zoope0 -
No Redirects In Place After Transfer To New Site With Same Domain :(
Hi Moz Folks, I'm new here and am loving all the information! Can't wait to dig in more. Folks, I have a situation and would love to hear more about your experiences here and what advice you all have to give. I have a client whose SEO I helped out with about 4-5 years ago. It went well and they had historically been ranking on pages 1-2 for the majority of their targeted keywords. Client and I lost touch over the years, but now we are in process of working together again. What I learned today is that my client redesigned the entire old site without placing any redirects and entirely creating new URL structures (I already hear the gasps of air of those reading this). Long story short - you guessed it - rankings/traffic has dropped and the old pages have fallen out of index. Considering that I was hired to re-do and re-audit the SEO of the site and also considering that the domain had a relative decent standing in the rankings in the past, I'm wondering what exactly I should do of the following options (or please do suggest other options): 1. We have the ability to completely revert back to the old site with all the old keywords and and search optimized URLs. The new site was launched just 2 weeks ago and the owner has said that he is willing to revert back to the old site while we audit the new site and get all of the proper optimizations in place. This would be a great option if it will help us because at least we can get a site up that we know ranked well with Google in the past. 2. 302 redirect the old URLs to the somewhat appropriate page on the new site while - in the meantime - I work on the new site structure and keywords/SEO optimizations. I say 302 because a 301 redirect from the old pages to the new pages may only do me so good because I would plan on changing the keywords/URL structures of the new site anyway. Once finished with the optimizations, I'd then 301 redirect to the new appropriate pages 3. 301 redirect everything from the old site to the somewhat appropriate page on the new site right away. Then, once I've completed all the appropriate optimizations, I'd need to re-301-redirect to the new pages I've created. As you can see, I'm in a bit of a jam. But, considering that the new site was launched just about 2 weeks ago, maybe there's some hope here. Thanks fellow Mozzers! Hopefully that all makes sense. Cheers!
Conversion Rate Optimization | | pfarsaii
Nickname: "P-drama"0 -
Customer journey / customer drop off
Hi All, I would like to understand how visitors navigate through my site and find out where the main drop out areas are (i.e. what pages / sections of the site do users leave on). I will then be segmenting by mobile, tablet, new visitor, returning etc. to see how the various subsets of users behave. To do this I generally do the following: Identify main sections of the (ecomm) site: homepage, category pages, product pages, cart, checkout 1, checkout 2, checkout x, payment confirmation. For each section above I either use a segment to isolate that section of the site, either by regex or a simple page selector and apply to the Audience >> Overview report and record the resulting session count. OR I filter the Behaviour >> Site Content >> All Pages report to isolate the various site sections and record unique pageviews. I then plot these figures horizontally under a heading for each section of the site representing a flow between the pages of the site with a calculation showing the difference between each section of the site which represents user drop off. Hope that makes sense. What I am interested to know is, do you have any better suggestions to the process laid about above. Do you see any issues with this process?
Conversion Rate Optimization | | datarat1 -
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 -
Conversion Rate Optimization (CRO): Best Approach/Plan Documentation
Hey Mozzers - First off, I am well aware of what CRO is, its benefits, and why it is essential for any inbound or performance marketing campaigns. However i am a total newbie at the actual planning and implementation of CRO, so any advice/feedback on the questions below are much appreciated! When planning a CRO experiment/test what is the best way to document it? Should i develop the full plan ahead of time laying out each element? If so, what elements should i include in this plan? What are the KPIs i should report on? What tools should i use for reporting (i was thinking a blend of Google and Clicktale)? Any lessons learned through out your campaigns? Thank you all so much for your input! Regards - Kyle
Conversion Rate Optimization | | kchandler0 -
Your advice on Website Optimization Tools for A/B and Multivariant tests
Hi everyone, I've been looking for tools to support all the A/B and Multivatriant testing for my websites. I've seen a lot of stuff out there but I'd like to hear what YOU think. Are you using any of these tools?
Conversion Rate Optimization | | mozzello
Which one would you recommend? Thanks a lot for your help
Michel0 -
Any SEO tips for optimizing / driving traffic to category pages?
Hello! I listened to Adam Audette at Linklove in Boston this month and he spoke a little on creatively linking product pages back to their respective category pages - as it had an effect on the SEO... However, I don't know much about "internal" linking... Any other SEO tips for optimizing / driving traffic to category pages? Thanks!
Conversion Rate Optimization | | BGroup0 -
For the hotel website, should i make homepage banner/slideshow in flash or javascript
Hello Sir, We have build hotel website and enabled google analytics on that. When we were going through the report of google analytics it shows that 69% have java and other 31% visitor has no java. We have designed Slideshow/banner on home page which shows different pictures of hotel which is in javascript. My question is as per google analytics report 31% have no java, that means they are not able to see that slideshow/banner of hotel pictures? is this the reason for 23% bounce rate on our website? Please help on this because I have spend nights on seo and tried lot of goal conversion techniques with different landing pages. I will heartily appreciate you response. Thanks, Bandro.
Conversion Rate Optimization | | Bandro0