ペンギンスタート

【WordPress】headタグ内の不要なメタタグの削除

HOME > アーカイブ > WordPress > テーマ開発 > 【WordPress】headタグ内の不要なメタタグの削除

WordPressがheadタグに吐き出すタグは不要なものも多いので、不要なタグは削除してソースコードをきれいにする。

ソースコード全体

/* フィードの配信を止める ----------------------------------------------- */
// remove_action('do_feed_rdf', 'do_feed_rdf', 10);
// remove_action('do_feed_rss', 'do_feed_rss', 10);
// remove_action('do_feed_rss2', 'do_feed_rss2', 10);
// remove_action('do_feed_atom', 'do_feed_atom', 10);

/* head内フィードリンクを消す ------------------------------------------ */
// サイト全体
// remove_action('wp_head', 'feed_links', 2);
// remove_action('wp_head', 'feed_links_extra', 3);
// 投稿用
add_filter( 'feed_links_show_posts_feed', '__return_false' );
// コメント
add_filter('feed_links_show_comments_feed', '__return_false');

/* EditURIを非表示にする ----------------------------------------------- */
remove_action('wp_head', 'rsd_link');
// XML-RPCを無効化
add_filter('xmlrpc_enabled', '__return_false');

/* <head>からgenerator（バージョン情報を含む）を非表示にする ------------*/
remove_action('wp_head', 'wp_generator');
/* feedも含めgenerator 情報を全て無効にする ---------------------------- */
add_filter('the_generator', '__return_empty_string');

/* 短縮URLを非表示にする ----------------------------------------------- */
remove_action('wp_head', 'wp_shortlink_wp_head', 10);

/* 絵文字用JS・CSSを非表示にする --------------------------------------- */
//  1. 絵文字スクリプト無効化
//  2. 旧スタイル無効化
//  3. 新しい絵文字スタイル（インラインCSS）無効化
// to front
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('wp_enqueue_scripts', 'wp_enqueue_emoji_styles');
// to dashboard
add_action('admin_init', function () {
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('admin_print_styles', 'print_emoji_styles');
    // remove_action('admin_print_styles', 'wp_enqueue_emoji_styles');
});

/* WordPressのバージョン情報を削除する -------------------------------- */
function remove_wp_version_from_src($src) {
    if (strpos($src, 'ver=' . get_bloginfo('version')) !== false) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'remove_wp_version_from_src', 99);
add_filter('script_loader_src', 'remove_wp_version_from_src', 99);

/* oEmbedを非表示にする ----------------------------------------------- */
// 外部サイトによるoEmbedの自動検出を無効化
add_filter('embed_oembed_discover', '__return_false');
// REST APIのリンクを<head>から削除
remove_action('wp_head', 'rest_output_link_wp_head');
// oEmbed用の<link rel="alternate>を<head>から削除
remove_action('wp_head', 'wp_oembed_add_discovery_links');
// oEmbedのレスポンス内容を変更
function mytheme_oembed_response_data( $data, $post, $width, $height ) {
    if ( isset( $data['author_name'] ) ) {
        $data['author_name'] = get_bloginfo( 'name' );
        $data['author_url']  = get_home_url();
    }
    return $data;
}
add_filter( 'oembed_response_data', 'mytheme_oembed_response_data', 10, 4 );
// remove_action('wp_head', 'wp_oembed_add_host_js'); 不要

ソースコードから削除できるhtmlタグの解説

上記ソースコードをfunctions.phpに記述すると、以下のhtmlタグを除去することができる。

フィード制御

フィードは配信リンクの無効化とソースコードからリンクURLの削除の2点を行うことで完全な無効化ができる。

/* フィード制御 ----------------*/
// フィードの配信を止める
remove_action('do_feed_rdf', 'do_feed_rdf', 10);
remove_action('do_feed_rss', 'do_feed_rss', 10);
remove_action('do_feed_rss2', 'do_feed_rss2', 10);
remove_action('do_feed_atom', 'do_feed_atom', 10);
// head内フィードリンクを消す
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);
// サイト全体のコメントフィードリンクを消す
add_filter('feed_links_show_comments_feed', '__return_false');
// 各投稿のコメント用RSSフィードの配信を止める
add_filter('post_comments_feed_link', '__return_false');

<head>から削除されるリンクURLの対応は次のとおり。

remove_action('wp_head', 'feed_links', 2);
// ▼ 削除されるリンク
<link rel="alternate" type="application/rss+xml" title="サイト名 &raquo; フィード" href="https://example.com/feed/" />

remove_action('wp_head', 'feed_links_extra', 3);
// ▼ 削除されるリンク
<link rel="alternate" type="application/rss+xml" title="サイト名 &raquo; コメントのフィード" href="https://example.com/comments/feed/" />

add_filter('feed_links_show_comments_feed', '__return_false');
// ▼ 削除されるリンク
<link rel="alternate" type="application/rss+xml" title="サイト名 » コメントのフィード" href="https://example.com/comments/feed/" />

EditURIを非表示にする

外部の投稿ツール（XML-RPCでの投稿）からWordPressに記事を投稿する際に必要なタグの表示を止める。なお、XML-RPCを使用していない場合、それ自体も無効化してセキュリティを向上する。

/* EditURIを非表示にする ----------------*/
remove_action('wp_head', 'rsd_link');
// XML-RPCを無効化
add_filter('xmlrpc_enabled', '__return_false');）

<head>から削除されるリンクURLの対応は次のとおり。

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://example.com/xmlrpc.php?rsd" />

generatorからWPverを非表示にする

WordPressのバージョン情報タグを削除する。

/* generatorからWPverを非表示にする ----------------*/
remove_action('wp_head', 'wp_generator');
/* generator 情報を全て無効にする ------------------*/
add_filter('the_generator', '__return_empty_string');

<head>から削除されるリンクURLの対応は次のとおり。

<meta name="generator" content="WordPress 6.8.3" />

短縮URLを非表示にする

ページ毎に出力される短縮URLを削除する

/* 短縮URLを非表示にする ----------------*/
remove_action('wp_head', 'wp_shortlink_wp_head', 10);

<head>から削除されるリンクURLの対応は次のとおり。

<link rel="shortlink" href="https://example.com/?p=123" />

絵文字用JS・CSSを非表示にする

絵文字を使用しなければスタイルやスクリプトは不要のため、出力を停止する。WordPress6.4前後でコアのプログラムに変更があり、print_emoji_styles()は非推奨になったが、記述しないと意図通り削除できないため、新しいwp_enqueue_emoji_styles()と併記する。

  • WordPress6.3以前：print_emoji_styles()
  • WordPress6.4以降：wp_enqueue_emoji_styles()
/* 絵文字用JS・CSSを非表示にする ----------------*/
//  1. 絵文字スクリプト無効化
//  2. 旧スタイル無効化
//  3. 新しい絵文字スタイル（インラインCSS）無効化
// to front
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('wp_enqueue_scripts', 'wp_enqueue_emoji_styles');
// to dashboard
add_action('admin_init', function () {
    remove_action('admin_print_scripts', 'print_emoji_detection_script');
    remove_action('admin_print_styles', 'print_emoji_styles');
    remove_action('admin_print_styles', 'wp_enqueue_emoji_styles');
});

<head>から削除されるリンクURLの対応は次のとおり。

remove_action('wp_head', 'print_emoji_detection_script', 7);
// ▼ 削除されるリンク
<script type="text/javascript">
/* 絵文字対応のためのJS（ユーザーのブラウザがサポートしているか確認） */
window._wpemojiSettings = {...};
(function(window, document, settings){ ... })(window, document, window._wpemojiSettings);
</script>
<script src="https://s.w.org/images/core/emoji/16.0.1/js/wp-emoji-release.min.js?ver=6.8.3" defer></script>

remove_action('wp_print_styles', 'print_emoji_styles');
// ▼ 削除されるリンク
<style type="text/css" id="wp-emoji-styles-inline-css">
img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>

remove_action('wp_enqueue_scripts', 'wp_enqueue_emoji_styles');
// ▼ 削除されるリンク
<style id="wp-emoji-styles-inline-css">
img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>

なお、上記設定を加えることで、絵文字用のdns-prefetchも表示されなくなる。

// 表示タグ
<link rel="dns-prefetch" href="//s.w.org" />
// dns-prefetchの削除用フィルター
add_filter( 'emoji_svg_url', '__return_false' );

WordPressのバージョン情報を削除する

WordPressがCSSやスクリプトに付与する現在のバージョン番号を削除する。

function remove_wp_version_from_src($src) {
    if (strpos($src, 'ver=' . get_bloginfo('version')) !== false) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}
add_filter('style_loader_src', 'remove_wp_version_from_src', 99);
add_filter('script_loader_src', 'remove_wp_version_from_src', 99);

<head>に与える影響は次のとおり。

<!-- 変更前：バージョン番号あり -->
<link rel="stylesheet" href="http://example.com/wp-content/themes/mytheme/style.css?ver=6.8.3" />
<!-- 変更後：バージョン番号なし -->
<link rel="stylesheet" href="http://example.com/wp-content/themes/mytheme/style.css" />

無効化しないほうがいいタグ

oEmbedは表示しておく

oEmbedはYouTubeやTwitterなどの外部コンテンツの埋め込みにおいてうまく表示されなくなるため残しておく。

oEmbed用の表示タグは次のとおり。

<link rel="alternate" type="application/json+oembed" href="https://site-domain.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.poroanet.com%2Fblog%2Fwordpress%2F58.html" />
<link rel="alternate" type="text/xml+oembed" href="https://site-domain.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.poroanet.com%2Fblog%2Fwordpress%2F58.html&format=xml" />

無効化する場合

add_filter('embed_oembed_discover', '__return_false');
remove_action('wp_head', 'rest_output_link_wp_head');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
remove_action('wp_head', 'wp_oembed_add_host_js');
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10 );

出力されなくなったタグ

wlwmanifest

マイクロソフト製のブログ更新アプリ「Windows Live Writer」とWordPressを連携するための設定ファイルへのリンクが出力されていた。

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://vccw.dev/wp-includes/wlwmanifest.xml" />

WordPress6.3で「wlwmanifest_link()」が非推奨となり、リンクも出力しなくなったため下記の記述は不要になった。

remove_action('wp_head', 'wlwmanifest_link');

rel=”next” rel=”prev”

前後ページの関係性を検索エンジンに伝えるrel=”next” rel=”prev” はWordPress5.6で廃止となり、コアでは使用されなくなった。プラグインが使用していない限りrel=”next” rel=”prev”は表示されない。

<link rel="next" href="https://example.com/page/2/" />
<link rel="prev" href="https://example.com/" />

下記で有効になりそうだが、うまくいかない。

add_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

dns-prefetch

add_filter('wp_resource_hints', 'remove_dns_prefetch', 10, 2);
function remove_dns_prefetch($hints, $relation_type) {
	if ('dns-prefetch' === $relation_type) {
		return array_diff(wp_dependencies_unique_hosts(), $hints);
	}
	return $hints;
}

WordPressのメタタグ表示は変化している

非推奨となったり、現在は使用されていないメタタグがあるため、開発者向けブログなどをチェックして最新情報へアップデートしていく必要があるようだ。不要なプログラムの削除を目的に書いたコードこそが不要になりかねない。

とくに、絵文字、wlwmanifest、rel=”next” rel=”prev”についてはネット上に誤った情報も見られるためコアのコードを読む重要性を再認識した。

リファレンス

WordPress

ブロック開発
テーマ開発
管理画面
エディタ
サイト構成
マルチサイト
セキュリティ

Web開発

htmlcss
サーバー
ツール