WordPressではTwitterやInstagramの埋め込みが簡単にできます。
埋め込みコードを取得して、それを貼り付けなければならいところを、URLを貼るだけで自動的に埋め込んでくれます。
ただ、問題なのはPageSpeed Insightsで低速化してしまうことです。既にWeb上で掲載・公開されている内容をそのままコピー＆ペーストして掲載してしまうと、SEOで良い評価を得られないケースもあります。
難しい作業ですのでバックアップは忘れずにとってください。
【SNS】ブログやWEBサイトにTwitterやインスタの埋め込み！
YouTubeやWordPressのブログカードはiframeです。iframeとは別のWebページや画像などをあたかもページの要素の一つのように埋め込んで一体的に表示することができます。
表示する内容はsrc属性でURLの形で指定すします。
領域の大きさ（width属性/height属性）や、読み込んだ要素が指定領域からはみ出した場合の処理の方法（scrolling属性：HTML5で廃止）などを指定することもできます。
iframeの遅延読み込みを実装できれば実現できるよね。
ただTwitterやInstagramの埋め込みはiframeじゃなくてblockquoteです。
「BLOCKQUOTE」とは、引用・転載文であることを示すタグです。比較的長いテキストを段落ごと引用する際に使用されます。短いテキストの場合は<blockquote>タグではなく<q>タグを使用して引用・抜粋を行います。
安易に別サイトの内容をコピー＆ペーストするとSEOではよくないのです。
この問題を解決する方法が存在しています。 それが「blockquote<引用タグ>」という引用タグを用いての引用です。
SNSの速度改善方法
下記を参考にしました。
GoogleAdSenseは、JavaScript/画像/フォント/設定ファイルなどの複数データを読込むため、非常に低速です。そのため、広告を導入したページは、広告のないページに比べてページ表示速度が低速です。
- 新コード例：
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - 旧コード例：
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
引用元：遅延読込みでページ表示速度を改善
SNS遅延読み込み！Wordpressでブログの高速化軽量化
WordPressでは記事にフィルターがかけられるのです。（外観⇒テーマエディター⇒テーマのための関数（functions.php））ツイッターだけ対応できれば良い、という場合には、２行目を削除、インスタだけの対応でよい、という場合には３行目を削除すればよいです。
function lazyload_twitter_instagram_async( $content ) {
$content = str_replace(‘<script async=””src=”https://platform.twitter.com/widgets.js”charset=”utf-8″></script>’,”, $content);
$content = str_replace(‘<script async=””src=”//www.instagram.com/embed.js”></script>’,”, $content);
return $content;
}
add_filter(‘the_content’,’lazyload_twitter_instagram_async’, 11);
// 遅延読込み
var lazyLoad = false;
function onLazyLoad() { if (lazyLoad === false) {
// 複数呼び出し回避 + イベント
lazyLoad = true;
window.removeEventListener(‘scroll’, onLazyLoad);
window.removeEventListener(‘mousemove’, onLazyLoad);
window.removeEventListener(‘mousedown’, onLazyLoad);
window.removeEventListener(‘touchstart’, onLazyLoad);
window.removeEventListener(‘keydown’, onLazyLoad);
main1();
// ツイート JS 読み込み
main2();
// インスタグラム JS 読み込み } }
window.addEventListener(‘scroll’, onLazyLoad);
window.addEventListener(‘mousemove’, onLazyLoad);
window.addEventListener(‘mousedown’, onLazyLoad);
window.addEventListener(‘touchstart’, onLazyLoad);
window.addEventListener(‘keydown’, onLazyLoad);
window.addEventListener(‘load’, function() { // ドキュメント途中（更新時 or ページ内リンク） if (window.pageYOffset) { onLazyLoad();
} });})(window, document);
コメント