Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
すぐできる構造化データマークアップ
Search
Yoshihiro Hasegawa
November 27, 2019
Programming
1
210
すぐできる構造化データマークアップ
2019年11月27日に開催された WebMaster Conference Osaka で LT させていただいた内容です。
明日から構造化データをWebサイトに適用しましょう!
Yoshihiro Hasegawa
November 27, 2019
Tweet
Share
More Decks by Yoshihiro Hasegawa
See All by Yoshihiro Hasegawa
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
410
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
110
もう一度imgタグをおさらいしよう
hiro_ghap1
0
130
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
51
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
530
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
430
Other Decks in Programming
See All in Programming
バグを見つけた?それAppleに直してもらおう!
uetyo
0
220
Flatt Security XSS Challenge 解答・解説
flatt_security
0
660
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
220
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
230
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
970
선언형 UI에서의 상태관리
l2hyunwoo
0
260
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
110
情報漏洩させないための設計
kubotak
5
1.3k
HTML/CSS超絶浅い説明
yuki0329
0
180
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
2025.01.17_Sansan × DMM.swift
riofujimon
1
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Six Lessons from altMBA
skipperchong
27
3.5k
Fireside Chat
paigeccino
34
3.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Site-Speed That Sticks
csswizardry
2
230
How STYLIGHT went responsive
nonsquared
96
5.3k
The Invisible Side of Design
smashingmag
299
50k
The Language of Interfaces
destraynor
155
24k
4 Signs Your Business is Dying
shpigford
182
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Transcript
2019.11.27 Webmaster Conference Osaka すぐできる構造化データマークアップ Yoshihiro Hasegawa
すぐできる構造化データマークアップ 長谷川 喜洋 ▸߹ಉձࣾ )PXUP6TF $50 ▸૯߹8FCαʔϏε λμϑϥ ද ▸σδλϧϋϦουେࡕ
τϨʔφʔ ▸גࣜձࣾμϒϧϊοτ αϙʔλʔ ▸ۭҊਓ ▸͓ञͱߚͱνϣίϨʔτ yoshihiro.hasegawa.167 chocolat_street hiro_ghap1
すぐできる構造化データマークアップ 本日のゴール ▸໌͔ΒߏԽσʔλΛ͑ΔΑ͏ʹͳͬ ͯΒ͏͜ͱ
すぐできる構造化データマークアップ 本日のゴール ▸໌͔ΒߏԽσʔλΛ͑ΔΑ͏ʹͳͬ ͯΒ͏͜ͱ yoshihiro.hasegawa.167 hiro_ghap1 何かあればTwitterかFacebookへ!
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ
構造化データとは 構造化データとは ▸ߏԽσʔλͱɺϖʔδͷใσʔλΛҰఆ ͷنଇʢߏʣʹैͬͯهड़͠ɺͦΕΒͷσʔλ ʹҙຯΛՃ͢Δ͜ͱͰ͋ΔɻߏԽσʔλΛద ༻͢Δ͜ͱʹΑΓɺΠϯλʔωοτ্ͷใΛ୯ ͳΔσʔλͷू߹͔ΒࣝͷσʔλϕʔεʹਐԽ ͤ͞Δ͜ͱ͕ՄೳͱͳΔɻ ɾגࣜձࣾΞΠϨοϓ༻ޠूΑΓҾ༻ IUUQTXXXJSFQDPKQLOPXMFEHFHMPTTBSZEFUBJMJE
構造化データとは ▸(PPHMF͕ೝࣝͰ͖ΔߏԽσʔλछྨ TDIFNBPSH .JDSPGPSNBUT .JDSPEBUB 3%'B σʔλϋΠϥΠλʔͰλά͚ͨ͠σʔλ 構造化データとは
構造化データとは ポイント 構造化データには種類がある! 構造化データとは
構造化データとは ポイント 構造化データには種類がある! 構造化データとは Microsoft と Google と Yahoo! が
やっている Schema.org でOK!
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ
構造化データを入力するメリット ▸ߏԽσʔλΛ(PPHMF͕ཧղ͢Δ͜ͱʹΑͬͯɺ ϦονεχϖοτΛදࣔͰ͖Δɻ 構造化データを入力するメリット
構造化データを入力するメリット 構造化データを入力するメリット ▸ϦονεχϖοτʹΑΓΫϦοΫͷ্͕ظͰ͖Δɻ
構造化データを入力するメリット Google で紹介されている事例 求人詳細ページの 自然検索トラフィック94%増加 コンバージョン率4.5倍 トラフィック100%増大 自然検索トラフィック2倍以上 サイト滞在時間1.5倍以上
構造化データを設定すると メリット リッチスニペットが表示される! 構造化データを入力するメリット
構造化データを設定すると メリット リッチスニペットが表示される! 構造化データを入力するメリット Webページへの流入、滞在時間、 コンバージョンの増加が期待できる!
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ
すぐできる構造化データマークアップ 参考にしたいリッチスニペットを見つける
すぐできる構造化データマークアップ 参考にしたいリッチスニペットを見つける 「シャンパン 開け方」で検索すると 出てくるサントリーの How to Step 構造化データ 料理名で検索すると出てくる
レシピの構造化データ
すぐできる構造化データマークアップ 参考にしたいリッチスニペットを見つける 今回はよくある質問の構造化データ
すぐできる構造化データマークアップ 参考にしたいリッチスニペットを見つける 今回はよくある質問の構造化データ 早速自社の Webサイトに 取り込んでみましょう!
すぐできる構造化データマークアップ 構造化データテストツールへアクセス ▸ʮߏԽσʔλςετπʔϧʯͰݕࡧ
すぐできる構造化データマークアップ 構造化データテストツールへアクセス ▸ࢀߟ͢ΔαΠτͷ63-Λೖྗͯ͠ʮςετΛ࣮ߦʯ
すぐできる構造化データマークアップ 構造化データテストツールへアクセス ▸ࠨଆʹιʔείʔυɺӈଆʹߏԽσʔλ͕දࣔ͞ΕΔ
すぐできる構造化データマークアップ 構造化データテストツールへアクセス ▸ ιʔείʔυͷTDSJQUUZQFzBQQMJDBUJPOME KTPOzʙ TDSJQUΛίϐ ϖ
すぐできる構造化データマークアップ 自社サイトへ構造化データを加える ▸ ߏԽσʔλςετπʔϧͷӈଆΛࢀߟʹɺࣗࣾͷ༰ʹॻ͖͑Δ
すぐできる構造化データマークアップ 自社サイトへ構造化データを加える ▸ग़དྷ্͕ͬͨΒɺߏԽσʔλςετπʔϧͰνΣοΫ͢Δ
すぐできる構造化データマークアップ 自社サイトへ構造化データを加える エラーが出ていたら修正を! ▸ग़དྷ্͕ͬͨΒɺߏԽσʔλςετπʔϧͰνΣοΫ͢Δ
すぐできる構造化データマークアップ 自社サイトへ構造化データを加える 先程のサントリーの サイトでも警告は 発生している ▸ Τϥʔमਖ਼͕ඞཁ͕ͩɺਪ߲ͷܯࠂݩͷαΠτͰͳ͚Εεϧʔ
すぐできる構造化データマークアップ 注意点 ▸レシピなど、一部の構造化データではボイスUIのガイダンスに 対応した項目が存在する。チェックツールでは必須項目と なっていないため、個別で対応が必要。
すぐできる構造化データマークアップ エラーがなくなったら完成!
構造化データを作成する際の注意点 ▸ΨΠυϥΠϯҧʹͳΒͳ͍ Α͏ʹɺೖྗ༰ΛνΣοΫ ͢Δ͜ͱɻ ▸͜ͷ߹ɺٻਓ͕ऴ͍ྃͯ͠ ΔʹؔΘΒͣߏԽσʔλ ্ͰٻਓதͰ͋ΔͨΊʹखಈ ରࡦͷରͱͳΔՄೳੑʹݴ ٴ͍ͯ͠Δɻ すぐできる構造化データマークアップ
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ
Search Console で確認する Search Console で確認する ▸ߏԽσʔλ͕ೝࣝ͞Ε͍ͯΔͱɺ4FBSDI$POTPMF্ʹରԠ͠ ͨϓϩύςΟ͕ग़ݱ͢Δɻ
Search Console で確認する Search Console で確認する ▸ݕࡧ݁Ռͷөɺૣͯ࣌ؒ͘ɺ ͯ͘ͱ͍ͬͨͱ͜Ζ
Search Console で確認する Search Console で確認する ▸ߏԽσʔλ͕ೝࣝ͞Ε͍ͯΔͱɺ4FBSDI$POTPMF্ʹରԠ͠ ͨϓϩύςΟ͕ग़ݱ͢Δɻ
その他の構造化データ ▸ΠϕϯτͷߏԽσʔλͳΒɺφϨοδύωϧ͕ग़ݱ͢Δ Search Console で確認する
Search Console で確認する ▸ݕࡧΫΤϦͰɺφϨοδύωϧ͔Βͷྲྀೖ͕அͰ͖Δ Search Console で確認する
構造化データ まとめ 楽しいのでぜひ 試してください! Search Console で確認する
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ
すぐできる構造化データマークアップ 本日のアジェンダ ▸ߏԽσʔλͱ ▸ߏԽσʔλΛೖྗ͢ΔϝϦοτ ▸͙͢Ͱ͖ΔߏԽσʔλϚʔΫΞοϓ ▸4FBSDI$POTPMFͰ֬ೝ͢Δ ここまで来たということは時間がある!?
構造化データのマニュアルにあるもの ▸*OEFYJOH"1*ͰαΠτͷߋ৽Λ(PPHMF௨͢Δɻ すぐできる構造化データマークアップ
構造化データのマニュアルにあるもの ▸*OEFYJOH"1*ͰαΠτͷߋ৽Λ(PPHMF௨͢Δɻ すぐできる構造化データマークアップ 在庫や求人など、ユーザーの利益に 直結するものは、Google からの ガイダンスをよく確認してください
構造化データに対応している内容 ▸هࣄɺύϯͣ͘Ϧετɺॻ੶ɺΧϧʔηϧɺاۀͷ࿈བྷઌɺ ίʔεɺධՈϨϏϡʔɺσʔληοτɺޏ༻ओͷฏۉධՁɺ ΠϕϯτɺϑΝΫτνΣοΫɺٻਓใɺϝσΟΞɺ৬ۀɺ ϥΠϒετϦʔϛϯάɺҬͷ͓ళαʔϏεɺϩΰɺɺ 2"ϖʔδɺϨγϐɺϨϏϡʔεχϖοτɺಡΈ্͛Մೳɺ αΠτϦϯΫݕࡧϘοΫεɺιʔγϟϧϓϩϑΟʔϧɺಈըɺ ιϑτΣΞΞϓϦɺఆظߪೖͱϖΠΥʔϧίϯςϯπɺ ਓؾεϙοτϦετɺ)PXUP4UFQ 構造化データを入力するメリット
どんどん増えていってます
構造化データに対応している内容 ▸هࣄɺύϯͣ͘Ϧετɺॻ੶ɺΧϧʔηϧɺاۀͷ࿈བྷઌɺ ίʔεɺධՈϨϏϡʔɺσʔληοτɺޏ༻ओͷฏۉධՁɺ ΠϕϯτɺϑΝΫτνΣοΫɺٻਓใɺϝσΟΞɺ৬ۀɺ ϥΠϒετϦʔϛϯάɺҬͷ͓ళαʔϏεɺϩΰɺɺ 2"ϖʔδɺϨγϐɺϨϏϡʔεχϖοτɺಡΈ্͛Մೳɺ αΠτϦϯΫݕࡧϘοΫεɺιʔγϟϧϓϩϑΟʔϧɺಈըɺ ιϑτΣΞΞϓϦɺఆظߪೖͱϖΠΥʔϧίϯςϯπɺ ਓؾεϙοτϦετɺ)PXUP4UFQ 構造化データを入力するメリット
どんどん増えていってます
すぐできる構造化データマークアップ ご清聴ありがとうございました! 続きはWEBで! 構造化データマークアップ WordPressプラグイン開発中です!