# VuePressメモ. 08. Twitterカード、OGP

普通の やり方が分からないが、
何箇所も 同じようなのを書くのが嫌だったので、
このようにしてみた。

frontmatter で title, heroImage, tagline が設定されている前提

export default ({ Vue, options, router, siteData }) => {
  // modify header
  let baseUrl = 'https://sugoi-domain.com';

  for (let page of siteData.pages) {
    let title       = page.frontmatter.title;
    let description = page.frontmatter.tagline;
    let pageUrl     = baseUrl + page.regularPath;
    let imageUrl    = baseUrl + page.frontmatter.heroImage; // ドメインから含めないと Twitter カードに出ない
    let twitterId   = '@sugoi-twitter-account';
    let twitterCard = 'summary'; // or 'summary_large_image'

    if (page.frontmatter.meta == null) {
      page.frontmatter.meta = [];
    }
    if (page.frontmatter.heroImage == null|| page.frontmatter.heroImage == '') {
      imageUrl = baseUrl + '/logo.png'; // ico だと Twitter カードに出ない。
    }
    page.frontmatter.meta.push({ name: 'description'        , content: description });
    page.frontmatter.meta.push({ name: 'thumbnail'          , content: imageUrl    });
    page.frontmatter.meta.push({ name: 'twitter:card'       , content: twitterCard });
    page.frontmatter.meta.push({ name: 'twitter:site'       , content: twitterId   });
    page.frontmatter.meta.push({ property: 'og:title'       , content: title       });
    page.frontmatter.meta.push({ property: 'og:description' , content: description });
    page.frontmatter.meta.push({ property: 'og:image'       , content: imageUrl    });
    page.frontmatter.meta.push({ property: 'og:url'         , content: pageUrl     });
  }
}

[ 📩 ご意見 ]