メタタグとは? SEOにも重要なmetaタグの意味と書き方(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
同一ページの検索結果でも、PCでの表示(黄色矢印)とモバイルでの表示(緑色矢印)とでは、descriptionに指定された文章の表示文字数が異なる
同一ページの検索結果でも、PCでの表示(黄色矢印)とモバイルでの表示(緑色矢印)とでは、descriptionに指定された文章の表示文字数が異なる
Chrome用のアドオン「Alt & Meta viewer」を使えば、表示中のウェブページにあるmeta要素を確認できる
Chrome用のアドオン「Alt & Meta viewer」を使えば、表示中のウェブページにあるmeta要素を確認できる
Twitter上のツイートにURLが書かれた際に、ページの概要(黄色矢印の先)やサムネイル画像(紫色矢印の先)が表示された例
Twitter上のツイートにURLが書かれた際に、ページの概要(黄色矢印の先)やサムネイル画像(紫色矢印の先)が表示された例
Twitter Cards Validatorでメタタグの記述が正しいかどうかを確認できる
Twitter Cards Validatorでメタタグの記述が正しいかどうかを確認できる
ブラウザのFirefoxなら標準機能でmeta要素の確認ができる
ブラウザのFirefoxなら標準機能でmeta要素の確認ができる
OGPブックマークレットでメタタグの記述内容を確認表示したところ
OGPブックマークレットでメタタグの記述内容を確認表示したところ
Facebook上の投稿にURLが書かれた際に、ページの概要(緑色矢印の先)や紹介画像(橙色矢印の先)が表示された例
Facebook上の投稿にURLが書かれた際に、ページの概要(緑色矢印の先)や紹介画像(橙色矢印の先)が表示された例
この写真の記事を読む
同一ページの検索結果でも、PCでの表示(黄色矢印)とモバイルでの表示(緑色矢印)とでは、descriptionに指定された文章の表示文字数が異なる
Chrome用のアドオン「Alt & Meta viewer」を使えば、表示中のウェブページにあるmeta要素を確認できる
Twitter上のツイートにURLが書かれた際に、ページの概要(黄色矢印の先)やサムネイル画像(紫色矢印の先)が表示された例
Twitter Cards Validatorでメタタグの記述が正しいかどうかを確認できる
ブラウザのFirefoxなら標準機能でmeta要素の確認ができる
OGPブックマークレットでメタタグの記述内容を確認表示したところ
Facebook上の投稿にURLが書かれた際に、ページの概要(緑色矢印の先)や紹介画像(橙色矢印の先)が表示された例
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます