SEO for each page thats added dynamically : react js - reactjs

I am trying to create a site like stackoverflow where there can be multiple questions added by users and they can answer
https://wixten.com/
But I don't know how to seo for each page that's added dynamically when a question is asked.
I have configured the dynamic page that is created when each page is created with helmet so each route has its own page title and description.
Since all inner pages are dynamically generated, I am not able to create site maps for each pages.
Since Google bot does not crawl through the dynamic urls I have no idea how I can index these pages - I need help.
Hope someone will help me I have been stuck with this for the past 2 weeks, I tried everything on the internet I could find but no luck

Adding links pointing to the dynamic pages is the key. For example if you have a list of questions like in stackoverflow, google has already accessed that page (list of questions) and it's a matter of time for your new page to get indexed. The other thing you have to do is create a dynamic sitemap.xml file witch changes depending on the creating/deletion of pages in your website :)

Related

How to embed a wordpress page inside a nextjs page

I have a Nextjs project where I want to show a Wordpress page on some of the pages. So for example on this route products/[id] I want to show a wordpress page that contains info related to that product below the main info. This is needed because for some of the designs we are using Divi.
At the moment the only solution I came up with was using and iframe to show the page (it works), but it feels a bit hacky and it's probably not the best solution. Is there a better way to do it? Thanks.

How can I create a deeper level of detail page for single list content in HUGO

I’m building our job posting pages with Hugo. So we will have a “Join Us” section with the list of job postings there and then we will need a detailed page for each job post, something like /join/software_engineer/. Hugo works well for this part, I created a section page template and single page template, with all the job posts in the content folder.
But now we need a deeper level of the detail page, like /join/software_engineer/submit/ to submit the resume and other info. The detail page may look very similar for every job post and will need some info from the single list content and a structured URL. Is there any way I can achieve this in a “HUGO way”? (Right now I’m coding the submit section with a modal, but still very curious if this kind of detail page is achievable.)
Any suggestions? Thank you in advance :).
if you like to go deeper your last folder needs to have an _index.md file (note the underscore). Then set the type in your frontmatter and create a custom layout e.g.
type: software_engineer
layouts/software_engineer/list.html
I have a site where I go many levels deep and that works well.

How does Stackoverflow highlight the answers with the sharable link with pagination for answers?

When we get a sharable link for an answer here, It gives the link with a hash parameter and when the link is loaded, it scrolls down and highlights the particular answer with a color. It works even if there are a lot of answers with pagination enabled. It automatically goes to the page and highlights the answer. How does that work?
I am working on a project where the situation is kind of the same as this and I have managed to achieve this without pagination. I have used React JS(along with react-router-dom for routes) for the front end and Django Rest Framework for the backend.
I have a server-side pagination enabled list of answers and I can travel through pages in the front-end as well. But like earlier it does not highlight a particular answer with the hash parameter in the url if that answer is not on the front page. I have to manually give the page number where the answer exists and that is the only way it works for now.
Is there any way to travel though pages and find the answer automatically and highlight it?
Can I do the same thing as it does here in Stackoverflow with these frameworks and if yes, how?
Any answer would be great!
Thank you!

how to dynamically set title and description of angular single page application for google bot?

i want google bot to recognize titles and descriptions of my pages, the title and descriptions are coming from the database..
i used
document.title = $scope.dataFetchedFromDB.title;
and
document.querySelector("meta[name='description']").content = $scope.dataFetchedFromDB.description;
and it does change the title and description in the browser, but not in the snippets fetched by google or facebook or slack.... the old title and description remains.
i know about ng-meta npm package, but i dont have my pages on static route, the route is determined by the page ID (every page has its ID and its description and title)
i also read
Remember that while Google says that they use JavaScript to crawl pages, Facebook, Twitter, etc., do not. You can test Google's render of your page from the links here.
But Google takes a while to index these changes in their snippets. I would recommend creating a Google Search Console account and having it fetch-and-render the pages you want it to re-index. Even then, public results make take days or weeks to reflect your changes.
Also, it seems that the Googlebot with Javascript doesn't have a lot of patience. Try to make sure you are changing your Title and Description within mere moments of the page loading, and not at the end. In little tests, it appears that the Googlebot renderer may time-out after a few seconds, and only capture the original Title and Description.
In order to get other sites like Facebook/Twitter to render the proper metadata, you'll need to server-side render these pieces of data. Whatever appears when you say "View Source..." will be seen by these simplified crawlers. Consider updating to Angular (from AngularJS) and try server-side rendering for your metadata.

SEO: Does Google recognize dynamically inserted text via Angular?

I've created an angular SPA that dynamically inserts text all over the place but more specifically it has a service that dynamically changes the title tag for each page. Is Google able to index this properly?
See ps101.com for it in action.
You will find some information here:
http://mono.software/2016/02/18/SEO-for-javascript-applications/
http://searchengineland.com/can-now-trust-google-crawl-ajax-sites-235267#.Vq9umCaPP-Y.twitter
#eywu from twitter did also some tests on www.jscrawlability.com.
As you can see, the site is not properly indexed on google.
I would recommend you SEO4Ajax to index reliably your website. You can test it, it's free for small sites.

Resources