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
630
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
160
もう一度imgタグをおさらいしよう
hiro_ghap1
0
140
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
58
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
580
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
430
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
240
What's new in Spring Modulith?
olivergierke
1
140
Devoxx BE - Local Development in the AI Era
kdubois
0
130
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Catch Up: Go Style Guide Update
andpad
0
220
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Go言語はstack overflowの夢を見るか?
logica0419
0
260
チームの境界をブチ抜いていけ
tokai235
0
170
明日から始めるリファクタリング
ryounasso
0
140
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Writing Fast Ruby
sferik
629
62k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Code Reviewing Like a Champion
maltzj
526
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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プラグイン開発中です!