wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

シェア時にTwitterカードを使えるようにするために

あれからサイトに新記事を上げることなく、目に見える活動といえば、はてなブログ記事を投稿するぐらいになってます。何度も何度もこのはてなブログで、Mac版のOfficeがアップデートするたびに動く機能が動かなくなっているため、改訂作業ができないでいるわけです。早く直して、って感じなんですけど。この件です。

で、今、自分ができることは何か、というと、とりあえずTwitter Cardが使えるようにすることですか?

実際にどのように表示されるのか検証するためのサイトはこちら。

Card Validator | Twitter Developers

残念ながら、うちのサイトはTwitterカードには対応できてません。さすがにあかんやろ、って感じです。でもページ数が1万以上あるんですけど…

たとえばこの記事をピックアップ。

静的HTMLサイトだと手作業なんですよ。Twitter Cardを有効にするためのMETAタグはこんな感じでっか?

<meta property="og:type" content="article">
<meta property="og:title" content="What's Your Career Goal? - All About Me">
<meta property="og:description" content="That's a good question. I've been working on my website for many years, and I'm satisfied with my current job. Until now I've been involved almost exclusively with the technical aspects of things, and I've been writing articles on how to use software for Microsoft. I have a strong passion for creating resources that do not exist, especially for minor software. ">
<meta property="og:image" content="https://wanichan.jp/english/story/all-about-me/images/goal_setting.gif">
<meta property="og:url" content="https://wanichan.jp/english/story/all-about-me/whats_your_career_goal.html">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@wanichan">

 そしたらこんな感じ。

f:id:wanichan:20180921024842p:plain

Twitterカードの種類は結局summaryにしました。アイキャッチ画像は大したことないんで。

summaryタイプにすると、アイキャッチ画像は正方形でバランスがとれる感じに変更しなきゃいけないです。縦長の画像は正方形にサイズ調整してちゃんと読み取れるようにしないとです。たぶん、上部が読み込まれて、下部は切り取られる仕様なんですかね?

たとえば以下の記事、

アイキャッチ画像の両端がトリミングされてますね。

f:id:wanichan:20180921083836p:plain

f:id:wanichan:20180921083413p:plain

とりあえず、一番コンテンツの少ない英語サイトからやっつけてます。シェアされるかどうかわかんないですけど、年内にどこまでできるか、ですね。

あ、やっぱり注目記事から片付けたほうがよさそうな気もしますね。Twitterシェアされやすい記事から。ってどれやねん、って考えてみると、ふつうは私宛にメンションつきでシェアされるからそっからやりますかね?

一番手間いらずなのはブログなんでしょうけど、レガシーなHTMLサイトって自由が利くので自分の思い通りに構築できるわけですよ。でもほとんど手動という…。アドインとかマクロとか使えたらいいんですけど、私はそんな技術持ち合わせていないのですよ。

今回、以下の記事を参考にさせていただきました。

saruwakakun.com