kdcsライブラリー

画像をコンテンツ内で使っているか（imgタグ）、背景画像として使っているか（cssで指定）によって分かれる

背景画像の場合はcssの「image-set()」で対応

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

※Safari 12 以前や Chrome 67 以前などの古い WebKit 系ブラウザでは -webkit-image-set() が必要。
　（Safari 12 や Chrome 67 は 2018年リリースで約7年前のブラウザ）

.imgLayer01 {
  /* フォールバック用（JPEGなど汎用形式） */
  background-image: url("../images/slide_mv/sp01.jpg");
  /* 古いsafariとChromeのブラウザ用（WebP優先） */
  background-image: -webkit-image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
  /* モダンブラウザ用（WebP優先） */
  background-image: image-set(
    url("../images/slide_mv/sp01.webp") type("image/webp"),
    url("../images/slide_mv/sp01.jpg") type("image/jpeg")
  );
}

コンテンツ内の画像の場合は「picture」タグで対応

<picture>
  <source srcset="../images/slide_mv/sp01.webp" type="image/webp">
  <img src="../images/slide_mv/sp01.jpg" alt="スライド画像">
</picture>

meta要素の「property」

<meta property="og:site_name" content="サイト名"/>
<meta property="og:title" content="ogpのタイトル <title/>と同じ内容">
<meta property="og:description" content="ogpの本文 <meta name='description'/>と同じ内容。">
<meta property="og:type" content="website（トップページがwebsite 下層ページがarticle）"/>
<meta property="og:url" content="サイト（ページ）の絶対パスURL"/>
<meta property="og:image" content="画像の絶対パスURL"/>

例

<meta property="og:site_name" content="kdcs-Library"/>
<meta property="og:title" content="kdcs-Libraryのタイトル"/>
<meta property="og:description" content="html・JavaScript・WordPressなどkdcsのテクニカルメモです。"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://library.kdcs-web.com"/>
<meta property="og:image" content="https://library.kdcs-web.com/wp-content/themes/library/images/xxx.jpg"/>

【捕捉】
titleは32文字程度
discriptionは120文字程度
横長の画像は比率1.91:1。600x315px以上であれば良いが、推奨は1200x630px。
正方形の画像は600x600px以上。

Twitterでの表示 —————————————

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@twitter_acount"/>

【捕捉】

twitter:cardはsummaryまたはsummary_large_image（推奨サイズ1200px x 630px）
summaryは比率1:1 最少サイズ144px x 144px
summary_large_imageは比率1.91:1 最少サイズは600px x 314px

(続きを読む…)