「タイトルタグってどう書けばいい？」
「SNSシェア用の画像って自動で出るの？」
「SEOやブランディングにも効くってほんと？」
WordPressテーマ制作の中でも、実は軽視されがちなのが <head> 内の記述。
でも、ここにはSEO・SNS表示・ブランド印象など、サイトの“第一印象”を決める大切な情報が詰まっています。
今回は header.php を舞台に、「HTMLヘッダーの最適化」にフォーカスして解説していきます！
✅ 今回のゴール
header.phpの基本構造を理解する- OGPやTwitterカードなど、SNS対応のタグを正しく書く
- SEO視点で「title」や「meta description」を整備する
1. header.php を作って基本構成を整えよう
まずは最小構成の例から👇
<!DOCTYPE html>
<!-- HTMLタグに言語情報（lang属性など）を出力 -->
<html <?php language_attributes(); ?>>
<head>
<!-- サイトの文字コードを指定（WordPressの設定を使用） -->
<meta charset="<?php bloginfo('charset'); ?>">
<!-- レスポンシブ対応：ビューポートの初期設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- WordPressが自動で<title>などを出力するためのフック -->
<?php wp_head(); ?>
</head>
<!-- 現在のページ情報に応じたクラスが body タグに自動で付与される -->
<body <?php body_class(); ?>>✅ 併せて functions.php に追加すべきコード
// WordPressに<title>タグの自動出力を任せる設定（必須）
// これを有効にすると header.php から <title> を書かなくてよくなります
add_theme_support('title-tag');<!-- 実際に出力される例 -->
<title>記事タイトル | サイト名</title>❌ 旧コードでの間違い例
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>これは WordPress 4.4 以降は非推奨 で、現在では add_theme_support('title-tag') によって自動出力されます。
💡ポイント
wp_head()は 絶対に消してはいけません！
→ プラグインやWordPressコア機能がここを通じて必要なCSSやJSを読み込みます。
💡 Google は <title> を重要なランキング要素として見ています。
🔍 補足：bodyタグのクラス制御
<body <?php body_class(); ?>>この body_class() によって、ページの種類に応じたクラス（例：single postid-123 や home blog など）が自動で付与され、CSSでの装飾切り替えなどに役立ちます。
2. SNS対策：OGPタグを設定しよう
SNSシェアで「変なタイトル・画像」にならないために、OGPの設定は超重要！
<!-- OGP基本設定 -->
<meta property="og:title" content="<?php the_title(); ?>"> // タイトルがすべてのページに出力される想定
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>">
<meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/img/ogp.jpg"> // 同じOGP画像がすべてのページに出力される想定
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo('description'); ?>">✅ タイトルが404ページなどでは出力しないよう制御
<?php if (is_single() || is_page()): ?>
<meta property="og:title" content="<?php the_title(); ?>">
<?php endif; ?>✅ 投稿ごとにOGP画像を切り替え
<?php
// アイキャッチが設定されている場合はそのURLを、なければデフォルト画像
if (has_post_thumbnail()) {
$ogp_img = get_the_post_thumbnail_url(null, 'full');
} else {
$ogp_img = get_template_directory_uri() . '/img/ogp.jpg';
}
?>
<meta property="og:image" content="<?php echo esc_url($ogp_img); ?>">💡 OGP画像は絶対パス（http から始まるURL）で指定しましょう。SNS側が相対パスを正しく認識しないことがあります。
3. Twitterカードの設定も忘れずに
<!-- Twitterカード：summary_large_image で大きい画像表示 -->
<meta name="twitter:card" content="summary_large_image">
<!-- サイトのTwitterアカウント（あれば） -->
<meta name="twitter:site" content="@your_account">
<!-- Twitter上に表示する説明文（要約） -->
<meta name="twitter:description" content="ここに要約を入れる">summary_large_image を使うと、画像つきの大きいカードが表示されます。
4. ファビコンとアイコンの設定
<link rel="icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/img/apple-touch-icon.png">/img/ フォルダにアイコンを用意しておきましょう。
WordPress 4.3以降はカスタマイザーからもサイトアイコン（favicon）の設定が可能です！コードで制御したい場合は上記のように書きます。
5. meta description を出し分けよう（SEO対策）
<?php if (is_single() || is_page()): ?>
<meta name="description" content="<?php echo esc_attr(get_the_excerpt()); ?>">
<?php else: ?>
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php endif; ?>💡 get_the_excerpt() で抜粋が空だった場合、自動で本文の冒頭から生成されますが、より確実にしたい場合はカスタムフィールドなどで制御してもOKです。
投稿・固定ページでは get_the_excerpt() を使うと柔軟に対応できます。
✨ meta description を100文字でカットする例：
<?php if (is_single() || is_page()): ?>
<?php
// 抜粋を取得し、100文字にカット（マルチバイト対応）
$desc = get_the_excerpt();
$desc = mb_strimwidth($desc, 0, 100, '...');
?>
<meta name="description" content="<?php echo esc_attr($desc); ?>">
<?php else: ?>
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php endif; ?>💡 抜粋が長すぎる場合に備えて、mb_strimwidth() で文字数を制限しておくと安心です（例：100文字＋「…」）
✅ よくある注意点まとめ
| チェック項目 | 説明 |
|---|---|
<title> は自動化できる？ | add_theme_support('title-tag') を使用すればOK |
wp_head() は必須？ | 絶対必要！消すとプラグインが動かない |
| OGP画像は絶対パス？ | はい。http(s):// で始まるフルURLで記述すること |
🪄 あえてさらに磨くなら…
- noindex指定：検索結果に出したくないページには
<meta name="robots" content="noindex">を条件分岐で出し分け - 構造化データ：JSON-LDを活用し、Googleリッチスニペット対応も◎ (参考：構造化データに関する一般的なガイドライン（Google）)
- 画像サイズ調整：SNS別に適した画像（例：Twitterは横長、LINEは正方形）を自動出力する工夫も可能
📏 SNSごとの推奨画像サイズ
- Twitter：横長 1200×630px
- Facebook：1200×630px
- LINE：正方形 800×800px
📝 次回予告：「get_postsとWP_Queryの違いをマスターしよう」
次回は、テーマ制作でよく使う「投稿の取得」について。get_posts() と WP_Query の違い、そしてそれぞれの使いどころを丁寧に解説します！
