MENU
あなたが知りたい芸能ニュースを運営するメディア「芸能マーケティング図書館」です。皆様の芸能における疑問の謎が解決します!

【SNS】WEBサイトにTwitterやインスタの埋め込み!SNS遅延読み込み!WordPressでブログの高速化軽量化

SNSをWordpressに読み込み
  • URLをコピーしました!

WordPressではTwitterやInstagramの埋め込みが簡単にできます。

埋め込みコードを取得して、それを貼り付けなければならいところを、URLを貼るだけで自動的に埋め込んでくれます。

ただ、問題なのはPageSpeed Insightsで低速化してしまうことです。既にWeb上で掲載・公開されている内容をそのままコピー&ペーストして掲載してしまうと、SEOで良い評価を得られないケースもあります。

難しい作業ですのでバックアップは忘れずにとってください。

目次

【SNS】ブログやWEBサイトにTwitterやインスタの埋め込み!

iframe
iframe

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))ツイッターだけ対応できれば良い、という場合には、2行目を削除、インスタだけの対応でよい、という場合には3行目を削除すればよいです。

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);

画像引用元:https://tabibitojin.com/lazy-load-twitter-instagram-speeding-up/
  

  // 遅延読込み  

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);

  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

More
芸能と音楽をを追求しつづけるメディアです。東京都内に住んでいます。アネックといいます。
子供の頃から芸能・音楽・テレビっ子でした。ですので昔の芸能音楽や芸能の知識は自信があります。好きな芸能ニュースに自分の見解をいれますので意見もいただけますと幸いです。今だけでなく昔の芸能もお伝えして楽しんでいただければと感じます。とくに皆さんが興味をもってもらえるような懐かしい気持ちに浸れるメディアとしたいと考えています。
法人サイトの実績:
①某大手総合商社系メディア/コーポレイトサイト3件でインフラやセキュリティの技術面で要件定義から運用
②渋谷の大手ファッションモールのショッピングサイトのインフラ担当エンジニア


【資格】
Webディレクション資格認定者、Google アナリティクス個人認定資格(GAIQ)など他 IT資格を取得

【お問い合わせ先メールアドレス】
ybox4907@gmail.com

目次

コメント

コメントする

目次