In this video of the JavaScript SEO series, Webmaster Trends Analyst, Martin Splitt shares how to make your React apps discoverable in search and how to avoid common problems you may encounter with a React app.
Check out ReactDomServer → http://bit.ly/2W2fKUu
Learn more about react-snap → http://bit.ly/2JgeQT0
Learn more about Rendertron → http://bit.ly/2TCZU60
JavaScript SEO is an entirely new series on best practices and SEO for JavaScript.
Subscribe to the Google Search Central Channel → https://goo.gle/SearchCentral
Check out other videos in the JavaScript SEO Playlist → https://bit.ly/JavaScriptSEO
source
Subscribe to Google Search Central Channel → https://goo.gle/SearchCentral
Mobile friendly test tool has been discontinued
thanks
I like your video presentation. It is informative too, at the same time. Thanks a lot for your guidance!
When I see this I think I've selected wrong industry
I have hosted new react website on server and now website is index , crawled but not showing google search cache please let me know the issue
This is exactly what, I am currently working, let's see I build an ecommerce with react, but the problem was find the right tool to serve server-side files, in my case I'm using NextJs and It's useful discover there are other libraries like react span for simple static files
dzec
As of Feb 2023, Rendertron is deprecated and React-snap hasn't been maintained actively for a while.
"Please note that this project is deprecated. Dynamic rendering is not a recommended approach and there are better approaches to rendering on the web."
light theme attracts bugs 😀
I have a question regarding seo meta data of react, how can i set meta data dynamically so that when i paste the url on social media like Facebook or Twitter thn i get the preview of this url, like when i am in home page it will show me meta data of home page. Through api i can achieve it i can fetch data from server but the problem is when i paste the url on social media i am not seeing any previous and also meta data on set in head tag, maybe api takes time and meanwhile Facebook or other social media fetch url data quickly. i have used react helmet and others traditional way but could not achieve this, Could you please help me to find out the solution please????
please do a detailed video on server side rendering or how to make react app discoverable
Hey, Your videos are very nice and useful. Can you help me? My website is on Reactjs but on Client-Side Rendering. Using React APIs as the backend is WordPress and the Frontend is Reactjs. All my keywords rankings dropped and not a single keyword is in Google Search now which were on top pages. Can you help me by suggesting to me the best possible way to get the data and ranking back?
Awesome can't believe I didn't come across this sooner! Thanks!
React is a library, not a framework.
What about nextJS?
do we really need nextjs, if googlebot can index SPA?
needing to pack in an extra 3 minutes to add all the necessary stuff and explain whats going on, is the most React thing I've seen in so long
Masih belum paham 🙁
Hello @Martin, Can you please help me to redirect html page to reactjs using htacces. or any other solution for that. Please help me out in this.
Any one having solution please reply to me.
This is an awesome video, though I would have liked the code slides to be placed up longer; this would be fine, but you also don’t provide a courtesy GitHub link to the code explained.
Thanks for this.
Rather than making search bots more intelligent which btw are using the same method to index since ages with just little upgrades here and there , Bots wants the website to be build in more old fashion to get indexed… Why not upgrade the bots rather than telling developers to make their website the old way.
Brilliant – thank you
We will take over the world
You want to be my friend
i got 2 different homepage seo on the page google crawled.
one is index.html and another one is helmet component.
how it is possible?
i have checked seochecker site in react page of http://www.bavalaksh.com and it grade is 0 🙁
but it say no content are available (Empty page).
now i put meta tag, title tag, meta description in index.html and also say no content are availabe in the page.
how to solve it. please revert me if you have any doubt?
Thanks a lot. So then, if you want a website that really Google friendly do it in the best practice of 'traditional' server/browser means.
Are you (the one moderating and talking in this video) from Germany? Your accent sounds very german xD
Bro helmet does not help. It renders late.
So for SEO, is NextJS better than just using React Helmet with basic React?
Impressionant !
Excellent Clarity. Thank You
On supporte 🙂
Video starts 3:27
This is the best video ever, thank you very much!
Could client side rendering through React get us a manual action? We don't hide anything, all our structured data is visible to the user. But we are using client side rendering with React. We are in process of fixing it but our Jobs posting website has this message: "JobPosting structured data found on pages that don't have job posting content". It just seems to me that a manual reviewer would see what our users see? I could understand if we got dinged algorithmically, but I'm perplexed at the manual action.
I'm starting in the React's world. This video was more enlightening than all the tuts I saw xD. Thank you. I think it's going to be a good start knowing all these things.
more of this would be awesome
Finally!
Please more examples for front-end developers
Thank you very much, Martin. It's a really incredible series of videos which start closing some JS SEO gaps. Can't believe it hasn't 1 million views already. hashtag react
Hi, I have problem with Lighthouse and React CSR website. When running Speed and Performance Test ,the load time of page is quite nice when checking in webpagetest.org but really poor in Lighthouse report. What does it mean? Does Google takes only Performance metrics from Lighthouse or it is not the only source of defining site speed, TFBs and other metrics? From where does those differences between tools came from? Anyone else have this problem?
Fantastic, thank you so much for making these, please keep these coming. Professional SEO for a large website and have not found anything as useful as this about JS SEO before 🙂
Thank u for this awesome video, i am waiting next video
– React devs: Look, now react is SEO, you just need to use react.router to handle your request and react-helmet to add metadata and react-snap to prerender the content to a static file.
– Me:🤔So why don't you go for the static file on the 1st place?
Thanks for this.
Was laughing now at the one position I had at a previous company.
In the interview they told me I will have to do SEO on a Single Page Application.
As interviews sometimes go, you a bit nervous, and all I heard was Single Pager. (Infinity page, one pager).
Saying, ah yeah, it will be hard, but through a good blog and content strategy you can rank the blog and point to the website.
My first day at the office, "aaaaaaah" it is a Single Page Application, JavaScript. And Google Crawlers and JS at the time was still newish.
I learned a lot and had to think creative to make it work.
Okay so with the 3 methods you mentioned you can make sure SPAs are indexable. Nevertheless, are all article pages from your example going to be indexable without pre-rendering or SSR?
Nice series Martin, keep it up!
Just wondering, is it possible that you can say something about "single-page apps" created only with AJAX calls? Thanks in advance
Yay, a new video!