<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SEO &#8211; OptiCode.Lab</title>
	<atom:link href="https://opticode-lab.com/tag/seo/feed/" rel="self" type="application/rss+xml" />
	<link>https://opticode-lab.com</link>
	<description>だれもが使える、最適化されたサイトを構築するための技術研究所</description>
	<lastBuildDate>Thu, 12 Mar 2026 07:38:35 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Pagespeed Insightsのスコア低下の原因がGoogleタグが原因だった話と気にしすぎない話</title>
		<link>https://opticode-lab.com/technology/1525/</link>
					<comments>https://opticode-lab.com/technology/1525/#respond</comments>
		
		<dc:creator><![CDATA[るた]]></dc:creator>
		<pubDate>Thu, 12 Mar 2026 06:56:05 +0000</pubDate>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[SEO]]></category>
		<guid isPermaLink="false">https://opticode-lab.com/?p=1525</guid>

					<description><![CDATA[当サイトで速度改善のためPagespeed Insightsを使用し表示速度を計測しておりました。 そこで少しだけハマった点があったので備忘録も兼ねて書き起こしておきます。 実施した速度改善 速度改善のために以下のような [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>当サイトで速度改善のため<a href="https://pagespeed.web.dev/" target="_blank" rel="noreferrer noopener nofollow">Pagespeed Insights</a>を使用し表示速度を計測しておりました。</p>



<p>そこで少しだけハマった点があったので備忘録も兼ねて書き起こしておきます。</p>



<h2 class="wp-block-heading">実施した速度改善</h2>



<p>速度改善のために以下のような施策を実施しました。</p>



<ol class="wp-block-list">
<li><strong>画像のWebP化：</strong><br>ツールを使用して画像を手元でWebPに変換したうえでWordPressにアップ</li>



<li><strong>キャッシュプラグインの導入：</strong><br>WP Fastest Cache を導入</li>



<li><strong>CSS統合：</strong><br>サイト内外の複数読み込んでいたCSSを1つのファイルに統合</li>



<li><strong>Googleフォントをサーバーで配信</strong>：<br>フォントをダウンロードして /assets 配下に格納</li>
</ol>



<p><strong>画像のWebP化</strong>は以下のツールを使用してjpgやpngをWebPに変換しています。<br>複数の画像を圧縮したzipファイルをそのまま放り込んでも大丈夫なツールです。</p>


<a href="https://opticode-lab.com/technology/1500/" class="opti-link-card">  <img decoding="async" src="https://opticode-lab.com/wp-content/uploads/2026/03/20260308_004856_01-600x385.webp" alt="" class="opti-link-card__thumb">  <div class="opti-link-card__body">    <div class="opti-link-card__title">ブログの画像処理を劇的に時短！ドラッグ＆ドロップで一括WebP変換＆リサイズを自動化する方法（Windows向け）</div>    <div class="opti-link-card__meta">opticode.lab.com</div>  </div></a>



<h2 class="wp-block-heading">速度改善の成果</h2>



<p>なんとここまでやって<strong>58点</strong>。</p>



<p>サイト側で重い処理を実行しているならともかく、WordPress投稿ページ + キャッシュ でこのスコアはどういうことなのか。<br>1時間ほどコードとにらめっこしてました。</p>


<div class="wp-block-image">
<figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="970" height="764" src="https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-02.webp" alt="PageSpeed Insightsでスマートフォンのパフォーマンスが58点のキャプチャ" class="wp-image-1526" srcset="https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-02.webp 970w, https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-02-600x473.webp 600w, https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-02-768x605.webp 768w" sizes="(max-width: 970px) 100vw, 970px" /><figcaption class="wp-element-caption">PageSpeed Insights：スマートフォンのパフォーマンス</figcaption></figure>
</div>


<h2 class="wp-block-heading">高速化一番のネックはGoogleのタグだった</h2>



<p>いろいろ試した後にGoogleTagManagerのみ触れていなかったので、これを一時的に削除して速度を計測してみました。</p>



<p>ビンゴでした。GTMタグを削除するだけで<strong>96点</strong>まで跳ね上がりました。</p>



<p>GoogleTagManagerにはGoogleAnalyticsとGoogleAdSenceの2タグのみ登録していました。<br>まさかGoogle提供のPageSpeed Insightsで最も評価を下げていたのはGoogleのタグであり壮大なマッチポンプでした。<br>特にAdSenceくん、重すぎ。</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" width="1024" height="755" src="https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-01-1024x755.webp" alt="Googleタグマネージャーを削除したあとのPageSpeed Insightsスコアが96点" class="wp-image-1527" srcset="https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-01-1024x755.webp 1024w, https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-01-600x443.webp 600w, https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-01-768x567.webp 768w, https://opticode-lab.com/wp-content/uploads/2026/03/pagespeed-article-01.webp 1083w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">PageSpeed Insights：GTMタグを削除したスコア</figcaption></figure>
</div>


<h2 class="wp-block-heading">Pagespeed Insightsに縛られすぎるべきではない</h2>



<p>特にPagespeed Insights のスマートフォン パフォーマンスは<strong>非常に低いスコアが出る傾向</strong>にあります。<br>これは 低スペックスマホ + 弱回線 という日本では一般的ではない環境を想定した計測であるためです。</p>



<p>以下のGoogle公式ドキュメントにあるように、検索結果に与える影響はPagespeed Insightsよりも<strong>実際に優れたページエクスペリエンスを提供できているか</strong>。というのがカギのようです。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Google のコア ランキング システムは、優れたページ エクスペリエンスを提供するコンテンツを高く評価するように設計されています。サイト所有者が Google のシステムで高い評価を得るには、ページ エクスペリエンスの限られた要素のみにとらわれないようにすることが必要です。多くの要素について検討し、全般的に優れたページ エクスペリエンスを提供できているかどうかを確認してください。</p>
<cite><a href="https://developers.google.com/search/docs/appearance/page-experience?hl=ja" target="_blank" rel="noreferrer noopener nofollow">引用：ページ エクスペリエンスが Google 検索の検索結果に与える影響について</a></cite></blockquote>



<p>具体的には<strong>Pagespeed Insights上部の「実際のユーザーの環境で評価する」</strong>や<strong>Google Search Consoleの「ウェブに関する主な指標」</strong>を重視するのがよさそうです。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p>Pagespeed Insightsのスコアが低くなる要素が見当たらない場合は<strong>Googleタグを一時的に削除して計測</strong>しなおしてみてください。</p>



<p>また、Pagespeed Insightsのスコアが低いこと自体はそこまで神経質になる必要はなく、あくまでもGoogle Search Consoleの「ウェブに関する主な指標」などで評価が低かった場合の<strong>改善ポイントを見つけるために使用</strong>するものと考えたほうがよさそうです。</p>



<p>Googleのタグを使用してGoogleに指摘されるという手の上で踊らされている状態ですが、僕たちがウェブで生きていくには頭を垂れるしかないという虚しさがありました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://opticode-lab.com/technology/1525/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>プラグインを使用せずWordPressで構造化データを実装する方法</title>
		<link>https://opticode-lab.com/technology/1476/</link>
					<comments>https://opticode-lab.com/technology/1476/#respond</comments>
		
		<dc:creator><![CDATA[るた]]></dc:creator>
		<pubDate>Thu, 05 Mar 2026 09:21:59 +0000</pubDate>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[WordPress]]></category>
		<guid isPermaLink="false">https://opticode-lab.com/?p=1476</guid>

					<description><![CDATA[この記事では、WordPress環境でレビューブログに設定すべき構造化データとプラグインを使用せずに実装する方法について解説します。実際に当サイトを開発・運営した経験をもとに書いています。 この記事を読むと： リッチリザ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>この記事では、WordPress環境でレビューブログに設定すべき構造化データとプラグインを使用せずに実装する方法について解説します。<br>実際に当サイトを開発・運営した経験をもとに書いています。</p>



<p>この記事を読むと：</p>



<ul class="wp-block-list">
<li>Googleの検索結果で投稿が<strong>リッチリザルトで表示</strong>できる</li>



<li><strong>クリック率が上がる</strong></li>



<li>Googleに正確な情報が伝えられ<strong>SEO評価向上</strong>につながる</li>
</ul>



<h2 class="wp-block-heading">リッチリザルトとは？</h2>



<p>リッチリザルトとは、検索結果において、通常の「青いリンクと少しの説明文」だけでなく、<strong>画像、星の評価、よくある質問などが視覚的にリッチ（豪華）に表示される仕組み</strong>のことです。</p>



<p>百聞は一見に如かずということで、リッチリザルトのサンプル画像をご覧ください。<br>ニュース がカルーセルで表示されているかと思います。</p>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" width="615" height="1024" src="https://opticode-lab.com/wp-content/uploads/2026/03/220759-1-615x1024.webp" alt="「アメリカ」と検索した場合に表示されたリッチリザルト" class="wp-image-1478" srcset="https://opticode-lab.com/wp-content/uploads/2026/03/220759-1-615x1024.webp 615w, https://opticode-lab.com/wp-content/uploads/2026/03/220759-1-361x600.webp 361w, https://opticode-lab.com/wp-content/uploads/2026/03/220759-1.webp 721w" sizes="(max-width: 615px) 100vw, 615px" /><figcaption class="wp-element-caption">Google検索：リッチリザルト</figcaption></figure>
</div>


<p>このように、検索結果の画面で他よりも明らかに目立って表示されるのが最大の特徴です。<br>代表的なリッチリザルトの種類は以下のようなものがあります。（実際はもっとたくさんの種類があります。）</p>



<ul class="wp-block-list">
<li>レシピ（Recipe）</li>



<li>レビュー（Review）</li>



<li>よくある質問（FAQ）</li>



<li>記事（Article,BlogPosting）</li>



<li>カルーセル（ItemList）</li>
</ul>



<p>通常より目立つ表示なので、できるだけこのリッチリザルトで表示されるようサイト側で設定を行いたいです。<br>そのために必要なのが<strong>構造化データ</strong>です。</p>



<h2 class="wp-block-heading">構造化データとは？一言でいうと「Google専用の自己紹介カード」</h2>



<p>私たちのサイトを巡回するGoogleのクローラーは、単なるテキストの羅列としてしか認識していません。<br>たとえばページに著者名を入れていた場合に、それが投稿の著者（ライター）なのか記事の中身の登場人物か、Googleのクローラーには完全には判別できないのです。</p>



<p>そこで役立つのが<strong>構造化データ</strong>です。</p>



<p>構造化データがあればGoogleのクローラーに対して<br>「このテキストは記事のタイトル（Headline）ですよ」<br>「この画像はアイキャッチ画像（Image）ですよ」 <br>「この記事を書いたのは山田太郎（Author）ですよ」<br> と、意味を明確にタグ付けして伝えるための「自己紹介カード」のような役割を果たします。</p>



<p>これによって、Googleクローラーがサイトの情報を正確に取得しリッチリザルトとして表示してくれるようになります。</p>



<h3 class="wp-block-heading">構造化データはどのように設定する？</h3>



<p>現在、Googleが最も推奨している構造化データの書き方が<strong>「JSON-LD（ジェイソン・エルディー）」</strong>という形式です。これは、HTMLのタグを直接いじるのではなく、headタグの中にスクリプトとして記述するため、サイトの見た目に影響を与えずに安全に実装できるというメリットがあります。</p>



<p>サポートしている構造化データの種類や形式が詳しく知りたい場合は公式ドキュメント：<a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja" target="_blank" rel="noreferrer noopener nofollow">Google 検索がサポートする構造化データ マークアップ </a>をご覧ください。</p>



<h2 class="wp-block-heading">WordPressで構造化データを設定する方法</h2>



<p>WordPressを使用する場合、<strong>SEOプラグイン</strong>に出力させる方法と、head タグ内に JSON-LD を出力するコードを <strong>functions.php に追記</strong>する方法があります。<br>今回は後者の方法で解説します。</p>



<p>functions.php に以下を追記すれば投稿に<strong>記事（Article）</strong>の構造化データが追加されます。<br>Articleはニュースやブログ記事などに使える汎用的な指定です。</p>



<pre class="wp-block-code"><code>function insert_custom_json_ld() {
    // 記事ページ（is_single）のみ出力
    if ( is_single() ) {
        global $post;
        
        // 公開日時と更新日時の取得
        $pub_time_c  = get_the_time( 'c' ); // 出力用（ISO 8601形式）
        $mod_time_c  = get_the_modified_time( 'c' );
        
        // 比較用にUnixタイムスタンプも取得
        $pub_time_ts = get_the_time( 'U' );
        $mod_time_ts = get_the_modified_time( 'U' );

        // アイキャッチ画像（ない場合のデフォルト画像）
        $image_url = get_the_post_thumbnail_url( $post-&gt;ID, 'full' ) ?: home_url( '/wp-content/uploads/default-image.jpg' );

        $schema = array(
            '@context'         =&gt; 'https://schema.org',
            '@type'            =&gt; 'Article',
            'mainEntityOfPage' =&gt; array(
                '@type' =&gt; 'WebPage',
                '@id'   =&gt; get_permalink()
            ),
            // 投稿タイトル
            'headline'         =&gt; get_the_title(),
            // アイキャッチ画像
            'image'            =&gt; array( $image_url ),
            'datePublished'    =&gt; $pub_time_c,
            // 'dateModified' は下の条件分岐で追加します
            'author'           =&gt; array(
                '@type' =&gt; 'Person',
                // WPプロフィール設定の「ニックネーム」を明示的に指定
                'name'  =&gt; get_the_author_meta( 'nickname', $post-&gt;post_author ),
                // WPプロフィール設定の「サイト」を明示的に指定
                'url'   =&gt; get_the_author_meta( 'user_url', $post-&gt;post_author )
            ),
            'publisher'        =&gt; array(
                '@type' =&gt; 'Organization',
                // WP一般設定の「サイトのタイトル」を明示的に指定
                'name'  =&gt; get_bloginfo( 'name' ),
                'logo'  =&gt; array(
                    '@type' =&gt; 'ImageObject',
                    // サイトのロゴ画像を指定
                    'url'   =&gt; home_url( '/wp-content/uploads/logo.png' )
                )
            )
        );

        // 更新日時が公開日時以上のときのみ dateModified を配列に追加
        if ( $mod_time_ts &gt;= $pub_time_ts ) {
            $schema&#91;'dateModified'] = $mod_time_c;
        }

        // JSON-LDの出力
        echo '&lt;script type="application/ld+json"&gt;' . "\n";
        echo wp_json_encode( $schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT );
        echo "\n" . '&lt;/script&gt;' . "\n";
    }
}
// head内で出力
add_action( 'wp_head', 'insert_custom_json_ld' );</code></pre>



<p>各項目の指定内容はコメントの通りですので、変更したい場所は該当項目を修正してください。<br>注意点のみ以下に記載します。</p>



<h3 class="wp-block-heading">注意① 著者 author をユーザー名にしない</h3>



<p>author（著者）の情報は名前とURLを設定します。</p>



<p>上記コードでは名前をWordPressのプロフィール画面「ニックネーム」の内容を取得するようにしています。ここは<strong>必ずユーザー名以外を表示するようにしてください。</strong><br>ユーザー名はWordPressのログインに使用するため、公開すると不正アクセスの危険があります。</p>



<p>また、<strong>URLは必須ではないものの強く推奨される項目</strong>です。<br>現在のGoogleは、記事の評価において<strong>「E-E-A-T（経験、専門性、権威性、信頼性）」</strong>を非常に重視しています。<br>url を指定して著者プロフィールと紐づけることは、Googleに対して次のようなアピールになります。</p>



<ul class="wp-block-list">
<li><strong>このURLの先には、著者のこれまでの執筆実績や、SNSへのリンク、専門的な経歴が載っています</strong><br>個人ブログであれば aboutページなどを指定すればよいです。</li>



<li><strong>この記事は、どこの誰とも分からない匿名の人ではなく、身元がはっきりしたこのURLの人物が責任を持って書いています</strong></li>
</ul>



<p>結果として、記事単体だけでなく「サイト全体の信頼性」を底上げすることに繋がります。<br>個人ブログであれば about ページでもよいので、必ずサイトを指定しましょう。</p>



<h3 class="wp-block-heading">注意② 更新日時 dateModified は公開日時 datePublished より新しい日時にする</h3>



<p>WordPressの更新日時は、投稿画面を保存した時間となる仕様です。<br>そのため、予約投稿を行った際は 公開日時 &gt; 更新日時 となってしまい、これをそのまま使用すると公開日時より前に更新日時がある というチグハグな状態となっています。</p>



<p>これを防ぐために以下のように<strong>公開日時と更新日時を比較し、更新日時の方が新しい場合のみ dateModified を指定</strong>するようにしています。</p>



<pre class="wp-block-code"><code>        // 更新日時が公開日時以上のときのみ dateModified を配列に追加
        if ( $mod_time_ts &gt;= $pub_time_ts ) {
            $schema&#91;'dateModified'] = $mod_time_c;
        }</code></pre>



<p>ポイントとしては、Unixタイムスタンプで比較することです。<br><strong>ISO 8601形式の比較は文字列同士の比較</strong>となってしまうため、<strong>予期せぬバグ</strong>が発生することがあります。<br>そのため<strong>Unixタイムスタンプ（整数）同士の比較</strong>をするほうがプログラム的には安全で確実です。</p>



<h2 class="wp-block-heading">記事以外に構造化データを追加する方法</h2>



<p>追記したfunctionの頭にある<code>if ( is_single() )</code>を分岐させてテンプレートごとに適した構造化データを指定しましょう。<br>また、投稿の内容によって、レシピ・レビュー・FAQ など、別の構造化データを指定したい場合は、<strong>投稿のカテゴリやタグを利用して分岐</strong>させるのがおすすめです。</p>



<p><a href="https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja" target="_blank" rel="noreferrer noopener nofollow">Google 検索がサポートする構造化データ マークアップ</a> の中から選びましょう。</p>



<p>ただし、構造化データのタイプによって必須な項目も異なるため、継続的に運用できるかを考慮して判断しましょう。<br>（たとえば、商品 Product の価格 offers は常に変動するものなので指定が難しい など）</p>



<h2 class="wp-block-heading">構造化データの検証方法</h2>



<p>構造化データが適切に設定されているかは以下のツールで検証が可能ですが、スキーマ マークアップ検証ツールは<strong>Google固有の警告は表示してくれない</strong>ようです。<br>Google公式が提供しているのが<strong>リッチリザルト テスト</strong>なので、こちらのほうがおすすめです。</p>



<ul class="wp-block-list">
<li><a href="https://search.google.com/test/rich-results" target="_blank" rel="noreferrer noopener nofollow">リッチリザルト テスト</a></li>



<li><a href="https://validator.schema.org/" target="_blank" rel="noreferrer noopener nofollow">スキーマ マークアップ検証ツール</a></li>
</ul>



<p>ただし、<strong>構造化データが正しい形式で指定されていたとしても、リッチリザルトで表示されるとは限りません</strong>。<br>とは言えGoogleには正しく伝わっているはずなので、<strong>気長に待ちましょう</strong>。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p>今回はプラグインを使用しないWordPressでの構造化データの指定方法を解説しました。</p>



<p>設定してもGoogleは中々リッチリザルトで表示してくれませんが、表示されたときは「やってよかったな」という満足感があります。</p>



<p>デメリットも無いので、とりあえずで設定しておくべきの必須級の機能ですね。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://opticode-lab.com/technology/1476/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
