Title Tags
Setting the page title across 13 distinct technology stacks.
Static HTML
Standard.
Head Tag
In your index.html:
<head>
<title>My Page Title | Brand</title>
</head>
React (Vite)
react-helmet-async.
Implementation
npm install react-helmet-async
- Wrap App in
HelmetProvider.
- In Component:
<Helmet>
<title>My Page Title</title>
</Helmet>
Next.js
Metadata API.
Implementation
In layout.tsx or page.tsx:
export const metadata = {
title: 'My Title'
}
Vue / Nuxt
useHead.
Implementation
In <script setup>:
useHead({
title: 'My Title'
})
SvelteKit
Svelte Head.
Implementation
In +page.svelte:
<svelte:head>
<title>My Title</title>
</svelte:head>
Astro
Layout Prop.
Implementation
Pass title as a prop to your Layout.
---
const { title } = Astro.props;
---
<head>
<title>{title}</title>
</head>
Ruby on Rails
ERB Yield.
Layout
In application.html.erb:
<title><%= yield(:title) || "Default" %></title>
In View:
<% content_for :title, "My Page Title" %>
Python (Django)
Template Block.
Implementation
In base.html: <title>{% block title %}Default{% endblock %}</title>
In page.html:
{% block title %}My Page Title{% endblock %}
Python (Flask)
Jinja2.
Implementation
Same mechanics as Django (Jinja2).
Pass variable from route: render_template('index.html', title='Home').
Laravel
Blade.
Implementation
In Layout: <title>@yield('title')</title>
In View: @section('title', 'Home Page')
ASP.NET Core
ViewData.
Implementation
In _Layout.cshtml: <title>@ViewData["Title"]</title>
In Page: @{ ViewData["Title"] = "Home Page"; }
Go (Gin)
Template.
Implementation
Go templates use dot syntax.
<title>{{ .Title }}</title>
Pass map: c.HTML(200, "index.html", gin.H{"Title": "Home"})
Java (Spring)
Thymeleaf.
Implementation
Use standard expression:
<title th:text="${pageTitle}">Default</title>
Verification Checklist
- View Source