I have a frontend built in Reactjs and a backend in Laravel. Both are on the same server. I have a feature of Social Share for Facebook and Twitter. As both reads informations from meta tags provided in the head tag while sharing.
So my question is how to share information from a specific page (component) of frontend when its content gets changed.
I googled on this. It is being advised to use Server Side Rendering for this.
Is there any alternative for this to achieve or How to do with SSR then?
Any help would be appreciated. Thanks in advance...
You can try Pre-render. But I recommend SSR
Related
I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.
I am new to using headless cms and was wondering how to render content as a new page? I am building the site in Next.js and comfortable.io but I don't understand how making a new page in comfortable can be passed to the next.js project to produce the pages. Can someone please point me in the correct direction for what I need to learn to understand this?
To get data off your headless CMS you will have to hit the API endpoints provided. In order to render the CMS content on the server side you will have to do your get request to the API in the getInitialProps life cycle method.
After doing so next.js will render the page along with the fetched content to the client.
You can find more information in the documentation link here.
I am working on a question web-app which has 20 posts on a single page. I have to implement facebook share button on each question. I am using meta og:image. However, for sharing each single post, og:image content will have to be changed, but FB doesnot seem to read changes through javascript. As a result, questions within image post is not visible. What are the ways to implement dynamic meta tags so that the images are visible during fb sharing.
JavaScript will be ignored by Facebook, the usual solution is SSR (server side rendering) or something like https://prerender.io/ - you have to make sure each post has a static link.
I am using Next.js with SSR for that, and can only recommend it. Another solution would be Gatsby, for example.
I want to use React JS for my blog website. Is this possible?
SEO is important for me.
U can use nextjs. It a framework for SEO web reactjs.
It includes server side render (SSR), ...
As #Thanh Ngo said, you can use Nextjs
But you can also create a server inside your project. Create a directory inside your project "server" and create a new directory "views". You can use Expressjs or another one. Take a template engine like Pugjs.
Now you're ready to do SEO with React. In your browser, go to the "network conditions" tab and remove checkbox "select automatically" and select "googlebot". You're now ready :)
If you don't understand something in my explanations tell me :)
I highly recommend you can use react-helmet. that can create many meta tag dynamic SEO. It's very useful with google seo
Have read up on angular and generating snapshots for the crawlers
Just want to know if the snapshot needs to have CSS or just plain and img tags for Facebook and Google etc. to work.
Any good examples of how to implement the framework with expression engine or Wordpress.
As I understand it you would actually create two versions of every page. Is that correctly understood ?
Cheers looking forward on trying it out .
As I understand it it's enough to modify the htaccess file to show the snapshots instead of the angular once when the request is coming from Facebook or Google etc.
Thanks