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
230
すぐできる構造化データマークアップ
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
600
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
160
もう一度imgタグをおさらいしよう
hiro_ghap1
0
140
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
57
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
570
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
430
Other Decks in Programming
See All in Programming
Reading Rails 1.0 Source Code
okuramasafumi
0
120
旅行プランAIエージェント開発の裏側
ippo012
2
900
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
350
Design Foundational Data Engineering Observability
sucitw
3
190
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Speed Design
sergeychernyshev
32
1.1k
How GitHub (no longer) Works
holman
315
140k
Six Lessons from altMBA
skipperchong
28
4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Making Projects Easy
brettharned
117
6.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
KATA
mclloyd
32
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.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プラグイン開発中です!