Shinobi Search Dojo
Ch. 11手記9 min read

Portfolio Rendering Checks

A portfolio can look complete in your browser while leaving an unanswered question: does a search engine receive the project description, or only the instructions that will eventually display it? The opposite is also possible. A cinematic site may already deliver useful text and links before any animation begins. Its appearance alone tells you neither.

Yes, search can read a JavaScript-powered creative portfolio. Whether it can read yours depends on what the page returns, what becomes available after rendering, and what crawler evidence shows. Before cutting the motion or commissioning a rebuild, compare those versions of one important project.

We treat creative portfolio rendering as a question about the work itself: can a crawler reach a page that names the project, explains your contribution and connects it to relevant services? That gives you a more useful starting point than judging the framework or watching the loading animation.

01

Choose One Project Worth Finding

Start with a published project you want a potential commissioner or collaborator to discover. Choose its individual URL rather than the homepage. A homepage may introduce the studio perfectly while a project template fails to deliver the detail that makes a particular commission relevant.

Identify one distinctive sentence from the project description. Prefer a sentence explaining what your team did, rather than a generic line about creative ambition. Also select one useful link on that page, such as a connection to the relevant capability or another closely related project.

These become your reference points throughout the check. Following the same sentence and link prevents a misleading comparison in which the initial response contains only the studio navigation, but you count that as evidence that the project itself is readable.

If the project has no description, pause there. A rendering fix cannot supply an explanation that has never been written. A reel can show the finished work without clarifying whether your contribution was direction, editing, colour or sound. Add that context for the person assessing your suitability, then check how the page delivers it.

02

Separate The Response From The Rendered Page

The HTTP response HTML is the document the server sends when a browser or crawler requests the URL. It may contain the project heading, description and links already. Alternatively, it may contain a limited page structure and scripts that must run before the project appears.

The rendered DOM is the browser’s working document after it has processed the page and executed JavaScript. Scripts can add text, replace headings, generate links or load project information into that document. What you see on screen reflects this later state, not necessarily everything supplied in the original response.

Google’s JavaScript SEO guidance states: “Googlebot queues pages for both crawling and rendering.” Google parses the response for links, then parses the rendered HTML for links again and uses the rendered HTML to index the page. Rendering is therefore part of its processing, not evidence that a JavaScript site is automatically unreadable.

That distinction prevents two expensive mistakes. Missing text in the initial response does not, by itself, prove Google cannot see it. Equally, text appearing in your browser does not establish that Google successfully received and rendered the same content. You need to compare the stages rather than use either as a substitute for the other.

03

Look For The Project In The Initial HTML

Open the project URL directly. In your browser’s developer tools, use the Network panel to locate the main document request and inspect its response. Make sure you are looking at the document for the project, not a script file, an image request or a separate data response.

Search for your chosen sentence. If it appears, inspect its surrounding context. Is it present as page content, alongside the project heading, or only stored inside script data waiting to be turned into content? Finding the words somewhere in the response is not the same as finding a paragraph that already belongs to the page.

Next, look for the selected link. A crawlable HTML link needs an anchor element with an href attribute containing its destination. A visually convincing project card may instead depend on a click handler. The fact that clicking works for you does not answer how a crawler discovers the destination.

Record what is actually present: the description as page content, the link and its destination, and any missing element. Avoid reducing the result to “JavaScript site” or “HTML site”. A portfolio can return substantive HTML and still use extensive JavaScript for transitions, filters and playback.

If both reference points are already there, the initial response has answered an important part of the question. Do not recommend server rendering simply because the site moves. Continue checking whether later rendering preserves that content and whether Google can access the page.

04

Check What Rendering Adds Or Removes

Use the browser’s Elements panel to inspect the rendered document. Find the same description and link again. Compare the wording and destination with the response, rather than checking only that the layout looks right.

If the sentence was absent from the response but exists in the DOM, JavaScript has supplied it. That identifies a dependency to investigate, not an automatic failure. If the sentence was present initially but disappears or changes after rendering, the later state matters too. A complete response does not excuse a script replacing the intended project with unrelated or incomplete content.

Pay attention to the steps required to reveal the work. Does the description appear on a direct visit, or only after selecting a thumbnail, opening an overlay or moving through a sequence? Note those interactions explicitly. They distinguish content delivered with the project page from content you reached through a particular browsing session.

Test the destination of your selected link by opening it directly as well. A project that works only after entering through the portfolio grid presents a different problem from a project that loads correctly at its own URL. The useful question is whether that address delivers the intended work independently of your previous clicks.

Disabling JavaScript can provide a quick view of the page’s underlying content, but it is not a simulation of Googlebot. Google can execute JavaScript. Use the comparison to understand dependencies, then turn to Google’s evidence to assess what its rendering process receives.

05

Compare With Google’s View

Search Console’s URL Inspection tool is the next step for the same project URL. Use it to examine Google’s information about that page and, where available, inspect the rendered HTML. Look for the exact sentence and the link destination you have been following.

Keep the indexed information and a live test distinct. The indexed information concerns Google’s recorded handling of the URL; a live test checks the page as tested now. If you have changed the template since the recorded crawl, disagreement may reflect different versions rather than an intermittent fault. Note which evidence you are comparing.

A screenshot helps you see whether the page has rendered recognisably. The HTML answers the more precise question of whether the project description and link exist in that rendered document. A familiar poster frame or studio logo is not enough to establish that the supporting text arrived.

If the browser has the description but Google’s rendered HTML does not, investigate the resources and access conditions needed to produce it. Google’s guidance says it will not render JavaScript from blocked files or on blocked pages. Check crawl access and the relevant script or content-loading dependencies before rewriting the description.

Where a crawl export is available, establish whether the crawler executed JavaScript. A non-rendering crawl and a JavaScript-rendering crawl answer different questions. Neither should be labelled “what Google sees” without qualification. Their value is in helping locate where the content becomes available, while Search Console supplies evidence specific to Google.

06

Match The Fix To The Missing Evidence

The comparison should lead to a specific decision, not a general instruction to make the site more SEO-friendly.

If the response, browser DOM and Google’s rendered HTML all contain the intended description and link, you have evidence that those elements are available across the checked stages. If the project still is not appearing as expected, broaden the investigation to indexation controls, canonical selection, internal discovery and the usefulness of the page. Rebuilding the rendering path would not address a demonstrated absence in this case.

If the content appears only after JavaScript runs and Google also receives it, decide whether that dependency is appropriate for essential project information. Google recommends server-side or pre-rendering and notes that not all bots can run JavaScript. Delivering core text and links in the response can reduce reliance on later execution without requiring you to remove the interactive presentation.

If Google is missing content that your browser displays, define the missing element and the stage where it disappears. Our technical SEO work covers JavaScript rendering, crawl access and indexation, with developer-ready fix instructions or implementation. For this problem, the useful brief names the affected project URLs, the content or links missing, and how the correction will be checked.

If the page lacks a meaningful description in every version, treat that as a content task. Explain the project, your actual role and the relevant craft. More reliable delivery of an unexplained title and reel still leaves a prospective commissioner guessing what they could hire you to do.

07

Keep The Cinematic Layer, Strengthen The Project Page

A portfolio does not need to become a plain directory to give search engines useful content. The project title, description, credits and relevant links can form a stable page beneath the motion. Transitions and playback can then shape the viewing experience without carrying the entire responsibility for explaining the work.

The same principle helps people arriving from search. Someone entering directly on a project may not have seen your homepage introduction or showreel. Give that visitor enough context to understand the commission and your contribution, then a relevant route towards a capability page or an enquiry.

Where the evidence points to a template change, our SEO-first development includes crawlable pages, content structure, metadata and server-rendered content where needed. A targeted template improvement may be enough; a whole-site rebuild is not the default answer to a missing paragraph or an unreliable project link. We can also provide SEO direction and QA while your existing developer carries out the work.

After a correction, repeat the comparison using the same sentence and destination. Then check other projects using that template, including any with different media or content arrangements. One successful project check supports a conclusion about that page, not every route in the portfolio.

08

Decide From The Content, Not The Effects

Search can read your creative portfolio when it can reach and process the content that explains the work. The practical test is to follow one real project description and one useful link from the initial response through rendering to crawler evidence.

Keep the cinematic design unless the evidence identifies a reason to change how it delivers essential content. If the versions disagree, bring the project URL, the missing sentence or destination, and the relevant inspection or crawl evidence to a technical review. That gives us a defined problem to diagnose before deciding whether the right work is a content correction, an access fix or a template change.

Want this applied to your title, portfolio, catalogue or platform?

Request an SEO review