𝗛𝗼𝘄 𝗜 𝗦𝗵𝗶𝗽𝗽𝗲𝗱 𝗔 𝗕𝗹𝗼𝗴 𝗚𝗼𝗼𝗴𝗹𝗲 𝗖𝗼𝘂𝗹𝗱𝗻'𝘁 𝗦𝗲𝗲
My blog looked perfect in the browser. I could read every word.
Then I ran a simple curl command to check the raw HTML.
The result was shocking. The body text was missing. The HTML contained only a title and an empty div. My content did not exist on the server.
For months, I shipped empty pages to search engines.
Here is why this happened and how you can prevent it.
𝗧𝗵𝗲 𝗛𝗶𝗱𝗱𝗲𝗻 𝗕𝘂𝗴
I used SvelteKit with prerendering enabled. I thought the site was static.
The mistake was in my code. I used the onMount lifecycle hook to parse my Markdown content.
onMount only runs in the browser. It does not run during the build process.
When the crawler or a search engine visited my site, they received a skeleton page with no text. The content only appeared after JavaScript ran.
Why did I not catch this?
• Browsers run JavaScript. My manual tests always looked fine. • Uptime monitors check for a 200 OK status. My site returned 200 OK. • Lighthouse runs JavaScript. Its scores stayed high.
I was testing the hydrated version, not the indexed version.
𝗧𝗵𝗲 𝗙𝗶𝘅
I had to move the Markdown parsing out of the lifecycle hook and into the module scope.
I changed the code so the parsing happens during the render pass. This ensures the text is part of the actual HTML file on the disk.
After the fix, my page size grew from 32 KB to 45 KB. That 13 KB difference was my actual content.
𝗧𝗵𝗿𝗲𝗲 𝗪𝗮𝘆𝘀 𝘁𝗼 𝗔𝘃𝗼𝗶𝗱 𝗧𝗵𝗶𝘀
Use "View Source," not DevTools. DevTools shows the DOM after JavaScript runs. View Source shows what actually arrived on the wire. Always check the raw source for critical content.
Use curl to verify content. Pick a unique phrase from your article. Run a grep command against your live URL. If the count is zero, your SEO is dying.
Test with JavaScript disabled. Turn off JS in your browser settings. If your content disappears, your search engines cannot see it.
Do not trust your eyes. Trust the raw data.
Source: https://dev.to/ferhatatagun/how-i-shipped-a-blog-google-couldnt-see-2nlc