ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
title 要素とは
は HTML 文書のタイトルを表すメタデータ要素。ブラウザのタブ、履歴、ブックマーク、そして検索エンジンの結果ページで見出しとして使われます。
CSS セレクタ完全ガイド | サンプルサイト
...
仕様上のルール
| 項目 | 仕様 |
|---|---|
| 配置場所 | 内 |
| 個数 | 1 ドキュメント 1 個 (必須) |
| 子要素 | テキストのみ (タグは入れられない) |
| 属性 | グローバル属性のみ (lang, dir 等) |
| 文字数 | 仕様上の上限なし。実用上は SEO 観点で 50-60 字 (英) / 28-32 字 (和) |
| HTML 仕様 | HTML 4.01 以降必須要素 |
SEO 観点での書き方
- 主要キーワードを前方に: 「セレクタ完全ガイド | サイト名」のように冒頭にトピック
- サイト名はパイプ
|や ハイフン-で区切る: 「ページタイトル | サイト名」 - ページごとに固有: 全ページ同じタイトルは SEO 大幅減点
- 30 字前後 (日本語): Google 検索結果での表示が切れない
- クリック誘導語を含める: 「完全ガイド」「2026 年版」「徹底比較」
- タイトル詐欺 NG: 中身と無関係なキーワード羅列はペナルティ
title と description / OGP の役割分担
| タグ | 用途 | 推奨長 |
|---|---|---|
| タブ / 検索結果リンクテキスト | 28-32 字 (和) |
| 検索結果のスニペット (本文要約) | 120 字前後 |
| SNS シェア時 (Twitter/Facebook) | 40 字程度 |
| SNS シェア時の説明 | 80 字程度 |
| 本文中の見出し | title と同じか短く |
CSS セレクタ完全ガイド | MyWiki
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 (
<>
記事ページ | MyApp
...
>
);
}
多言語サイトでの title
CSS セレクタ完全ガイド | MyWiki
Complete CSS Selectors Guide | MyWiki
...
絵文字や記号を入れるべきか
検索結果で目立つので CTR が上がるという報告もありますが、ジャンルを選びます:
- ○ 通販・キャンペーン: 「【セール中】iPhone 15 Pro 最安値 ⭐」
- × 法人・士業・医療: 信頼性を損なうので避ける
- Google の表示制御: 絵文字が黒丸 (●) に置換されたり消されるケースあり
よくあるミス
| ミス | 影響 | 対処 |
|---|---|---|
| 全ページ同じタイトル | SEO 大幅減点 | ページごとに固有に |
| 「無題ドキュメント」 | CMS デフォルトのまま放置 | 必ず編集 |
| キーワード羅列 | スパム判定 | 自然な文に |
| 長すぎる (60 字超) | 後ろが「...」で切れる | 30 字前後に |
| SPA でタイトル未更新 | 全ページ同じ扱い | ルーター連動 |
| JS 描画 = Googlebot に届かない | クロール時 title 空 | SSR or プリレンダリング |
確認方法
# curl で title を取得
curl -s https://example.com | grep -oP '[^<]+'
# Google Search Console
# → URL検査 → ライブテスト → レンダリング後の HTML で title を確認
# ブラウザ DevTools
# → Console: document.title
FAQ
Q: Google が勝手にタイトルを書き換える
A: 2021 年から Google は title を h1 やリンクテキストに書き換えることがあります。書き換えを減らすには「ページ内容と一致した簡潔なタイトル」が有効。
Q: title と h1 は同じにすべき?
A: 完全一致は冗長。title はサイト名込み「記事タイトル | サイト名」、h1 は記事本文の見出し、と役割分担するのが定石。
Q: title 内に HTML タグは書ける?
A: 仕様上 NG。書いてもリテラル表示になります。実体参照 (& 等) は使えます。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- HTML q要素(インライン引用 / blockquote との違い / cite属性の使い方) 2026-06-11 05:44:46
- SQL 制約(NOT NULL / UNIQUE / PRIMARY KEY / FOREIGN KEY / CHECK / DEFAULT 完全ガイド) 2026-06-11 05:44:46
- Mac Safari でユーザーエージェントを切り替える方法(開発メニュー / Chrome や IE のフリ) 2026-06-11 05:44:46
- Laravel ルート一覧確認|php artisan route:list の使い方・フィルタオプション・JSON 出力・キャッシュ 2026-06-11 05:44:46
- Java static変数(クラス変数 / インスタンス変数との違い / 使い所と落とし穴) 2026-06-11 05:44:46
- HTML bdo要素(双方向テキストの方向を強制 / dir 属性の使い方 / bdi との違い) 2026-06-11 05:44:46
- Webスクレイピングとは|Python で始めるサンプルコード・robots.txt・利用規約・法的注意点まとめ 2026-06-11 05:44:46
- Canvas API 図形描画|四角形 fillRect / 円 arc / 線 lineTo / 多角形 と塗りつぶし・輪郭の使い分け 2026-06-11 05:44:46
- jQuery 値の取得|.text() / .html() / .val() / .attr() / .data() の違いと使い分け 2026-06-11 05:44:46
- UE5 ThirdPersonテンプレート キャラクターを歩かせる方法(Max Walk Speed / Shift で走る切替) 2026-06-11 05:44:46
- HTML figure要素(figcaption と一緒に図表・画像・コードを意味付け) 2026-06-11 05:44:46
- SQL DELETE 文 完全ガイド|WHERE 句必須、ROLLBACK、TRUNCATE との違い、Oracle/MySQL/PostgreSQL の違い 2026-06-11 05:44:46
- jQuery クリックイベント完全ガイド|.click() と .on("click") の違い・イベント委譲・ダブルクリック対策 2026-06-11 05:44:46
- jQuery .ready()(DOM 構築完了で実行 / 4 つの書き方 / 現代の代替) 2026-06-11 05:44:46
- Java Calendar.getInstance() 使い方|タイムゾーン/ロケール指定・年月日曜日の取得・LocalDate との比較 2026-06-11 05:44:46
コメントを削除してもよろしいでしょうか?