Your Portfolio Page Is Invisible to Google. Ours Was Too, and It Cost Us

A while ago we ran a proper audit of our own website. The finding that stopped us was this: the served HTML for our portfolio page contained no project names at all.

Not hidden. Not badly ranked. Absent. Everything rendered in the browser after JavaScript ran, so a crawler received a page with filter buttons and an empty grid. Our training page was worse — it shipped the words "No trainings found in this category" while fourteen courses sat in the database.

We are a software company. We had shipped the same mistake to ourselves that we are paid to prevent. It is common enough that it is worth writing down.

How this happens to competent teams

Nobody decides to hide their work from search engines. It happens through a sequence of individually reasonable choices.

You build the page as a React component that fetches data. It works. You add filtering, which needs client state, so the component becomes client-side. It still works — in a browser. You test it in a browser. It looks perfect.

The failure is invisible from the inside. Your analytics show visitors, because people arrive from LinkedIn and direct links. Your page loads fine. Nothing is broken. The only symptom is search traffic that never grows, and that is easy to attribute to competition or the algorithm.

The way to catch it takes ten seconds. View source — not the inspector, which shows the DOM after JavaScript. Actual source. If your content is not in there, Google's first pass does not see it either.

The three that were costing us most

Content rendered only in the browser. Fixed by moving data fetching to the server so the list is in the HTML.

No individual URLs. Every case study lived at /Case_Study?project=9. One page, one title, one description, for all of them. We could not send a client a link to their own project, could not get a preview card when sharing, and could not rank for any individual piece of work. Each now has its own address.

A broken preview image. The Open Graph image referenced in our metadata returned a 404. Every share on LinkedIn, Facebook and WhatsApp had been rendering a blank card. Nobody tells you this; they just do not click.

The one that was subtler

Our scroll animations set content to opacity zero, then revealed it once JavaScript ran. The text was in the HTML, which felt safe.

But on a slow connection the page rendered as a series of blank screens. And if the bundle failed, the content never appeared at all. We had made the site's content conditional on JavaScript succeeding, without noticing.

The fix was to author content visible and layer the animation on top, so the failure mode is a missing animation rather than a missing page.

What to check on your own site this week

View source on your most important page and search for a product name. If it is not there, that is your first job.

Take your homepage URL, paste it into a WhatsApp message to yourself, and look at the preview. That is what every share of your site looks like.

Visit yoursite.com/sitemap.xml and yoursite.com/robots.txt. If either returns a 404, search engines are working without a map.

Check whether your case studies, projects, or articles have their own URLs. If they share one address with a query parameter, they are one page as far as search is concerned.

None of this is sophisticated. It is the equivalent of checking that the front door opens. We had not checked ours, and we build these for a living.

Source: Encoder Bytes technical audit of encoderbytes.com.