Twitterカードを追加する

Twitterカードを追加してみましょう。Twitterカードは、記事へのリンクを張るだけで、Twitter上で、要約を掲載できる機能のことです。

ビルドスクリプトを開く

まず最初に、サイトをビルドしているPerlスクリプトを開きます。

lib/Giblog/Command/build.pm

Twitterカード追加のプログラムを追加

「Add meta description」と「Build entry html」の間に「Twitter card」のPerlプログラムを追加します。

    # Add meta description
    $api->add_meta_description($data);
    
    # Twitter card
    {
      my $meta = $data->{meta};
      
      my $site_url = $config->{site_url};
      my $title = $data->{title} || '';
      my $description = $data->{description} || '';
      
      my $twitter_card = <<"EOS";
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="\@perlzemi" />
<meta name="twitter:title" content="$title" />
<meta name="twitter:description" content="$description" />
<meta name="twitter:image" content="$site_url/images/perlzemi-twitter-card.png" />
EOS
      
      $meta .= "\n$twitter_card\n";
      
      $data->{meta} = $meta;
    }
    
    # Build entry html
    $api->build_entry($data);

こんな風にして、直接Perlプログラムを書き込んで、サイトをカスタマイズできます。

Twitterカードを確認するには

Twitterカードが正しく表示されるかを確認するには、Twitterが提供している「Card validator」を使います。

Card validator

記事の最初の画像を表示するには?

スマートフォンサイトでは、記事の最初の画像をTwitter Cardに張ることも一般的ですね。

記事の最初の画像を表示したい場合は、以下のようにします。

「Create description from first p tag」と「Read common templates」の間に、最初の画像を取得するPerlプログラムを追加します。

    # Create description from first p tag
    $api->parse_description_from_first_p_tag($data);

    # Get first image src
    $api->parse_first_img_src($data);

    # Read common templates
    $api->read_common_templates($data);

次にTwitterカードの部分を以下のように記述します。

    # Add meta description
    $api->add_meta_description($data);
    
    # Twitter card
    {
      my $meta = $data->{meta};
      
      my $site_url = $config->{site_url};
      my $title = $data->{title} || '';
      my $description = $data->{description} || '';
      my $img_src = $data->{img_src};
      
      my $twitter_card = <<"EOS";
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="\@perlzemi" />
<meta name="twitter:title" content="$title" />
<meta name="twitter:description" content="$description" />
EOS
      if (defined $img_src) {
        $twitter_card .= <<"EOS";
<meta name="twitter:image" content="$site_url$img_src" />
EOS
      }
      
      $meta .= "\n$twitter_card\n";
      
      $data->{meta} = $meta;
    }
    
    # Build entry html
    $api->build_entry($data);