MENU CLOSE

【WordPress】canonicalタグを出力する
関数を作る

WordPress
WordPress

はじめに

今回はcanonicalタグをWordPressにサクッと設置するメモ。
functions.phpに自作の関数を書いて設定します。

canonicalタグって?

canonicalタグというのは、SEOに関係する重要なhtmlタグのひとつです。
WEBページを公開すると、www有り無しやhttpとhttpsのように複数のURLパターンが存在します。これはそのままにしておくと「重複コンテンツ」といって、ページの評価が分散してしまい正しく評価されません。そのため評価してほしい正しいURLはどれかというのをcanonicalタグで明示し、URLの正規化を行います。(本来はリダイレクトも必要ですが、それはまた次の機会に)

canonicalタグを設置する手順

ここから全ページにcanonicalを設定する具体的な方法を書きます。
※自作の関数ですので、コピペで不具合が起きた場合は自己責任でお願いします。そもそも全てのサイトで使える設定というのは有り得ませんので、ご自身のサイトに使う場合は調整が必須です。

WordPressデフォルトのcanonicalタグを削除

まずデフォルトのままでもWordPressが自動で挿入するcanonicalタグがあります。ただ出力されるページが固定ページと投稿ページに限られるので、今回は完全に自分でカスタマイズするためにその出力を停止します。
functions.phpに下記の記述を追記します。

remove_action('wp_head', 'rel_canonical');

一度、ページのソースを確認して<head>内にcanonicalタグが無くなっていればOKです。

自作のcanonical出力関数を追記する

続いてfunctions.phpに下記の関数を追記します。

//canonical URLを取得
function get_canonical()
{
  //404ページ
  if(is_404()){
    return;
  }

  //フロントページ
  if (is_front_page()) {
    $canonical_url = home_url('/');
  }
  //カテゴリーページ
  elseif (is_category()) {
    $cat_id        = get_query_var('cat');
    $canonical_url = get_category_link($cat_id);
  }
  //タクソノミーページ
  elseif (is_tax()) {
    $term          = get_queried_object();
    $canonical_url = get_term_link($term);
  }
  //タグページ
  elseif (is_tag()) {
    $tag_id        = get_query_var('tag_id');
    $canonical_url = get_tag_link($tag_id);
  }
  //固定・投稿ページ
  elseif (is_page() || is_single()) {
    $canonical_url = get_permalink();
  }
  //著者情報ページ
  elseif(is_author()){
    $author_id     = get_query_var('author');
    $canonical_url = get_author_posts_url($author_id);
  }
  //月別アーカイブページ
  elseif(is_date()){
    $year          = get_query_var('year');
    $month         = get_query_var('monthnum');
    $canonical_url = get_month_link( $year, $month );
  }
  //その他
  else {
    $canonical_url = null;
  }
  return $canonical_url;
}

条件分岐でそのページのURLを設定してあげるだけです。必要なものを増やしたり減らしたり簡単にカスタマイズ可能です。必要のないページにはnullを返すようにしておきます。

htmlのheadタグにcanonical出力関数を追記

header.phpなどに書いている<head>タグ内に以下の記述を追記します。

<head>
<?php
$canonical = get_canonical();
if(!empty($canonical)):
  ?>
  <link rel="canonical" href="<?php echo esc_url($canonical)?>">
  <?php
endif;
?>
</head>

これで条件分岐が設定されているページにcanonicalタグが表示されるようになります。各ページを確認してみてください。

実装は以上です!簡単ですねー!

おわりに

SEO対策として重要な役割のcanonicalタグ。
検索するといくらでも出てくるかなり認知度の高い知識ではありますが、自分でサクッと見直すにはこのくらいの内容がちょうどいいかなと思ってメモしておきました。
canonicalよりもリダイレクトをしっかりとしておく方が大事なので、またそれは別の機会に!

記事一覧

RELATED

テキストの無限ループアニメーション【CSS + JS】
inoue
inoueのサムネイル
TIPS

【CSS + JS】テキストの無限ループアニメーション

shopify
inoue
inoueのサムネイル
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

PhotoSwipe v5
inoue
inoueのサムネイル
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

AVIF [ gulpでjpg・pngからAVIF画像を生成 ]
inoue
inoueのサムネイル
TIPS

gulpでjpg・pngからAVIF画像を生成する

MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]
inoue
inoueのサムネイル
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]

Google Sheets API スプレッドシートのデータをJSONで取得する
inoue
inoueのサムネイル
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

NEW POSTS

GA4連携人気記事ランキング機能を自作プラグイン化してみ【WordPress】
inoue
inoueのサムネイル
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

netlify UPDATE BUILD IMAGE [ビルドイメージの更新]
inoue
inoueのサムネイル
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

Google Business Profile API [ PHPでクチコミ一覧取得 ]
inoue
inoueのサムネイル
TIPS

【PHP】Google Business Profile APIを使ってクチコミを取得する

screendot screenshot API
inoue
inoueのサムネイル
TRY

スクリーンショットのAPI「screendot」を使ってみた

window.matchMedia hoverを判定
inoue
inoueのサムネイル
TIPS

【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定

lax.js
inoue
inoueのサムネイル
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

ブログ記事一覧
  • HOME
  • TIPS
  • 【WordPress】canonicalタグを出力する関数を作る