<?php

if (!defined('ABSPATH')) exit;

if (!function_exists('amJL_plugin_detail_page')){
    function amJL_plugin_detail_page(){
        $path = amJL_define_path();
        ?>
        <h1>プラグインについて</h1>
        <p><b>プラグインの認証が完了しました。プラグインのすべての機能をお使いいただけます。</b></p>
        <p>当プラグインは、構造化データを自動で設定するプログラムです。<br>
        当プラグインで設定可能な構造化データは下記の通りです。</p>

        <ul class="amJL_list">
            <li>パンくずリスト</li>
            <li>Article（記事）</li>
            <li>画像メタデータ</li>
            <li>ロゴ</li>
            <li>サイトリンク検索ボックス</li>
            <li>Recipe（レシピ）</li>
            <li>動画（Video）</li>
            <li>よくある質問</li>
            <li>ハウツー（HowTo）</li>
            <li>商品レビュー</li>
        </ul>
        <br>

        <h2>パンくずリスト</h2>
        <p>構造化データ「パンくずリスト」は、そのページがどの階層にあるかを示します。<br>
        当プラグインでは、各記事は「トップページ→カテゴリー→各記事」という構造を想定しています。</p>
        <p>例：プラグイン（スラッグがplugin）というカテゴリーのテスト（スラッグがtest）という記事の場合<br>
        http://example.com/plugin/test/<br>
        というURLを想定しています。</p>

        <h3>Google検索での表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."breadcrumb_from_google.png" ?>" alt="Google検索でのパンくずリストの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja">パンくずリスト（BreadcrumbList）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>Article</h2>
        <p>構造化データ「Article」を追加することで、GoogleはWebページの詳細を理解することができます。<br>
        その結果、Google検索やその他のサービス（GoogleニュースやGoogleアシスタントなど）の検索結果で、その記事のタイトルテキスト、画像、日付情報を適切に表示することができるようになります。
        </p>

        <h3>Google検索での表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."article-rich-result.png" ?>" alt="Google検索でのArticleの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/article?hl=ja">記事（Article、NewsArticle、BlogPosting）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>画像メタデータ</h2>
        <p>構造化データ「画像メタデータ」は、Google画像検索で画像の詳細情報（作成者、画像の使用方法、クレジット情報など）を表示できます。<br>
        画像メタデータの追加により、アイキャッチ画像のインデックス登録が促進され、Google画像検索からの流入が見込めます。</p>

        <h3>Google画像検索での表示例</h3>

        <h2>ロゴ</h2>
        <p>Google検索の検索結果やGoogleナレッジパネルで組織のロゴとして使用する画像を指定します。<br>
        この結果、企業やサイト運営者の画像として認識され、Google検索時に表示されるようになります。</p>

        <h3>Google検索での表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."logo01.png" ?>" alt="Google検索でのロゴの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/logo?hl=ja">ロゴ（Organization）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>サイトリンク検索ボックス</h2>
        <p>構造化データ「サイトリンク検索ボックス」を利用すると、Google検索画面から直接サイト内検索を行うことができ、ユーザーは時間を節約することができます。</p>
        <p>なお、当プラグインでは自動的に構造化データが追加されるため、設定は必要ありません。</p>

        <h3>Google検索での表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."sitelinks01.png" ?>" alt="Google検索でのサイトリンク検索ボックスの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/sitelinks-searchbox?hl=ja">サイトリンク検索ボックス（WebSite）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>Recipe（レシピ）</h2>
        <p>構造化データ「Recipe」を使用することで、レシピのコンテンツをGoogleに伝え、レシピをユーザーに見つけられるようにします。<br>
        調理時間、準備時間、栄養成分などの情報を提供すると、Googleがレシピを理解しやすくなり、ユーザーの興味を引く方法で表示できます。<br>
        レシピは Google検索の検索結果とGoogle画像検索に表示されます。</p>

        <h3>Google検索・画像検索の表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."recipes-on-google.png" ?>" alt="Google検索・画像検索でのRecipeの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/recipe?hl=ja">レシピ（Recipe、HowTo、ItemList）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>動画（Video）</h2>
        <p>構造化データ「動画」は、ユーザーが動画を見つけて視聴するための入り口です。<br>
        構造化データでは、説明、サムネイル、URL、アップロード日、再生時間などさまざまな情報を明示的に記述するため、Googleが動画の情報をより正確に把握できるようになります。<br>
        その結果、Google検索結果、Google画像検索結果などに表示されるようになります。</p>

        <h3>Google検索などでの表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."video-on-google.png" ?>" alt="Google検索などでの動画の表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/video?hl=ja">動画（VideoObject、Clip、BroadcastEvent）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>よくある質問</h2>
        <p>構造化データ「よくある質問」は、特定のトピックに関する質問とその回答をGoogleに伝え、リッチリザルトに表示しやすくなります。<br>
        正しくマークアップすることで、想定するユーザーにリーチしやすくなります。</p>

        <h3>Google検索でのリッチリザルトの表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."faqpage-searchresult.png" ?>" alt="Google検索でのよくある質問の立地リザルトの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/faqpage?hl=ja">よくある質問（FAQPage、Question、Answer）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>ハウツー（HowTo）</h2>
        <p>構造化データ「HowTo」は、コンテンツがハウツーであることをGoogleに明示するために使用します。<br>
        ハウツーは、あるタスクを完了するための一連の流れ、順を追ってユーザーに説明するためのものです。<br>
        手順の説明では、「画像」、「動画」、「テキスト」を利用することができます。</p>

        <h3>Google検索でのリッチリザルトの表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."howto-example1.png" ?>" alt="Google検索でのハウツーのリッチリザルトの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/how-to?hl=ja">ハウツー（HowTo）の構造化データ</a></cite></figcaption>
        </figure>

        <h2>商品</h2>
        <p>構造化データ「商品（Product、Review、Offer）」は、Google検索の検索結果（Google画像検索や Googleレンズを含む）で表示される商品情報がより充実したものになります。<br>
        ユーザーは、価格、在庫状況、レビューの評価、配送情報などを検索結果で直接確認でき流ようになります。</p>

        <h3>Google検索でのリッチリザルトの表示例</h3>
        <figure>
            <img src="<?php echo esc_attr($path['img'])."product-snippet.png" ?>" alt="Google検索結果における商品スニペットの表示例" class="amJL_details_css">
            <figcaption>出典：<cite><a href="https://developers.google.com/search/docs/appearance/structured-data/product?hl=ja">商品（Product、Review、Offer）の構造化データ</a></cite></figcaption>
        </figure>
        <?php
        
    }
}