4

I have single page application, which I would like to add different meta description tag depending on URL. Application does initial data loading from server via fetch (which is needed for description), so it is asynchronous and not immediately ready when script executed.

How do I ensure that search engine reads meta description only when it is ready? Asking because I can't test this freely without affecting users, so I need to be sure how to implement it correctly.

Improve this question
1

2 Answers 2

Reset to default
4

They don't detect when JavaScript execution is finished. The halting problem means that it is impossible to know if arbitrary code that you are running will finish or not. The best you can do is run it for a certain amount of time see if it finishes by then.

So that is exactly what Google does, it runs the code in the page for five seconds, and then it takes a snapshot of the document object model for indexing. It doesn't matter if the JavaScript is finished by then or not, you get only five seconds. If you want your page content and meta description included in the search index, you need to make sure that fetching the data from your server and running the JavaScript to insert it in the DOM consistently takes less than 5 seconds from anywhere in the world.

Most JavaScript framework offer server-side-rendering (SSR) that you should be using to sidestep this problem. SSR allows you to run the JavaScript to render the initial page on the server, usually using NodeJS. Then clients get normal HTML. That is typically faster for users (better UX) and easier for search engines to index.

Improve this answer
3
  • Thanks, so waiting 5 seconds is the answer. Is that documented in Google docs?
    – Somnium
    Mar 31 at 11:24
  • 3
    Google officially says there is no fixed timeout. The five second number comes from what people have reported they have observed in practice (testing with timers on their pages).
    – Stephen Ostermiller ♦
    Mar 31 at 11:39
  • 1
    The halting problem really has nothing to do with this. It has no practical relevance. "The best you can do" would be to analyse the code and it will tell you in 99.99% of the cases what is going to happen. Probably, this would be too resource intensive to do, so a time limit makes more sense.
    – J Fabian Meier
    Mar 31 at 19:53
0

This may be of help

  • Load the initial HTML with a default meta description tag that is generic and can be used for any URL on your site.

  • Once your JavaScript code has loaded, use the Fetch API to retrieve the data for the specific URL that the user is requesting.

  • Once the data has been loaded from the server, use JavaScript to dynamically update the meta description tag with the relevant information.

  • Be sure to add the updated meta description tag to the head of the document using JavaScript.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.