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

Question

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

Answer 1

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.