Twitter Cardsのキャッシュ更新の方法を整理

ちょっとオミカレの仕事でやったのでメモとしてまとめておきます。

Twitter Cards使うこと多いと思います。こんなやつですね。

いわゆるLP的な単発の場合、手でソースを書いたりするんですが、ちょいちょい間違えたりするじゃないですか、人類って(主語でかい)。

CDN使ってて間違えてそっち書いたりとか(Twitter Cardsに入れる画像はリンク先と同じドメインじゃないとダメというのを忘れがち)。あと純粋にURL間違えたりとか。

そこでTwitter Cardsに関連したmetaを直して、さて更新となるんですが、TwitterでCardの情報がキャッシュされているので、まあ、反映されない。

https://cards-dev.twitter.com/validator

Card Validator通すとキャッシュクリアされるってよく言われていますが、まあ、されない。「それでしばらく待ちましょう」ってことなの?と思いつつも本家のドキュメント見ると書いてました。ちゃんと明記してました。

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards#refreshing

要は、bit.lyで対象のURLのショートURLを作成して、そのbit.lyで生成したURLをTweetすると、元URLのキャッシュも書き換えられるということなんですね。

実際にサクッとTwitter Cardsの内容が更新されたので今後はこれでサクサク行けそうです。やはり頼るべきは公式のドキュメントですね!

このページはモバイルファーストインデックス対象ページなのか?3ステップで確認する方法 at Search Console(新バージョン)

スクリーンショット:MFI対象のページなっている結果を表示している画面。「ユーザーエージェント」の項目が「スマートフォン用Goolebot」になっている。

Googleの検索結果の半分以上がモバイルファーストインデックス(以下MFI)になったそうです。

Official Google Webmaster Central Blog: Mobile-First indexing, structured data, images, and your site

Google、検索結果の半数以上のページが MFI に移行したと発表 ::SEM R (#SEMR)

今年の3月から本格運用とのことでしたが、世界中のウェブサイトの数を考えと、約9ヶ月で半数を越えたというのを、速いととるか、遅いと取るかは人それぞれでしょうか?

そうなると、気になるのは

で、自分の(面倒見ている)サイトはMFIの対象なんだろうか?

ということではないでしょうか?

Search Consoleを利用するとサクッと確認できるので紹介しておきます。
※ 新バージョンでの確認方法です。

“このページはモバイルファーストインデックス対象ページなのか?3ステップで確認する方法 at Search Console(新バージョン)” の続きを読む

label要素はbuttonにも適用できるの?

マテリアルデザインのスタイルガイドを見ていたら、ボタンの高さは36dpとあり、さらにクリッカブルな領域は48dpにするという記述を見つけました。

https://material.io/guidelines/components/buttons.html#buttons-style

スクリーンショット 2017-04-08 16.34.43

だとすると、button要素内に透明の領域を‥‥、とかspanやdivなど親要素つけてそこに判定を‥‥、というよりはlabel要素使うのがマークアップとしては素直かな?と思いました。

“label要素はbuttonにも適用できるの?” の続きを読む

ブラウザーのアクセシビリティチェックツール

Web Accessibility Advent Calendar 2016の14日目の記事です。

普段は受託でウェブサイトやウェブアプリケーションの制作を行っていますが、制作時には気をつけているつもりでも、やはり抜けもあります。余裕がなくなってくるとなおさらです。実際には実装屋のみでできる範囲には限界はありますが、それでも、実装屋でもなんとかなる範囲だけでもやろうと思った際に、コード書くときの心構えだけではなかなかうまく行きません。

そういった面において、Developer Toolsなどで一緒にチェックできるツールというのは、ひとつの助けになるだろうということで紹介します。 “ブラウザーのアクセシビリティチェックツール” の続きを読む