HTML title 要素完全ガイド (SEO 観点)

JavaScript で動的にタイトル変更

// 単純な書き換え
document.title = '新しいタイトル';

// 未読件数を表示
let unread = 5;
document.title = `(${unread}) Inbox | MyApp`;

// 可視性に応じた切替
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    document.title = '★ 戻ってきてね | MyApp';
  } else {
    document.title = 'MyApp';
  }
});

SPA でのタイトル管理

Vue Router

const routes = [
  { path: '/', component: Home, meta: { title: 'ホーム | MyApp' } },
  { path: '/about', component: About, meta: { title: 'About | MyApp' } },
];

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title;
});

Next.js (App Router)

// app/page.tsx
export const metadata = {
  title: 'ホーム | MyApp',
  description: '...',
};

// 動的タイトル
// app/posts/[id]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.id);
  return { title: `${post.title} | MyApp` };
}

// テンプレート (子から見て共通の接尾辞)
// app/layout.tsx
export const metadata = {
  title: { default: 'MyApp', template: '%s | MyApp' }
};

React (react-helmet-async)

import { Helmet } from 'react-helmet-async';

function Page() {
  return (
    <>
      
        
        
      
      ...
    
  );
}

多言語サイトでの title

  
  
  





  
  ...

絵文字や記号を入れるべきか

検索結果で目立つので CTR が上がるという報告もありますが、ジャンルを選びます:

• ○ 通販・キャンペーン: 「【セール中】iPhone 15 Pro 最安値 ⭐」
• × 法人・士業・医療: 信頼性を損なうので避ける
• Google の表示制御: 絵文字が黒丸 (●) に置換されたり消されるケースあり

よくあるミス

確認方法

# curl で title を取得
curl -s https://example.com | grep -oP '