Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

今日の学び

・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・・・画像複数(4枚まで)
app・・・アプリ表示用

canonicalタグについて

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

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

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

background-size指定色々

contain・・・画像を切り取らずに最大で表示
cover・・・画像の縦横比を崩さず、最大で表示、はみ出す場合は切り取る
auto・・・縦横比が維持されるように適当に拡大縮小される
パーセント指定・・・1個指定と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)と同意*/
}

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

今日は以上!

irico
新米フロントエンドエンジニアです。 得意なのはギターを弾くこと、苦手なことは運動です。 ゲーム(特にノベル物)が趣味です🎮
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away