2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTML OGPについて

Posted at

#OGPとは
HTML要素。
SNSにシェアした際に表示される「タイトル」・「画像」・「詳細」を設定できる。

#OGP設定のメリット
どのようなページで何を伝えたいのかが明確になる。
→共有されたユーザーの訴求率が高まる。
→より多くの人に記事を見てもらえる

#OGPの設定方法
##OGPを使用することを宣言するタグ
①head要素にprefix属性を追加する
②トップページでは「website」・トップページ以外では「article」を入力する
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

##OGPで設定できる内容
###ページURL(og:url)
<meta property="og:url" content="ページのURL" />
###ページタイプ(og:type)
<meta property="og:type" content="ページの種類" />
###ページタイトル(og:title)
<meta property="og:title" content=" ページの タイトル" />
###ページの説明文(og:description)
<meta property="og:description" content=" ページのディスクリプション" />
###サイト名(og:site_name)
<meta property="og:site_name" content="サイト名" />
###画像のURL(og:image)
<meta property="og:image" content=" サムネイル画像の URL" />

#OGP設定で気をつけるポイント
1ページごとに設定すること。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?