2020年のフロントエンドエンジニアの技術スタックの一例
年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。 とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。 以下常体。 追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。 利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
このブログがFediverseに対応しました
Twitter が日々壊れゆくなか、周りの人が Misskey や Mastodon や Threads に住居を移すようになりました。 私も移住先を検討してみたものの、移住先のプラットフォームだっていつまで持つか分からないし、複数のプラットフォームにアウトプットを分散させるのも良くないなぁと思い、 最終的にマイクロブログがだめならブログでいいじゃんと自分を納得させるに至りました。 せっかくなら ActivityPub に対応して、Fediverse の人からリモートフォローできるようにして、反応が見れたら嬉しいよねということで色々と調べて対応させることができました。 本ブログは「@blog.tyage.net@blog.tyage.net」でリモートフォローすることが可能です。 このブログは hugo で生成しており、静的ファイルのみ配信しています。 それは変えたくなかったため、Acti
Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro
この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの中で細かい設定ができる pathpida 再生したページのパスの定数ファイルを作ってくれる便利なやつ タイポが無くなって助かる typed-scss-modules CSS Modlesでスタイリングをする際に、.module.(sc|c)ssに対して型定義ファイルを作成してくれる。 宣言漏れや補完など、痒い所に手が届く headlessCMS関連 microcms-js-sdk 最近扱っている案件のheadlessCM
いろんなアイデンティティ管理系製品やサービスの実験の記録をしていきます。 後は、関連するニュースなどを徒然と。 こんにちは、富士榮です。 なんだかんだでuPortを触ったり現Azure Active Directory Verifiable Credentialsの前身を触ったり、最近だと数カ所で実証実験プロジェクトを立ち上げたり、MS主催のDecentralized Identity Hackathonで入賞してみたり、と分散型IDに関わり始めて5年くらい経っていたりしますので、現時点で分かったことをメモしておこうかと思います。（往々にして数年後に見返すとう〜ん、となるやつだけど気にしないことにする） ※そういう意味では2019年の#didconでその時点でわかっていることをある程度まとめて発表してからおよそ3年も経つんですね・・・ また機会があればdidconでも開催してじっくりお話さ
900万円払ってウェブサイト改善のため「SEO代理店」を利用したらサイトがぐちゃぐちゃになった上に何の成果も得られなかったという体験談
ウェブサイトやウェブサービスにアクセスしてくれる訪問者を増やすためには、検索結果の上位に表示されるためのSEO(検索エンジン最適化)が重要になります。SEO対策のためにはさまざまな方法が考えられますが、より大きな効果を期待して「SEO代理店」に頼った結果、うまくいかないどころかサイトの見た目や構造がぐちゃぐちゃに悪化し、まるで良い結果が得られなかったのに6万2000ドル(約900万円)も費用がかかったという体験談を、ウェブサイトやアプリを開発する代理店のTinloofがブログで詳細に語っています。 The SEO scam: 62,000 dollars later https://tinloof.com/blog/the-seo-scam-62000-dollars-later Tinloofの共同創設者であるオマール・ベンセディク氏によると、Tinloofはサービスを宣伝する一環として
ブラウザプラグインのFlash Playerは2020年末でサポートが終了しました。そのことにより、Flashコンテンツをブラウザで再生する手段がなくなっています。 筆者はBeautiflビューティフルというウェブサイトを個人的に運用しています。Beautiflは、ユーザーが投稿したFlash作品を紹介するギャラリーサイトです。Flash Player終了によってウェブサイトの目的であるFlashの再生体験ができなくなるので、窮地に陥りました。Flash Playerの終了は2017年にアドビが決定したことで覆せないので、ウェブサイト側として次の3つの対策を行いました。 FlashをHTMLで再生可能にする Flashをビデオとして残す SWFファイルをダウンロード可能にする 本記事ではウェブでFlashコンテンツをどうやって残していこうとしたのか、そのアプローチを紹介します。 Beaut
30分以内に結果が出る高度なSEOテクニック ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOの施策は数あれど、施策の効果が反映されるまではある程度の期間が必要となる場合がほとんどです。 今回の記事はFAQとQ&Aのリッチリザルトについての記事となりますが、たしかにこの施策であれば、効果が反映されるまでの期間は比較的短いと言えるでしょう。ニール・パテル氏いわく、「30分以内で結果が出る」とのことですが、果たしてその内容はいかに。 実装における注意点や、構造化データのテンプレートまで提供されており、非常に興味深い記事となっております。 私はとあるSEOの新しい施策に取り組んでいる。そして、その施策は新しいサイトであろうが、古いサイトであろうが、効果的な施策となっている。 あなたのサイトがほとんどリンクを獲得していなくても、効果が得られる施策だ。 この施策の最も優れている点は、他のあらゆるSEOの施策と異なり、結果を得るまでに数ヶ月も数年間も必要としない点だ。実質的には、30分以
Googleのジョン・ミュラー氏による、57のSEOについてのアドバイス - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOの情報は日々、誰かが、どこからか発信しておりますが、Googleからのアナウンスは特に注意して追っていきたいものです。特に、ジョン・ミュラー氏は、Q&A動画やTwitterなどで有益な情報を発信してくださっています。今回の記事は、ジョン・ミュラー氏によるアドバイスの中でも特に重要なものをまとめたSearch Engine Journalの記事を紹介いたします。 この記事は、Googleのサーチ・アドボケートのジョン・ミュラー氏によるアドバイスの総まとめである。これらを参照し、ぜひ、あなたのSEOに関する知識に磨きをかけていただきたい。 Googleのサーチ・アドボケートとして、ジョン・ミュラー氏は多くのSEOに関するアドバイスを共有してくれている。その量は、全てを把握することに困難が生じるほどだ。 毎週、ミュラー氏は、SEOの担当者に手を差し伸べており、Q&Aセッションで多くの質問に
Railsアプリの開発環境を速くするための調査 その1 - gemの読み込み時間 - アジャイルSEの憂鬱
その1って書いたけど、続くかは不明。 今回は使っているgemの読み込み時間を測ってみた。 Benchmark を仕込む config/application.rb でgemを読み込む前に Kernel.require を上書きして、計測する。 +require 'benchmark' +$result = {} +Kernel.singleton_class.prepend(Module.new do + def require(feature) + ret = nil + $result[feature] = Benchmark.realtime { ret = super } + ret + end +end) Bundler.require(*Rails.groups) +$result.sort_by { |_, t| -t }.take(20) + .each { |featur
Webサイトリリース前に確認すべきSEO内部施策10項目をご紹介！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作事業部WebディレクターのZIMAです。 みなさん、SEO内部施策やってますか？ やっていないわけないですよね。しかし「どこまでやってますか」と聞かれると……困っちゃう人多いのではないでしょうか。 実は自分もどこまでやればいいんだろう？ と思って、我らがづやさんに聞いてみたところ「ふむふむ、それなら、 ちょうどいいの作ってるから、勉強がてらZIMAがつくってみてよ」と、ひょんな流れから私がLIGのSEO内部施策チェックリストを作成することになりました。 せっかくなのでブログにして自分の学びをみなさまに共有したいと思います！ そもそもSEO内部施策ってなんだ？ Webサイトの中身をGoogleなどの検索エンジンに正しく伝えたり、ユーザーがストレスなく利用できるようユーザビリティを向上させるための施策のことです。 世界中のWebサイトをクローリングしているのは簡単に言えばロボッ
コーディング後や納品時に確認する62のチェックリストUpdate2024.02.07Release2023.03.17Development Tips HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Webデザイン制作中に使用している、コーディング後や納品時に確認すべき62項目のチェックリストを紹介します。 このチェックリストは、Webサイトの品質基準を定め、品質を維持することを目的としています。 感覚的に確認すると見落としが発生する可能性が高いため、私は常にチェックリストを参照しながら確認しています。 また、このチェックリストを使用して表示確認を行い、それをクライアントに提出することで、安心感を与えることもできます。 クオリティの高いWeb制作体験を提供するために、参考にしていただければ幸いです。 使い方このチェックリストは、コーディ
こんにちは、モカリーナです。 この記事は広島レモン鍋についての紹介です。 ここのところ、冬なのにずーっと雨予報でまるで梅雨みたいですね。 でも今朝はパーッと太陽が降り注いで、とても温かでした。 おこたでポカポカと居眠りしているモカリーナですが、このままでは胴回りが立派に成長するばかりなので、ここのところ心がけていることがあります。 一つ目は散歩やジョギングをすること。 そしてもう一つは食事にお野菜をたっぷり摂ることです。 元気の素だ！肉肉〜♬ではなく、野菜〜そして魚もね、に変えてみてます。 今回はお土産にいただいた瀬戸内「広島レモン鍋の素」を使ったお鍋。 広島レモンと塩麹のさっぱりお鍋。 どんなお味なのか食べるのが、とても楽しみ〜(*´꒳`*)♪ 瀬戸内「広島レモン鍋」 広島はレモンが有名でレモンを使ったお土産もたくさん出ています。 広島レモンは瀬戸内広島レモンとも言われています。 瀬戸内
Real World HTTP 第3版
本書はHTTPに関する技術的な内容を一冊にまとめることを目的とした書籍です。HTTPが進化する道筋をたどりながら、ブラウザが内部で行っていること、サーバーとのやりとりの内容などについて、プロトコルの実例や実際の使用例などを交えながら紹介しています。さまざまな仕様や実例、またGoやJavaScriptによるコード例を紹介しながら、シンプルなHTTPアクセスやフォームの送信、キャッシュやクッキーのコントロール、SSL/TLS、Server-Sent Eventsなどの動作、また認証やメタデータ、CDNやセキュリティといったウェブ技術に関連する話題を幅広く紹介し、いま使われているHTTPという技術のリアルな姿を学びます。 第3版では、より初学者を意識した導入や、スーパーアプリなどプラットフォーム化するウェブに関する新章を追加。幅広く複雑なHTTPとウェブ技術に関する知識を整理するのに役立ち、また
本連載では第一線のPerlハッカーが回替わりで執筆していきます。今回のハッカーは白方健太郎さんで、テーマは「実践Fediverse」です。 本稿のサンプルコードは、WEB+DB PRESS Vol.114のサポートサイトから入手できます。 Fediverse──非中央集権型ソーシャルネットワーク 2017年春に日本でブームとなったMastodonが構成するような非中央集権型ソーシャルネットワークは、Fediverseと呼ばれます。Fediverseは、中央に全体を制御するサーバがおらず、各サーバが連合と呼ばれるゆるいネットワークを構成することが特徴です。 本稿では、Fediverseに参加するために最小限実装する必要がある機能と、Perlにおける実装方法を説明します。 Fediverseを構成する仕様群 Fediverseは複数の仕様を組み合わせることで実現されています。本節では、それぞ
【ブログ運営】「パンずリストの問題」の3つの対策について
この記事は「パンくずリストの問題」の3つの対策について書いています。 こんにちは、モカリーナです。 独自でカスタマイズしたパンくずリストを貼り付けた方に「パンくずリストの問題の」警告メールが届いていました。 Googleサーチコンソールで調べてみると、問題になっている「警告あり」のURLは日増しに増えていました。 今のところ、検索順位に影響が出ると言う情報はなく、ページも引き続き有効という事です。 Googleからのメールには「検索結果での表示に影響がある場合がございます。」とあります。 クリック率にも影響する可能性がありますので早めに対応する方がいいかもしれません。 ３つの対策の中でモカリーナができそうなのは、独自で貼り付けたパンくずリストのカスタマイズを外すことでした。 そこでアドセンスにも関係あるのかなと思い、パンくずリストを外したのですが 朗報が…♡ カスタマイズしたパンくずリスト
ブロックチェーンやいわゆる「Web3.0（Web3）」、はたまたジャック・ドーシー氏が提唱する「Web5」まで、非中央集権をうたう様々な概念が乱立している。そのいずれにおいても重要な機能として語られることが多いのが、ユーザー自らIDや属性を管理できる分散ID （Decentralized Identity）であり、その主要要素とされる分散識別子（Decentralized Identifier、DID）である。 政府や大手企業に頼らず誰もが自身のIDを持てるという自己主権（Self-Sovereigen）IDとともに語られることが多いDIDだが、ブロックチェーンの登場とともに突然出てきたわけではない。その背景には少なくとも20年にわたる歴史がある。本稿ではその歴史をたどることにより、DIDの何が新しいか、また、DIDに何が欠けているか、そして今後の展望を考察する。 DIDとは何か DIDは
[レベル: 中級] モバイル検索結果にサイト名を表示する機能を Google は正式に導入しました。 関連する技術ドキュメントも検索セントラルサイトに公開しています。 こちらのキャプチャのように URL の上にサイト名が表示されます。 この記事では、モバイル検索のサイト名表示に関して、僕が個人的に特に重要だと感じた内容を解説します。 日英ほか 4 か国語で導入 モバイル検索の結果で URL の上にサイト名を Google が表示し始めていることを 9 月初めにこのブログで紹介しました。 このときはテスト機能なのか正式機能なのかがはっきりしなかったのですが、今は正式な機能として導入されています。 次の 4 言語のモバイル検索でサイト名が現状では表示されます。 日本語 英語 フランス語 ドイツ語 グローバルではなく言語を限定して公開した機能に、日本語が含まれているのは嬉しいですね。 サイト名を
データセットダウンロード | MADB Lab
データセットについての説明はこちらを御覧ください。 マンガ マンガ単行本 json-ld (39.4MB) turtle (35.8MB) マンガ雑誌各号 json-ld (6.8MB) turtle (6.3MB) マンガその他 json-ld (359KB) turtle (344KB) マンガ単行本シリーズ json-ld (14.2MB) turtle (13.0MB) マンガ雑誌 json-ld (423KB) turtle (400KB) マンガ雑誌掲載履歴 json-ld (2.1MB) turtle (1.9MB) マンガ雑誌内容細目 json-ld (23.6MB) turtle (21.3MB) マンガ所蔵 json-ld (18.1MB) turtle (17.3MB) アニメ アニメテレビ番組 json-ld (8.7MB) turtle (8.2MB) アニメビデ
[レベル: 上級] 構造化データが今よりも簡単になっていくことはなく、むしろさらに複雑で難しくなっていくだろうと Google 社員が予想しています。 構造化データはさらに難解に Google が利用する構造化データの将来について、Google の John Mueller（ジョン・ミューラー）氏はオフィスアワーで次のようにコメントしました。 将来的、少なくとも近い将来にもっと多くの種類の構造化データマークアップを使うようになると私は考える。そして、さまざまな検索機能の要件という点で、おそらくもっと複雑になっていくだろう。検索結果での装飾的な機能もそうだし、たしか Google アシスタントの読み上げ機能なども現状では多分に構造化データに依存している。 構造化データの分野はもっと拡大していくだろうから、さらに多くのマークアップが登場してくると予想する。新しい構造化データが出てくると、実装や
The product https://joinmastodon.org Mastodon is a free, open-source social network server based on ActivityPub where users can follow friends and discover new ones. On Mastodon, users can publish anything they want: links, pictures, text, and video. All Mastodon servers are interoperable as a federated network. Open source The project is open source at https://github.com/mastodon/mastodon License
2020/05 W3C 活動概要 (日本語版)
このレポートは、2020/05に行われたW3C 諮問委員会総会 (W3C 会員限定ページ) 向けに用意されました。 同時に公開された2020/05 W3C 現状 (翻訳はありません) も参照ください。前回のバージョンは2019/09 版活動概要 (英語版)になります。 このレポートの更新版は最新版をご参照ください。 (訳注: 一般向けに原版にはない説明のリンクや追記を入れている部分があります。) オリジナルの英語版に加え、簡体字中国語翻訳も低提供されています。 概要 このレポートはすでにウェブで実現されている領域についての拡張や、 ウェブ技術の拡張・強化のための技術革新に関する最近の活動の概要です。 インターネットについてのコア技術の上に構築されたウェブが、科学的な協働や発見を加速しつづける、家族・友人をつなぐ場になる、オンラインで学習し技術を高める手段になる、活発なビジネスを行う、などの
最近 ID 界隈で話題になっているトピックとして、デジタルIDウォレット(DIW) というコンセプトがあります。これは、身分証、運転免許証や、銀行のキャッシュカード、さらにはお店のポイントカードまで、あらゆる本人のアイデンティティに関するデータを、スマホアプリに保存し、必要に応じて、必要な情報だけ、必要あれば複数をまとめて一度に、提示できるというコンセプトです。 話題になっている背景、必要となる技術、欧米の動きなど、２０２３年１２月時点での私の理解をまとめました。 明確なソースがある情報は、極力ソースとなるURLを添付しています。 また、一般論としてここに記載する情報については、国内外の多くの識者の方のお話を、直接的、間接的に伺う中で、私の中で咀嚼、消化した内容となっております。ここの皆様のお名前は略させて頂きますが、御礼申し上げます。それでも、本ブログの内容に誤りがあれば、すべて私の責任
構造化データとは、Webページの構造を検索エンジン（Google）により分かりやすく伝えるためにHTMLにマークアップする専用のコードのことです。 この構造化データは、あらかじめ「schema.org」で定義されてる専用のプロパティ（属性）とバリュー（属性値）を用いてHTMLにマークアップします。 構造化データをマークアップ（構造化マークアップ）すれば、クローラーがコンテンツ内容を認識しやすくなるので、その分Webページ（ブログ記事）のインデックスが促進されます。 そうなれば、Googleに評価されやすくなるので、SEOの良い効果が見込めるでしょう。 一方、構造化データを記述しなければ、クローラビリティが上がりません。 そうなれば、クローラーにおけるコンテンツの理解のしやすさが促進できないので、その分Googleから評価されづらくなるでしょう。 こうした良くない状況を回避する為に、構造化デ
『インハウスSEOで意識していること』
久々の更新は珍しく、インハウスSEOについて書いてみたいと思います。 個人的にはアメブロやABEMAをはじめ本当に数多くのインハウスSEOを経験させてもらえました。 そのどれもが決して褒められた成果を出せず、SEOの成果が出せなかったからクローズさせてしまったサービスは10や20ではおさまらないと思います。 SEOという領域に全責任を持ち、サービス全体にも一定以上の責任を負う状態でクローズさせてしまった数としては間違いなく弊社で一番多いと思いますし、下手したら日本でも一番多いかもしれません。 そんな失敗だらけの私がインハウスにおいて大切だと思うことをいくつか記してみたいと思います。 これは、これから私と一緒にインハウスのSEOチームで活躍してくれる後輩たちへのメッセージでもありますので対象者は必ず読んでください笑 インハウスのSEOでは、SEOの知識や技術以上にプロデューサーやディレクター
WordPressでホームページ作成講座ワードプレスを使えば、ウェブサイトの構築は簡単に出来ますが、インストールをした直後というのは、どこから手を付けて良いのか分らないという初心者の方も多く見受けられます。テーマのインストールや設定などを中心とした情報配信をしてます。 Simple Days は無料のレスポンシブ WordPress ブログテーマです。訪問者は、様々なデバイスを使っています。 私はモバイルファーストを第一にデザインしました。 そのためスマートフォンのユーザビリティを向上させています。 もちろん、他のデバイスも反応します。さらにカスタマイザーでデザインを変更可能です。 Google フォントは800種類以上。 右、左のサイドバーか無し。Gutenberg に対応。現在日本語の翻訳に対応しています。 カスタムホームページは投稿のスライドショーを表示することができます。 プラグイ
ワードプレステーマシリーズ172回目 Simple Days は無料のレスポンシブ WordPress ブログテーマです。訪問者は、様々なデバイスを使っています。 私はモバイルファーストを第一にデザインしました。 そのためスマートフォンのユーザビリティを向上させています。 もちろん、他のデバイスも反応します。さらにカスタマイザーでデザインを変更可能です。 Google フォントは800種類以上。 右、左のサイドバーか無し。Gutenberg に対応。現在日本語の翻訳に対応しています。 カスタムホームページは投稿のスライドショーを表示することができます。 プラグインの YAHMAN Add-ons を使用すると、ページビュー、Google アドセンス、アナリティクス、SNS のリンク、プロフィール、目次、関連記事、通知ボックス、サイトマップ、SEO、JSON-LDを使用した構造化データ、OG
リッチリザルトに使われなくても構造化データをマークアップすべき？ リッチリザルト表示は1ページ目だけ？ Google社員が構造化データの質問に回答
[レベル: 上級] Google の Gary Illyes（ゲイリー・イリェーシュ）氏が SEMrush のインタビューを受けました。 テーマは構造化データです。 インタビュー記事の最後には、Twitter で募集した質問への回答も掲載しています。 インタビューそのものよりもこちらのほうが（僕には）参考になったので共有します。 構造化データについてのツイッター民からの質問とその回答 Q. ページ間の参照を Google は認識するか？ A. 別々のページの間でのエンティティの参照も Google は考慮に入れる。 ※すずき補足: 参照とは、たとえば JSON-LD なら @id でオブジェクトを関連付けること。同じページでのマークアップを関連付けることが多いが、別のページでも大丈夫とのこと。この場合、@id の値は完全な URL で指定する。SDTT や RRT の検証では認識されないか
はじめに 本記事では、本サイトで利用しているSTUDIOというCMSでdescriptionやogp以外にも未サポートのmetaタグを設定をする方法について記しています。 まず、STUDIO とは？ ノーコードでレスポンシブなサイトが作れたり、ブログを設置できたり、複数人で同時編集を行いリアルタイムで同期がされたり、デザイナーだけでサイトが作れてしまうコーダー泣かせの優れものCMSです。 2021年6月13日時点では、STUDIOで<head>内のタグを完全に自由な設定にすることは出来ない為、GTM(Googleタグマネージャー)を利用してページが読み込まれた際に差し込まれるように設定します。 予め、STUDIOで作成したサイトにGTMが正しく設定されていることが前提となりますので公式ヘルプからGoogleタグマネージャーの連携方法 を確認してから進めます。 目的 Googleマイビジネス
This is an informal guide to help new implementers get up to speed with the ActivityPub specification (published as a W3C Recommendation) and how to build projects with ActivityPub support. Note: This is a Wiki Post that anyone can edit. Please help improve and extend this document ! Why choose ActivityPub? Why might you choose to implement ActivityPub in your project? Possible reasons include: “t
昨今、検索エンジン側での構造化データのマークアップへの対応が進んできました。 昔からあったパンくずリスト（BreadcrumbsList）は言うに及ばず、記事に対するArticleのほかに動画に対するVideo、レビューに対するReview、料理レシピに対するRecipe、イベント情報に対するEvent、また特に最近で話題になっているFAQやHowToなど様々な種類が存在します。 構造化データのマークアップを行うことで、検索エンジンでリッチな表示になり、ユーザーの流入を誘いやすくなります。 そのため、SEOの観点で言えば「対応できるページでは極力対応した方が良い」のは確実です。 しかし、どの程度の効果があるかがわからないと「どの程度の工数をかけられるか」の検討もつけられません。 CMSのテンプレートを編集してさくっと実装できるのであればそれで済みますが、運用体制上、テンプレートを編集するに
構造化データを使用して、WebサイトのE-A-Tをサポートする方法 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ 「いかにしてWebサイトのE-A-Tを高め、検索エンジン（Google）に認識してもらうか？」は、ここ数年で最も関心の高いトピックと言って良いでしょう。 特にYMYL領域において重要になるE-A-Tですが、今回は構造化データを活用してGoogleのE-A-Tの理解を助けるという内容になります。 適切に実施するにはそれなりの工数がかかるものの、実施すべき価値がある内容となっており、ぜひ参考としていただければと思います。 Googleの提唱する概念であるE-A-T（専門性・権威性・信頼性）は、近年のSEO界隈で話題になり、多くの神話や誤解の源となっている。 E-A-Tを取り巻く最も顕著な疑問と怪奇の
分散型ID ラーニングパス
Intro 分散型IDに関する情報がウェブ上に溢れており、片っ端から読んではいるけれど、なかなか理解が深まらないということもあるかと思います。私も苦労しました。（今もしています笑） 分散型IDに関する規格は、以下の図からわかるように、たくさん存在し、互いに依存したり、関係し合っています。 from Verifiable Credentials Specification Map そこで、この順番で読めば理解が深まるのではないか、というラーニングパスを作ってみました。 ※ まずはVer01(2020-12-10)。徐々にアップデートしていきます。 前提知識 JSON：開発者フレンドリーなデータフォーマット JSON-LD：データに関係性を持たせることができるデータフォーマット。データ間の関係性を可視化するセマンティックウェブなどを起点に始まった。規格が不安定かつ最新情報が反映されていないため
Google 検索上の構造化データガイドライン | Google 検索セントラル | ドキュメント | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 構造化データに関する一般的なガイドライン Google 検索の検索結果でリッチリザルトとして表示されるようにするには、構造化データが Google 検索のコンテンツ ポリシー（スパムに関するポリシーを含む）に違反していない状態にする必要があります。さらに、このページではすべての構造化データに適用される一般的なガイドラインについて詳細に説明します。Google 検索でリッチリザルトとして表示されるには、それらのガイドラインを遵守する必要があります。 ページに構造化データの問題がある場合は、手動による対策が実施される可能性があります。構造化データに関する手動による対策が実施されると、ページがリッチリザルトとして表示されなくなります。ただし、Google ウェブ検索でのページの掲載順位には影響
構造化データとは？SEOの初心者向けに基本を解説
人には、パーティー用のショートケーキのレシピや考案者、投稿日、所要時間が記されているWebページと理解できますが、検索エンジンはこの意味を正確に理解することはできません。この内容を検索エンジンが理解できる規則に従って記述したものを構造化データと呼びます。 ▽前述の内容を構造化データで記述した例 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "パーティー用ショートケーキ", "author": { "@type": "Person", "name": "ooo ooo" }, "datePublished": "2021-08-27", "totalTime": "PT90M" } </script> セマンティックWebとは 構造化データ
[レベル: 初級] パンくずリストの情報は構造化データを利用するとより確実に Google に伝えることができます。 Google の John Mueller（ジョン・ミューラー）氏は構造化データの利用を推奨しています。 Yep! If you'd like to give us information on a better breadcrumb to use, structured data would be the best way to do that. — 🍌 John 🍌 (@JohnMu) May 8, 2020 検索のパンくずリストは構造化データが優先 現在、ほとんどの検索結果の URL にはパンくずリストが表示されます。 パンくずリストを構造化データでマークアップしていない場合、Google は、自らの判断でパンくずリストを識別しようとします。 一方、構造化データを
HTMLに求められることは何か？ユーザーから検索エンジンに要求されることは、単なる文章ではなく、「意図」になりました。そのため、ウェブページを記述する基本言語であるHTMLには、 ことが求められます。 HTMLを適切に記述することで、そのコンテンツが持つ本来の意味を検索エンジンに伝えやすくなり、SEOに強力に働きます。 セマンティックとは何か？「本来の意味やユーザーが求める意図」を意識した検索のことを「セマンティック検索」といいます。現在ではランクブレインなどの人工知能を活用しながら行われています。 「意図」を意識してHTMLを記述することを「セマンティックHTML」や「セマンティックにマークアップ」などと呼びます。 せっかく作った渾身のコンテンツをより正確に検索エンジンに伝えるためには、HTMLを理解し、文法通りにマークアップすることがどうしても必要です。 HTMLマークアップのポイント
スモールビジネスのための、ローカルSEOの戦術50選＋α - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
スモールビジネスにとって重要事項の1つである、ローカルSEO。Webサイトの規模はそれほど大きくないケースが多いと思いますが、やれることが少ないかと言うと、そうではありません。サイテーション、レビュー、そしてコンテンツ。その他様々、最適化の箇所は挙げられますが、今回はそんなローカルSEOの戦術を数多くまとめたSearch Engine Journalの記事を紹介します。 オンラインでより良く検索され、ローカルビジネスをさらに前進させたいと思うだろうか？この記事で紹介する、実績のあるローカルSEOの戦術を採用し、ローカル検索での露出を高めてほしい。 ローカルで小規模、もしくは、中規模のビジネスを行っているだろうか？ そうであれば、競争がますます強まる検索結果画面において、露出を高め、他よりも目立つことが、いかに難しいことであるかを理解していることだろう。 ローカルSEOの戦略は、ローカル検索
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
Web のセマンティクスにおける Push と Pull | blog.jxck.io
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ
分散型IDに関する10の所感（2022年2月版）
Flash作品を残すために取り組んだこと - プラグイン無しでFlashを再生できるJSライブラリを採用して - ICS MEDIA
コーディング後や納品時に確認する62のチェックリスト | BUILD Journal
JSON-LDで構造化データマークアップをする書き方超入門 | Moz - SEOとインバウンドマーケティングの実践情報
塩麹とレモンでさっぱり、瀬戸内「広島レモン鍋の素」・波佐見焼の小鉢
第59回 Fediverse入門―非中央集権型SNSサーバを作ろう！（1） | gihyo.jp
W3Cが分散IDの規格を標準化、そこに至るまでの歴史を振り返る
モバイル検索結果にサイト名を表示する機能をGoogleが正式導入、構造化データでサイト名を指定可能
「構造化データはもっと難しくなる」とGoogle社員が予測、構造化データはSEOの必須スキル
Mastodon: Ruby on Rails Open Source Web App
デジタルIDウォレットとは何なのか、私見と妄想とともに - Qiita
構造化データとは？メリットや種類・マークアップ・ツールなど初心者向けに解説！｜SEOラボ
『WordPressワードプレス無料テーマ Simple Days インストールと設定・使い方』
WordPressワードプレス無料テーマ Simple Days インストールと設定・使い方
STUDIOで構造化データを追加しGoogleに正しくクローリングしてもらう方法 - ロカオプメディア
Guide for new ActivityPub implementers
構造化データマークアップが流入へ対してどの程度影響を得られたかざっくりと調べる方法 | アユダンテ株式会社
パンくずリストの情報をより確実にGoogleに伝えるために構造化データを使う
SEOに重要な全HTMLタグと構造化マークアップテンプレート