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
-
We changed our domain, I used the move tool in Google Search Console and I am having our site redirected and go daddy, and now I spoke with someone who suggest we do a 301 redirect for all pages on our site and I’m not sure that’s the correct move.
We just changed our domain name after 15 years. when I bought the new domain name I called Go Daddy and they instructed me to contact my google G sweet admin account and change all of our emails over which I did and then I went into Shopify who is my host and changed my primary domain there and then I went back to Go Daddy and had my old website forwarded to my new site. since then there has been nothing but problems with Google. my product feed from my merchant center account has been suspended three or four times now, I tried to rename and move all of my Google accounts from my old domain to my new one, but I am not an SEO person... after making the changes I have started google chats with analytics department with the merchant center with Google as they all keep saying that it looks fine but I’m not convinced because the product feed keeps getting disapproved. So I posted an ad for help and the Guy I spoke with suggested I do a 301 redirect for every single page on my old site, But I’m concerned that might confuse things further? I’ve already started the move in Google Search console And in Shopify I added the old domain back into the domains section and am having it redirectEd that way too... I guess I’m just looking to know which way I should proceed, any and all advice is warmly welcome thank you in advance Maureen
Conversion Rate Optimization | | TooFast130 -
How can I track if a landing page assists a lead/goal to another page in Google Analytics?
For example, I'm running a PPC campaign for site.com/landing-page and it consists of different product pages like below: site.com/product-1 site.com/product-2 site.com/product-3 How to determine if /landing-page assists a lead/goal to a specific product page in Analytics? Example scenario: /landing-page -> /product-3 -> Lead TIA!
Conversion Rate Optimization | | zpm20140 -
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 -
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 -
Optimising /product/ pages for our 15,000 product ecommerce store.
Hi guys! We're constantly working on evolving our /product/ pages on the site, however some times it's pretty easy to get lost in your own mess. Especially when the sites consists of 15,000+ products. So it's pretty painful to handcraft every single page. So I thought I'd jump in here to see if anyone had any suggestions for stuff we're missing, and or should improve? These are product pages: http://www.warcom.com.au/products/9954_draytek-vigor-120-single-port-adsl-122-modem http://www.warcom.com.au/products/49884_warcom-deluxe-double-lcd-monitor-stand---free-shipping There is a few issues we're aware of already.. Negatives: To many links in the left menus. To many links in the footer. Positives: We recently included rich snippets.. We're always testing out colors and styles. We're always testing meta data. Any and all suggestions will be greatly appreciated. Thanks!
Conversion Rate Optimization | | warcom
Paul.0 -
Any providers offering a/b testing using JS callbacks?
Hi all, I am looking to test the impact of buy button wording on conversion rate. The website in question has a few thousand products on non-dynamic URLs. The common a/b testing products on the market restrict tests to a single URL, or you have to enter all the URLs being tested which isn't practical. Ideal Solution What I'd really like to do is: use the provider's web app to configure an experiment with a name and a description of the variations; use some JS code to run the experiment with a callback to carry out the variation. This would allow me to easily put this code on the product details page template. I've written example code below for how this would look. When the experiment is run, the provider's framework would a) tell my code what variation to run, and b) handle the measuring of conversion rate. Questions Are there any providers which work like this? Is there an alternative solution on the market? If there isn't someone already doing this, would it be useful to anyone else? Joel // Loads the provider's framework. // Setting the experiment to run when doc is ready.
Conversion Rate Optimization | | switchplane
// Assumes jQuery environment.0 -
How can I improve my Adsense CTR / CPC?
Here's one page where my Ads' setup can be seen: http://www.gameseducativos.com/guarda-do-zoologico/quebra-cabecas
Conversion Rate Optimization | | rpedri0