The Developer's Guide to Portfolio SEO_

Introduction

For digital product developers and designers, a portfolio website is more than just a list of past works—it is a functional showcase of your engineering capabilities and a primary channel for business opportunities. However, even the most beautiful Brutalist design or high-performance 3D visualization is useless if recruiters or potential clients cannot find your site in search results.

Applying SEO (Search Engine Optimization) fundamentals ensures that your portfolio acts as a organic magnet for prospective clients. This guide will walk you through professional SEO practices, focusing on semantic structures, proper metadata setups, dynamic JSON-LD discovery, and multi-language discovery.

1. Enforcing Semantic HTML Structure

Search engine crawlers, such as Googlebot, parse your site's source code to understand its structural value. If your portfolio is built entirely out of unsemantic <div> containers, you are hiding critical data relationships from search engines.

Using proper HTML5 semantic elements clarifies the visual hierarchy of your pages.

HTML5 Landmarks and Rules

• Use a single <h1> per page: This acts as the primary focal point of the page. It must contain your core topic or primary keyword.
• Maintain Strict Heading Hierarchies: Never jump from an <h2> directly to an <h4>. Headings define sections and sub-sections, not styles.
• Utilize Semantic Landmarks: Wrap layouts in <header>, <nav>, <main>, <section>, and <footer>.
• Use Descriptive Link Texts: Never use "click here" or "read more". Instead, write descriptive, keywords-focused anchor links like "View the Emameun Project Case Study".

2. Meta Tags and Social Previews

Whenever your pages are shared on social channels or crawled by search engines, meta tags dictate exactly how they are formatted. Adding robust Open Graph (OG) and Twitter Card tags dramatically increases Click-Through Rates (CTR).

In your Svelte projects, you should encapsulate this in a clean, reusable SEO component:

<!-- src/lib/components/seo/seo.svelte -->
<script lang="ts">
	import { page } from '$app/state';

	let {
		title = 'Mikeu Dev | Portfolio',
		description = 'High-Performance Fullstack Portfolio',
		ogImage = 'https://www.mikeudev.my.id/og-default.png'
	} = $props<{
		title?: string;
		description?: string;
		ogImage?: string;
	}>();

	let canonicalUrl = $derived(page.url.origin + page.url.pathname);
</script>

<svelte:head>
	<title>{title}</title>
	<meta name="description" content={description} />
	<link rel="canonical" href={canonicalUrl} />

	<!-- Open Graph / Facebook -->
	<meta property="og:type" content="website" />
	<meta property="og:url" content={canonicalUrl} />
	<meta property="og:title" content={title} />
	<meta property="og:description" content={description} />
	<meta property="og:image" content={ogImage} />

	<!-- Twitter -->
	<meta property="twitter:card" content="summary_large_image" />
	<meta property="twitter:url" content={canonicalUrl} />
	<meta property="twitter:title" content={title} />
	<meta property="twitter:description" content={description} />
	<meta property="twitter:image" content={ogImage} />
</svelte:head>

3. Dynamic JSON-LD Structured Data

Structured Data (JSON-LD) is a standardized format that provides explicit clues about the meaning of a page. By injecting JSON-LD schemas, you allow Google to represent your portfolio as rich, detailed search listings, displaying ratings, work details, or professional profiles directly in the search index.

For a developer portfolio, a ProfilePage or CreativeWork schema is highly recommended.

Here is how you inject JSON-LD safely inside Svelte:

<script lang="ts">
	const schema = {
		"@context": "https://schema.org",
		"@type": "ProfilePage",
		"mainEntity": {
			"@type": "Person",
			"name": "Riki Ruswandi",
			"alternateName": "Mikeu Dev",
			"jobTitle": "Fullstack Software Engineer",
			"url": "https://www.mikeudev.my.id",
			"sameAs": [
				"https://github.com/rikiruswandi",
				"https://linkedin.com/in/rikiruswandi"
			]
		}
	};

	let serializedSchema = JSON.stringify(schema);
</script>

<svelte:head>
	{@html '<script type="application/ld+json">' + serializedSchema + '</script>'}
</svelte:head>

4. Multi-Language SEO (hreflang)

If your portfolio supports multiple languages (e.g., English and Indonesian), search engines must understand which version to serve to specific audiences. If done incorrectly, crawlers might penalize your site for duplicate content.

To resolve this, you must output explicit hreflang alternate tags in your header for each supported locale, plus an x-default fallback link:

<link rel="alternate" hreflang="en" href="https://www.mikeudev.my.id/blog/post-slug" />
<link rel="alternate" hreflang="id" href="https://www.mikeudev.my.id/id/blog/post-slug" />
<link rel="alternate" hreflang="x-default" href="https://www.mikeudev.my.id/blog/post-slug" />

This tells search engines exactly how the translations align, ensuring the appropriate language version is displayed based on the searcher's geographic region.

Conclusion

SEO is not about gaming search algorithms; it is about providing crawlable clarity. By writing clean semantic layouts, serving optimized social previews, injecting profile-level structured schemas, and specifying translation relationships, you ensure your portfolio stands out to search engines and clients alike.