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
-
Overlay / modal for product pages - bad or good for SEO?
Hi all, I am considering using full overlays/modals for an e-commerce site for all our product pages (category/listing pages will be "normal", the product page will come over the listing page as an overlay/modal when you click on the product). Those “product overlays” will also be accessible directly with own URL (if need to be linked to for ex.). All the literature I find out there treats overlays and modals as “marketing” ones (ads, sign-ups, etc.) and is generally critical to overlays when it comes to SEO, while also saying that an overlay that has to do with good UX should not hurt the SEO of our site. What do you think? Will all product pages as overlays be considered as good UX by the search engines and therefore not be negatively impacted, SEO speaking? Or should we stay clear of overlays and create “normal” product pages? Thanks in advance! Arnaud NB: The reason we want to create those overlays are for design and UX purposes, and try to increase our conversion rate.
Conversion Rate Optimization | | Arnaud_Fo0 -
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 -
How can I find the redirect that removes special parameter from Adwords?
My main problem is Google Analytics doesn't show data from Google Adwords because a redirect in my site removes the special parameter(gclid) supplied by Adwords. Here's an email from one of Google Adwords representative: "When I reviewed your website, I found that a redirect set up on your site is removing auto-tagging information from your URLs. Auto-tagging automatically adds a parameter to the end of each of your AdWords destination URLs in order to identify visitors as AdWords referrals. The tag captures keyword, campaign, ad content information, and your ad's position when a user clicked it. The parameter used in auto-tagging is called "gclid." However, due to your website's redirect, the "gclid" parameter is being removed from the URL. As a result, Google Analytics is unable to properly track visitors reaching your site through AdWords. We suggest contacting your webmaster to append the "gclid" parameter to the redirected URL. If this isn't possible, you may want to consider removing the use of the redirect." Thanks in advance!
Conversion Rate Optimization | | esiow20130 -
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 -
Checkout abandonment fix w/ Shopify?
Hey everybody. I run a digital product site on Shopify. Just wondering if anyone has any experience with on page fixes for checkout abandonment? On my site... 31% of people add to cart & never get to checkout. 66% of people reaching checkout abandon their checkouts. Obviously a lot of sales are flying out the window. Any advice would be greatly appreciated!
Conversion Rate Optimization | | PedroAndJobu0 -
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 -
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 -
How accurate is the Geo-Targeting of Google and Bing/Yahoo PPC ads?
I have a client who serves a local market and who has had trouble in the past with people out of her service area clicking on ads. She asked how accurate the geo-targeting option is. I know it's not possible to be completely accurate resolving the location of IP addresses, but was wondering if there are any recent statistics out there regarding how accurate or inaccurate geo-targeting is. I did some quick searches but did not see any current numbers. Many Thanks!
Conversion Rate Optimization | | JKuly0