6日目: <SEO対策>ogpタグとcanonicalタグ

今日の学び

・ogpタグ、canonicalタグ　←メイン
・background-size指定色々
・transitionで一部のプロパティだけ指定する方法
・transform:scale(x,y)は一つの値でも指定できる！

ogpタグ、canonicalタグ

ogpタグ・・・サイトの情報とSNSとを連携させる！
これによってSNSでの拡散力や印象がアップ！

<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website　か　blog　か　article" />
<meta property="og:description" content="ページの簡単な説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:image" content="サムネイル画像のURL" />

ogt:typeは、
website・・・トップページ
article・・・下層ページ、その他　　で値を使い分ける。
他にもたくさんあるらしい。
参考サイト

facebookやtwitter専用のogpタグもある。

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" /> <!--facebook用-->
<meta name="twitter:card" content=" Twitterカードの種類" />      <!--twitter用-->

App-idはfacebookにOJPタグを適応させる為に必須。
facebookを利用するのであれば取得しなければならない。
ツイッタカードの種類には以下のようなものがある。

summary・・・文章多め、画像小さめ
summary large image・・・画像大きめ、文章そこそこ
photo・・・画像大きめ、文章ほんのちょっと
gallery・・・画像複数（４枚まで）
app・・・アプリ表示用

canonicalタグについて

複数ページのSEO評価をまとめる！
→SEOランクの分散を防ぐ！

<link rel=”canonical” href=”SEOランクを集中させるサイト”/>

例えばこんなときに使おう！
①wwwありとなし、httpsとhttpなどを同じページ内容で併用して運用している場合
②スマホサイトとPCでページを分けているが内容が同じ場合　...etc

background-size指定色々

contain・・・画像を切り取らずに最大で表示
cover・・・画像の縦横比を崩さず、最大で表示、はみ出す場合は切り取る
auto・・・縦横比が維持されるように適当に拡大縮小される
パーセント指定・・・１個指定と2個指定ができる。

div{
   background-size: 30px;    /*横幅が30px,高さはauto*/
   background-size: 30px 30px; /*横幅が30px,高さ30px*/
}

一つ指定する場合は縦＝横でないので注意！

transitionで一部のプロパティだけ指定する方法

一部だけ動かせるなんて知りませんでした！

.haniwa {
   transform: translateY(30px);    /*ここをtransitionで動かなくできる！*/
   transition: opacity 1s linear;
}
.haniwa:hover {
   opacity: 0.8;
}

transitionプロパティに入っているtransition-property
で指定できます。
複数指定する場合はカンマ区切りで指定できる！

.haniwa {
   transform: translateY(30px);
   transition: opacity 1s linear,transform 2s linear;
}

transform:scale(x,y)は一つの値でも指定できる！

一つの値で設定できる！

.haniwa {
   transorm: scale (1.5)   /*scale(1.5,1.5)と同意*/
}

いっぺんに設定できたり、違う意味合いになったり、プロパティ毎でまちまちなので
難しい....

今日は以上！