HUGOとフルAMPで究極のブログ爆速化 その3~SNSカード・ブログカードの設置~

Share on:

この記事は約3 分で読めます。

目次

フルAMP化されているこのHUGOブログ

PCで見てもモバイルで見てもAMPページで高速表示(Googleのキャッシュページ)されています。

今回はフルAMP化するにあたってのナレッジ【SNSやブログのカード】の作り方を共有したいと思います。

※これまでHexoでフルAMP化としていましたが、HexoからHUGOに乗り換えましたので、HUGOとAMPで究極のブログ爆速化と継続タイトルを変更しています。

※このHUGOブログは引き続きAMP公式テーマを改造して使っています。

AMPページでのツイッターの埋め込み

まず<head>~</head>AMPコンポーネントを読み込む記述をします。

これでツイッターを埋め込むことができるようになります。

1<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

続いて、記事内でツイッターを埋め込みたい箇所に、

1<twitter width="375" height="472" layout="responsive" data-tweetid="1140780416212905985"></amp-twitter>

と記述します。

‘data-data-tweetid`はツイッターの画面で個別記事を表示したときのURL末尾の数字です。

または、ツイートへのリンクをコピーで得られたURL末尾のコピーです(いずれも同じです。)

これで上記のコードが下記のように展開されツイッターの埋め込み完了です。

AMPページでのインスタグラムの埋め込み

ツイッター同様、<head>~</head>にAMPコンポーネントを記述します。

1<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

記事内のインスタグラムを埋め込みたい位置に、

1<instagram data-shortcode="Bx7D0S1AmX1" data-captioned width="400" height="400" layout="responsive"></amp-instagram>

を記述します。

‘data-shortcodeはツイッター同様インスタグラムの個別ページのURL、または、リンクをコピー`のURLに含まれています。

AMPページでのブログカード

ブログカードとは記事内の外部・内部リンクをカード形式で表示するものです。

ここでは、見やすく広く利用されているはてなブログカードの設置の仕方を学びます。

まずAMPページでiframeを利用できるように<head>~</head>に記述します。

1<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

続いて、はてなブログカード本体を記事内に記述します。

1

対象の外部リンク・内部リンクのURLはsrc?url=以降にを記述します。

以下のような感じでAMPの公式ページへのリンクがカード形式で表示されます。

まとめ

AMPページは制約の多いページですが、AMPコンポーネントを利用することで多くの機能が再現でき、PCページ含め多機能なページが作れます。

その結果フルAMPという全てのデバイスでAMPページを表現できるサイトが作成できるようになっています。

AMPコンポーネントはこちらの公式サイトに記載されていますので、興味のある方は是非研究してみてください。

これまでのフルAMP化の関連記事