Gatsbyにreact-helmetを導入してリンクカードを挿入する方法
前提条件の環境構築ができれていれば1分も掛からずに導入できました
はじめに
リンクカードという単語自体が知らなかったので対応方法に手間取ってしまいました。
あとは、やり方を調査したら簡単に導入する方法がわかったので導入してみました。
前提条件
- Gatsbyで環境構築ができている
導入手順
npmの場合
npm install react-helmet gatsby-plugin-react-helmetyarnの場合
yarn add react-helmet gatsby-plugin-react-helmetgatsby-config.jsに追加したプラグインを追記します。
gatsby-config.js
plugins: [
...,
'gatsby-plugin-react-helmet'
]導入テスト
導入が完了したらiframelyの公式サイトに記述されているタグで表示されるか テストしてみましょう。
.mdの記事を作成して以下のを追記してみましょう。
公式サイト
以下の検索窓で検索して表示されたコードをコピーして貼り付けることで反映されます。
導入テスト
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/sIP3mAqIdNY?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe></div>おわり
簡単に導入することができたのでよかったですが、開発モード中は表示されたりされなかったりするようです。
また、私の環境ではdivで囲われているiflameの表示はされなかったので後日調査したいと思います。