今回は実際に構造化データを作成していきます。
構造化データとは
okinawanpizza.hatenablog.com
schema.org
・構造化データにおいて使用されるボキャブラリーの一つ。
・グーグル、マイクロソフト、ヤフー、ヤンデックスが手を組んだ。
・既存の情報をより詳しく意味を持たせることができる。
例えば次の文章が
「今日、鎌倉で〇〇社主催の合コンに行く。」
下の文章のような情報を持たせることが可能となる。
「今日(日時)、鎌倉(場所)で行われる〇〇社(主催)の合コン(イベント)に行く。」
構造化データを追加する
記事によって変わる部分もあるので、
wordpressのテンプレートタグを利用しながら構造化データを追記していきます。
<?php // image(画像)の指定のためにアイキャッチ画像の情報を取得します $thumbnail_id = get_post_thumbnail_id($post->ID); // アタッチメントIDの取得 $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); // アイキャッチの情報を取得 $src = $image[0]; // URL $width = $image[1]; // 横幅 $height = $image[2]; // 高さ $description = get_post_meta($post->ID, _aioseop_description, true); ?> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage", "@id": "<?php echo esc_url(get_permalink()); ?>" }, "headline": "<?php echo get_the_title(); ?>", "image": { "@type": "ImageObject", "url": "https://example.com/article_thumbnail1.jpg", "height": <?php echo $height; ?>, "width": <?php echo $width; ?> }, "datePublished": "<?php echo get_the_date(DATE_ISO8601); ?>", "dateModified": "<?php if ( get_the_date() != get_the_modified_time() ){ the_modified_date(DATE_ISO8601); } else { echo get_the_date(DATE_ISO8601); } ?>", "author": { "@type": "Person", "name": "<?php the_author_meta('nickname'); ?>" }, "publisher": { "@type": "Organization", "name": "<?php bloginfo('name'); ?>", "logo": { "@type": "ImageObject", "url": "<?php echo get_stylesheet_directory_uri(); ?>/img/side/img_wemz03.png", "width": 100, "height": 100 } }, "description": "<?php echo $description; ?>" } </script>
テストツールで確認する
こちらのテストツールを使用します。
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja
僕らの場合はテスト環境がありますので、
テスト環境に表示されたソースを直接貼り付ける形で検証を行います。
エラーが出た箇所を随時直していけば完成となります。
おしまい。
明日
・preg_replaceタグを使ったHTMLタグの置換方法 ・広告の表示