JavaScript

メタタグの情報(description,keywordsなど)を取得する【JavaScript】

この記事では、ページのメタタグの情報を取得する方法を紹介していきます。

descriptionやkeywordsなどのコンテンツが取得ができます。

まずは簡潔に取得するコードを紹介します。

記事後半で取得したい情報を指定して取得する方法を説明します。

また、タイトルタグの取得は「titleタグを取得する【JavaScript】」をご覧ください。

meta descriptionを取得する

まずはmeta descriotionを取得する方法です。

取得方法には色々ありますが、2パターン紹介します。

document.getElementsByName('description').item(0).content;

上記はgetElementsByNameを使う方法です。

document.querySelector('meta[name="description"]').content;

上記はquerySelectorを使う方法です。

しかし、いずれもdescriptionがない場合にはエラーが返ります。

meta keywordsを取得する

次はmeta keywordsを取得します。

こちらも同様に2パターン紹介します。

document.getElementsByName('keywords').item(0).content;

上記はgetElementsByNameを使った方法です。

document.querySelector('meta[name="keywords"]').content;

上記はquerySelectorを使った方法です。

しかし、いずれもkeywordsがない場合にはエラーが返ります。

metaタグを指定して取得する

あまり使う場面はないかもしれませんが、metaタグの属性を指定して取得する方法も載せます。

name属性を指定して取得

function getMeta(metaName) {
  var metas = document.getElementsByTagName('meta');
  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }
}
console.log(getMeta('description'));

property属性を指定して取得

function getMeta(metaProperty) {
  var metas = document.getElementsByTagName('meta');
  for (let j = 0; j < metas.length; j++) {
    if (metas[j].getAttribute('property') === metaProperty) {
      return metas[j].getAttribute('content');
    }
  }
}
console.log(getMeta('og:title'));

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5