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
-
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 -
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 -
How Do I Create a Google Analytics Dashboard for My Designer To Monitor Landing Page A/B Testing
Hello All, We recently started doing some "AdWords Experiments" using A/B testing of our search landing pages. My web design team does not have access to our AdWords account, but they do have "user" access to our Google Analytics account. What I need to figure out how to do is setup an easy dashboard (or custom report) that will show them at a quick glance how the two versions of their page are performing in terms of: Goal Completions (Conversions) where the specific page is the entrance/landing page. Bounce Rate Time spent on site where the specific page is the entrance/landing page. Pages viewed where the specific page is the entrance/landing page. Possibly a way to see the most popular page visited 'next' after starting on the specific entrance/landing page Anything else that might be useful The two URLs would be like: http://www.domain.com/search/testa/
Conversion Rate Optimization | | Robert-B
http://www.domain.com/search/testb/ Any insight about the best way to do this is greatly appreciated! Cheers!0 -
E-commerce Customer Reviews/Ratings Solutions?
Hi all, Was wondering if based on your experience you could recommend E-commerce customer reviews/ratings solutions? Or if you prefer to use in-house built solutions. I currently have proposals from bazaarvoice, Shopzilla and Reevoo. Cheers
Conversion Rate Optimization | | Carlos-R0 -
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 -
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 -
Related/Recommended Products Engine
We have an e-commerce site which does not have this functionality. Does anyone have any recommendations for a solution to provide this functionality? Many thanks
Conversion Rate Optimization | | WAWKA0 -
Ideal product page conversion/retention rate for eCommerce sites
Hi SEOmoz-ers, I was wondering if anyone has data regarding product page abandonment rate (% of potential customers that leave the site after seeing product pages) for websites like Overstock, REI or Zappos? As you may know the above mentioned sites do an exceptional job with product pages. It would be helpful to know what some of the leaders in this space are achieving in terms of conversion rate. What is your personal opinion about this? Thanks,
Conversion Rate Optimization | | Kush_VMI
Kush0