【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita
【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？HTMLSEOマークアップSEO対策HTMLLivingStandard 本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard」の4章を確認すると良いと思います！
当ブログで「CSSで実装できる」という言葉を使いますが、厳密に言うとHTMLが必要です。しかし、今回紹介するのは、HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。 かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいかもしれません。 CJSS CJSS -GitHub CJSSの特徴 CJSSのデモ CJSSの使い方 CJSSの特徴 CJSSはすべてのデータ、マークアップ、スクリプト、そしてもちろんスタイルをCSSで構築するフレームワークです。 下記ページの内容はすべて、style.cssで構築されています。もちろん、中央にあるトグルボタンもCSSです。
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
GPTが自社の情報を正しく学習するためにはWebサイトをセマンティックなHTMLでマークアップした方がよい説 | DevelopersIO
ChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。 はじめに ChatGPTについて、日々さまざまな応用が提案されています。 そのChatGPTを試用している中で、質問に対する回答が誤っていることがあります。自社の情報をWebサイトで提供している企業として、どのようにすれば、GPTがより正確な自社の情報を学習するようになるのでしょうか。 ChatGPTに質問しつつ考えてみました。 事前調査 まず、Generative Pre-trained Transformer 3 (GPT-3)について調べてみました。 WikipediaのGPT-3に関する項目では、GPT-3 の事前学習データについて
マークアップエンジニア古今東西
吉本 集 / aru inc. @tsuDoi220 コーダー、マークアップエンジニア、フロントエンドエンジニアの基準ってなんだろ？（今更） 人によって認識バラバラよね。 「HTMLコーディングがある程度できて、CMSの構築がすごく得意だけど、JSは全くわかりません」 っていう人は、どれに当てはまるのだろうか。 こういう人、結構いますよね。 2019-09-30 16:31:57 Yu Morita (yuu) @securecat @tsuDoi220 マークアップエンジニアという言葉を考えた者から言わせてもらいますと、そのむかし、HTMLの潮流はXML/XHTML、その先はRDFやOWLという世界観だったんですよね。なので、求められる素養は、HTML/CSS/JSとXMLサブセット言語すべてのほか、IA/UX/a11y/SEOやら何やらと幅広い知識体系とその経験でした。 2019-10
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
こんにちは！エイチーム引越し侍でインハウスSEO担当をしています、@tatechiです。 突然ですが、最近グーグル検索をして、「検索結果がゴージャスになってる！」と思うことはありませんか？ たとえば、「トマトパスタ レシピ」で検索したとき。 検索結果にトマトパスタの写真が出ていて、サイト名にアクセスしなくてもどんなトマトパスタを作るためのレシピがわかるようになっています。 「少し前はタイトルとディスクリプションしか出ていなかったのに…」と思うと、めちゃくちゃ豪華な検索結果になりましたよね？！ このゴージャスな検索結果のことをその名の通りリッチリザルトといいます。 これは全部、構造化データマークアップのおかげです そして近年、SEO界隈ではこの構造化データマークアップが盛り上がっています…！ 今回はエンジニアが最低限知っておくべき構造化データマークアップの基礎を紹介します。 検索エンジンのト
この記事は食べログアドベントカレンダー2020の4日目の記事です。 この記事を執筆するのは、食べログでフロントエンドチームに所属する佐伯です。 皆さんマークアップはお好きでしょうか。僕は好きです。 HTML、CSSでWebサイトが作れるのはもちろんのこと、CSSやSVGを駆使すれば、JavaScriptが必要になりそうであろう複雑なUIなども簡潔に作成出来るからです。 JavaScriptはBabelなどのおかげでIE11も比較的対応しやすいですが、マークアップはそうはいきません。Polyfillが対応していないことや、対応していたとしてもReactなどのフレームワークとの共存出来るかなど問題点があるため、IE11に合わせるしかありませんでした。 しかしながら、IE11の情勢も変わってきました。 2020年3月よりIEでYoutubeを閲覧するとアラートが表示されるようになっています。 ま
previs: 面倒なマークアップは AI にやらせる
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね？と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
Macの画像にiPadで書き込める「連係マークアップ」が便利すぎる Mac上にあるファイルにApple Pencilを使って書き込みたいときに活用できる機能 僕は撮影した写真にApple Pencilで書き込み、アイキャッチ画像として使用する機会が多い。AirDropを使い、MacとiPadでファイルを行き来させることもできるが、「連係マークアップ」を活用すればMacにある画像をiPadから直接書き込むことができる。 本記事では連係マークアップの使い方を解説する。 画像ファイルをQuick Look → 連係マークアップ 連係マークアップを利用したい画像を選択肢、Quick Lookする。右クリックし、表示されるメニューの中にある「クイックアクション」から「マークアップ」を選んでも良い。 Quick Lookし、右上にある「マークアップ」ボタンをクリックする。 マークアップ画面に切り替わる
オジサン、iPad Proでの写真編集が楽しすぎてM2 iPad Proに買い替えたくなる - 漂うマークアップエンジニア
オジサンの趣味は写真撮影で、複数のミラーレスカメラを所有している。 撮影データは基本RAWで撮影し、Adobe Lightroomで現像を行なっているが、ある時iPad Proで現像してみたところ、非常に楽しくてすっかり病みつきになってしまった。 今回はそんなオジサンのiPad ProでのRAW現像体験をお伝えするとともに、さらに良い現像体験を味わうべく、新型M2 iPad Proを買うかどうか悶絶する様を記しておきたい💦 iPad ProでのRAW現像の何が楽しいかというと、タッチパネルを使った操作にある。 オジサンの使っている、現像アプリがAdobe Lightroom CCである。 Lightroomがクラシックとクラウド対応のCCがあり、iOS対応しているのはCCの方である。 www.adobe.com 露出補正のパラメーターやヒストグラムをApple Pencilや指で調整する
【はじめに】 フロントエンドエンジニアの kalbeekatz です。話の背景となる自分の経歴から紹介させてください。 Web制作会社でマークアップエンジニアとして HTML/CSS/JavaScript（主に jQuery）で静的な Web サイトの構築をしていました（2年間）。 その後、株式会社ニジボックスに転職し、フロントエンドエンジニアとして上記に加え、React で動的な Web サービスを構築してきました（2年半）。 この5年間を通して自分がマークアップエンジニアからフロントエンドエンジニアになるまでを振り返り、それぞれの違いや求められること、やりがい、道のりなどをまとめました。 これからエンジニアを目指す方、マークアップ以外のエンジニアリングに興味を持っている方などの参考になれば幸いです。 マークアップエンジニアとフロントエンドエンジニアの違い 「マークアップエンジニア」「フ
SEO対策の、次の目玉？！【Google構造化データ・マークアップ研究②】SEO実装のためのツールとメンテ作業 - ペンギン男の生活@気になるのは、海外SEOとYOGAとお天気
こんにちは、ペンギン男です🐧 珍しく受け身でなく、主体的に不明な点の解明に乗り出した今回。しかし、それにしてもGoogleはそういったニーズにも応えられるように、きちんと情報発信を怠らないものですね💦 このトピックに関する、前回の記事↓ ———————————————————————— 【目次】 おさらい 構造化データテストツール 構造化データのメンテナンス サーチコンソール上で「このサイトでは構造化データが見つかりません」と表示される場合の、アルアル 最後に ———————————————————————— おさらい 構造化データとは 検索エンジン理解促進対策 リッチスニペットの充実にもつながる ウェブページ上、どういう構造のコンテンツになっているかをより明確に表示させる機能 「構造」「マークアップ」というくらいなので、「HTML」を意識したもの なので、求人情報などのコンテンツには
構造化データで複数アイテムをマークアップする際のガイドラインをGoogleが更新。ネストするか@idで関連付けする
[レベル: 上級] 1 つのページで、複数のアイテム（タイプ）を構造化データでマークアップする際の注釈を構造化データのガイドラインに Google は追加しました。 関連するエンティティのタイプはネストするかもしくは @id で関連付けます。 一方で、独立したエンティティは個別にマークアップできます。 複数タイプをネスト たとえば、解説動画付きのレシピの構造化データは次のようにマークアップできます。 <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "バナナブレッドのレシピ", "description": "とっても美味しいバナナブレッドのレシピ", "image": "http://example.com/banana-bread.jpg
「このボタンを押せばメニューが出現する」という意味を持つこの UI は、そもそもこれをボタンと認識できる人がどれだけいるのか？が議論になってきましたが、今でも賛否両論あるものの、一定レベルに浸透したことで多くのアプリケーション・Webサイトで見られるようになりました。 Web サイトで採用するメリットは PC のように画面の大きなデバイスであれば、コンテンツの横やページ上部にメニューを表示する領域確保が容易です、しかしスマートフォンのような画面の小さなデバイスだとそうもいきません。 その問題を解決するためにハンバーガーメニューが発案されたわけです。 Apple マークアップをどうするか 三 をまとめるタグをどうするか。候補として上がるのは buttonadivul あたり思いつくのですが button タグは純粋にボタンのタグa タグはクリックを持ちますが、リンクを作成するものなのでボタン
web制作の実務経験でしか知ることができない注意点を記事にしました。 こちらは有料にて販売いたします。 実務経験がないマークアップエンジニアが事故るのは自己責任なので、私の知ったことではありません。 学習不足な本人が悪い。 でも、それでは依頼する側が可哀想。 二度と発注はしたくないでしょう。 この記事ではマークアップエンジニアが、事故る前に知っておかないとまずいことをまとめています。 自分も最初は知らなかったことなので、下記の方は参考にしてもらいたいです。 対象の人 コーディングはわかるけど実務経験がない コーディングの実務のフローを知りたい方 副業で事故りたくない方 Progateをやったけど、次に何をすればいいかわからない このような方を対象に書いています。 逆に、下記のような方は対象外なのでそっとブラウザを閉じてください。 対象外の人 フロントエンドエンジニアとして、すでに企業で活躍
tl;dr ChatGPT の画像入力でラフスケッチから簡単なマークアップを生成させることができる 生HTML はプロンプトとして弱い。 typescript(tsx) や headless-ui でコンテキスト情報を足すといい感じになる。 ChatGPT にスクリーンショットを入力し、 ChatGPT に puppeteer に操作させれて E2E 生成を自動化したり無限の猿BOT が作れるのでは。 マークアップエンジニアではなく、プログラマ視点でCSSを生成させたい。ロジックはこちらが考えるから、それに合わせたものを作ってくれ、という感じ。 まだ figma 連携とかは考えておらず、雑なラフを食わせたり、一般的なパターンを生成してもらえれば良いと思って試している。 とか考えてるうちに、うちの ChatGPT に画像入力が来た。まだAPIが来てないが、これが来ることを前提にマークアップ補
適合性チェックマークアップは、有効なコードを記述する必要があります。これは、各ユーザーエージェントを介してウェブページを壊さないという標準の約束を守るために重要なことです。Markuplintは、HTML StandardやWAI-ARIAなどの仕様を踏まえた上で、適合性チェックを行うことができます。 ハウスルールに利用するプロジェクトや組織でハウスルールがある場合があります。方針や管理手法に基づいてチェックすることができます。設定次第で、アプリケーションをよりアクセシブルで、より安全で、より高いパフォーマンスを得ることができ、高い品質を得ることができます。
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
構造化データとは、Webページの構造を検索エンジン（Google）により分かりやすく伝えるためにHTMLにマークアップする専用のコードのことです。 この構造化データは、あらかじめ「schema.org」で定義されてる専用のプロパティ（属性）とバリュー（属性値）を用いてHTMLにマークアップします。 構造化データをマークアップ（構造化マークアップ）すれば、クローラーがコンテンツ内容を認識しやすくなるので、その分Webページ（ブログ記事）のインデックスが促進されます。 そうなれば、Googleに評価されやすくなるので、SEOの良い効果が見込めるでしょう。 一方、構造化データを記述しなければ、クローラビリティが上がりません。 そうなれば、クローラーにおけるコンテンツの理解のしやすさが促進できないので、その分Googleから評価されづらくなるでしょう。 こうした良くない状況を回避する為に、構造化デ
こんにちはマークアップエンジニアの森田です。 今回は弊社メンバーが HTML マークアップをより良くするためにやっていることを紹介します。 昨今のマークアップはただ html を書くだけではなく、文書構造、アクセシビリティ、レンダリングの高速化、最適なクラスの命名（CSS設計）などなど配慮することが沢山あります。 また、React や Vue を使ったコンポーネント化が当たり前になっていきてる現在において、正しいマークアップはより重要なファクターだと考えています。 弊社ではマークアップの向上を常に考え、以下の様なことに取り組んでいます。 レビュー弊社は基本的にどの案件も PullRequest ベースで開発を行っており、レビューが必ずされます。 その際にマークアップについてもやり取りが活発にされています。 誰かの目が入ることでマークアップのより良い方法や変えるべき箇所など気付かされることが
SEO対策の、次のセンター候補！？【Google構造化データ・マークアップ研究①】Google発信の情報では目立っています💦 - ペンギン男の生活@気になるのは、海外SEOとYOGAとお天気
こんにちは、ペンギン男です🐧 「構造化データ」。なんとも大げさなネーミング💦とはいえ、それなりにGoogleからの情報発信に接点の頻度を維持していると、こうした「圧」の強いワードにも、やたらと腰がひけることはなくなりました😊どうやら、検索エンジンが理解しやすいようにデータを再構成することのようです。 ちなみに、最近、このワードが引用もしくはフォーカスされているケースをよく見ます。検索エンジン最適化スターターガイド↓でもそうですし Googleが運営するウェブマスター向けYouTube↓でも同様。 今や、理解が必須のアイテム化した？？ いつもは、個別のテーマに特化するというよりは、Google発信の情報や書籍の内容を総花的にに紹介していくという形をとっていました。しかし、今回は珍しく明快な課題が見つかりました😊ついては、いつもと違って、この「構造化データ」を、ある程度見当がつくまで深
リッチリザルトに使われなくても構造化データをマークアップすべき？ リッチリザルト表示は1ページ目だけ？ Google社員が構造化データの質問に回答
[レベル: 上級] Google の Gary Illyes（ゲイリー・イリェーシュ）氏が SEMrush のインタビューを受けました。 テーマは構造化データです。 インタビュー記事の最後には、Twitter で募集した質問への回答も掲載しています。 インタビューそのものよりもこちらのほうが（僕には）参考になったので共有します。 構造化データについてのツイッター民からの質問とその回答 Q. ページ間の参照を Google は認識するか？ A. 別々のページの間でのエンティティの参照も Google は考慮に入れる。 ※すずき補足: 参照とは、たとえば JSON-LD なら @id でオブジェクトを関連付けること。同じページでのマークアップを関連付けることが多いが、別のページでも大丈夫とのこと。この場合、@id の値は完全な URL で指定する。SDTT や RRT の検証では認識されないか
昨今、検索エンジン側での構造化データのマークアップへの対応が進んできました。 昔からあったパンくずリスト（BreadcrumbsList）は言うに及ばず、記事に対するArticleのほかに動画に対するVideo、レビューに対するReview、料理レシピに対するRecipe、イベント情報に対するEvent、また特に最近で話題になっているFAQやHowToなど様々な種類が存在します。 構造化データのマークアップを行うことで、検索エンジンでリッチな表示になり、ユーザーの流入を誘いやすくなります。 そのため、SEOの観点で言えば「対応できるページでは極力対応した方が良い」のは確実です。 しかし、どの程度の効果があるかがわからないと「どの程度の工数をかけられるか」の検討もつけられません。 CMSのテンプレートを編集してさくっと実装できるのであればそれで済みますが、運用体制上、テンプレートを編集するに
GoogleやYahooの検索エンジンを利用したときに、検索結果の上部にレシピや求人情報が掲載されているのを見たことがあるでしょうか。これらが検索結果の上位に表示されるとアクセス数を増やせるため、とても有効な施策です。 そこでこの記事では、「構造化マークアップ」とは何なのか、どんな効果が期待できるのかを解説します。くわえて、実装方法や検証方法についてもまとめていますので、構造化マークアップについて詳しく知りたいWeb担当者の方は、ぜひ参考にしてください。 SEOで順位が上がらない担当者様へ 実力のあるSEOコンサルタントが本物のSEO対策を実行します。 SEO会社に依頼しているが、一向に検索順位が上がらない・・・。 SEO対策をSEO会社に依頼していてこのようなお悩みはありませんか？SEO対策はSEOコンサルタントの力量によって効果が大きく変わるマーケティング手法です。弊社では価値の高いS
DBML - データベース構造用マークアップ言語
データベースはアプリケーションのコードとは別で管理されることが多いです。構造の変更をコードで書けるようになっていますが、ER図を見ようと思うと専用のツールを使ったりします。 今回は別な仕組みとしてDBMLを紹介します。データベース構造を現すのに使うマークアップ言語です。 DBMLの使い方 左側がDBMLです。右側にビジュアル化した内容が表示されています。この表示は dbdiagram.io によるものです。 右側でリレーションを変更すると、DBMLにも反映されました。 DBMLはTable、RefそしてEnumを使ってデータベース構造を表現します。作成したDBMLのファイルはSQLへの変換が可能で、逆にSQLからDBMLも作成できます。JavaScriptでオブジェクトとして読み込むこともできるので、システム連携にもよさそうです。 DBMLはJavaScript製のオープンソース・ソフトウ
Yoshimasa Niwa on Twitter: "多分知られていないiOSの秘密機能なんですけどね、Safariで印刷する画面でプリントを長押しするとPDFで保存できるんですよ。さらに共有のマークアップでなにも書かずに完了を押すと見ているページ全体が縦長のPDFで保存できるんです… https://t.co/JB464D40Kw"
多分知られていないiOSの秘密機能なんですけどね、Safariで印刷する画面でプリントを長押しするとPDFで保存できるんですよ。さらに共有のマークアップでなにも書かずに完了を押すと見ているページ全体が縦長のPDFで保存できるんです… https://t.co/JB464D40Kw
HTMLに求められることは何か？ユーザーから検索エンジンに要求されることは、単なる文章ではなく、「意図」になりました。そのため、ウェブページを記述する基本言語であるHTMLには、 ことが求められます。 HTMLを適切に記述することで、そのコンテンツが持つ本来の意味を検索エンジンに伝えやすくなり、SEOに強力に働きます。 セマンティックとは何か？「本来の意味やユーザーが求める意図」を意識した検索のことを「セマンティック検索」といいます。現在ではランクブレインなどの人工知能を活用しながら行われています。 「意図」を意識してHTMLを記述することを「セマンティックHTML」や「セマンティックにマークアップ」などと呼びます。 せっかく作った渾身のコンテンツをより正確に検索エンジンに伝えるためには、HTMLを理解し、文法通りにマークアップすることがどうしても必要です。 HTMLマークアップのポイント
新人プログラマーがセマンティック・マークアップを学習してわかったこと 公開日 : 2021.06.15 最終更新日 : 2022.10.05 コーディング はじめにこんにちは！AndHAエンジニアのタイガです！ Webコーダーとして働き始めて一ヶ月、コーダーとしての課題が見えてきた今日この頃、、、 プチパニックの連続で挫けそうになりながらも日々精進しています。 そんな私が「働く前にちゃんと意識して勉強すればよかった！」と後悔、反省した事例の一つである、セマンティックなマークアップについて今回は書いていきます！ 同じ境遇の皆さん、現在絶賛勉強中の皆さん！これからやるぞー！って方、「HTML/CSSでただコードを書いてデザインする」ことから私と一緒に卒業しましょう！ そもそも「セマンティック」とは？そもそも最初に、セマンティック（セマンティクス）って？ですよね。 勉強中の方であればなんとなく知
WordPress で schema.org の FAQPage を実装し、FAQ リッチリザルトを表示させる方法を解説します。 プラグインを使わず、JSON-LD でマークアップした構造化データをカスタムフィールドで出力する方法です。 2023 年 8 月に仕様が変更され、一般的なサイトで FAQ リッチリザルトは表示されなくなりました。マークアップを残しておいても問題ありませんが、今後は対応する意味がないと思います。 今後、よくある質問（FAQPage 構造化データ）のリッチリザルトは、よく知られていて信頼のおける政府ウェブサイトおよび医療ウェブサイトに対してのみ表示されます。 HowTo とよくある質問のリッチリザルトにおける変更 | Google 検索セントラル ブログ | Google for Developers FAQ リッチリザルトとは FAQPage の構造化デー
10分でわかる構造化マークアップ - Qiita
<h1 itemscope itemtype="http://schema.org/Corporation"> <span itemprop="name">株式会社アンティー・ファクトリー</span> </h1> ブラウザのきもち：h1タグ使われてるから見出しで、内容の「株式会社アンティー・ファクトリー」は会社名なんですね、とてもよくわかります😊。 構造化してあると何がうれしいのか Googleなどの検索エンジンでは、通常はmetaデータのtitleやdescriptionのみが検索結果として反映されます。 データが構造化されていると、構造化の内容に応じて検索結果をよりいい感じに表示(リッチリザルト)してくれます。 ただし、検索結果に必ずしもリッチリザルトが保証されるわけでは無いです。 構造化マークアップはあくまでブラウザにWebページの内容がどういうものかを伝えているだけで、それらを
こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。 最近はYouTubeなどでも発信しています。 普段はWordPress構築や静的サイトコーディングをメインとしているのですが、 最近機会に恵まれまして、Nuxt.jsのマークアップ部分（ロジック以外）を担当しております。 結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、 マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識をまとめました。 Nuxt.jsはweb制作業界にも少しづつ浸透してきているので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。 俺の屍を超えていけ Nuxtってなんなの？ Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライ
AdventCalender2020「ちょっとした工夫で効率化！01【PR】パソナテック」の19日目です。日付が変わってしまいましたが、寝てないのでまだ19日ということで良しとします。 （テーマは、ちょっとした工夫ですが、「ちょっとした工夫」に収まってないかもしれないので、工夫の導入記事ということで、予めご了承ください。） エディタをカスタマイズや拡張機能を作ることで、日常の作業効率が上がるのは、デベロッパーの皆さんには当然の発想です。また、ブラウザの拡張機能なども、Webマーケティングの業務補助をするツールなどもよく使われるかと思います。拡張機能のような小技で作業効率を上げるというのはエクセルのマクロが、そういった分野のパイオニアといったところでしょうか。 本記事で、デザインツールでの拡張機能/プラグインを作り方を紹介し、ビジネスロジックを設計しているフロントエンド開発者や、LPなどのH
スキーマ マークアップの重要性： エンティティとの関係 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
【メールマガジンのご案内】 SEOに役立つ記事の更新やセミナーのご案内をメールマガジンで行っております。 ぜひご登録ください。 メールマガジンに登録する＞＞ この記事は、Backlinkoの「Schema Markup Guide: Help Search Engines Help You」の翻訳記事になります。ウェブページに追加するスキーママークアップ（構造化データ）の重要性とその方法について解説しています。 スキーママークアップは、検索エンジンにコンテンツの内容を明確に伝え、適切な検索結果に表示させるためのコードです。スキーママークアップがSEOにどのように役立つか、エンティティ（実体）との関連性などについて紹介しています。 また、スキーママークアップの種類や、それをウェブサイトに適用する方法についても詳しく説明しています。 スキーマ マークアップは、コンテンツの内容を検索エンジンに伝
AMPページと正規ページのどちらに構造化データをマークアップすべきか？ ⇒ 両方で同じ構造化データが必要
[レベル: 上級] AMP ページを公開する場合、正規ページと AMP ページの両方で同じ構造化データのマークアップを使用する必要があります。 構造化データは正規ページだけ？ AMP ページには不要？ 次のような質問が英語版オフィスアワーで取り上げられました。 AMP の検索結果では、Google は構造化データを AMP ページ自身から取得しているのか？ それとも正規ページから取得しているのか？ 正規ページだけにしか構造化データがなくても機能するのか？ 結論を言うと、正規ページと AMP ページの両方に同じ構造化データをマークアップする必要があります。 Google は正規ページ（モバイル ファースト インデックスに移行しているならモバイルページ）をインデックス対象にし検索結果の評価に利用します。 したがって理論的には、正規ページにさえ構造化データがあれば検索に利用されるはずです。 しか
[レベル: 中級] 商品 (Product) の構造化データの機能を Google は拡張しました。 次の 2 つの拡張です。 マーチャント リスティングでの掲載 Search Console の新しいレポート マーチャント リスティングでの掲載 Product 構造化データでマークアップした商品は、一部のショッピング広告枠に掲載されるようになりました。 表現を変えると、Google Merchant Center（マーチャントセンター）経由で広告掲載していた場所に、（Merchant Center への登録なしで）商品を掲載できます。 たとえば、[ショッピング] タブの無料リスティングです。 【UPDATE (2022/11/11)】 [ショッピング] タブは対象外です。詳しくは訂正記事をお読みください。 ナレッジパネルにも掲載されます。 人気商品にも掲載されます。 ほかには、画像検索や
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マークアップを進化させる WAI-ARIA の基本
CSSだけでHTMLは一切無し！Webページを構成するすべてのマークアップをCSSで構築するフレームワーク -CJSS
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
Vite + Tailwind CSSでペライチHTMLをマークアップする
【エンジニアも最低限知っておきたい！】構造化データマークアップ入門 - Qiita
IE亡き後のマークアップを調べてみる｜食べログ フロントエンドエンジニアブログ
JSON-LDで構造化データマークアップをする書き方超入門 | Moz - SEOとインバウンドマーケティングの実践情報
Macの画像にiPadで書き込める「連係マークアップ」が便利すぎる
マークアップエンジニアからフロントエンドエンジニアになった道のりを晒す - Qiita
ハンバーガーボタンのマークアップをどうするか ｜https://wp.yat-net.com/name
実務経験がないマークアップエンジニアが実践で注意しておくべきこと | ARUTEGA blog｜アルテガブログ
ChatGPTの画像入力を使ったマークアップの自動生成とE2E自動化に関する考察
Markuplint - すべてのマークアップ開発者のためのHTMLリンター | Markuplint
主題と副題のマークアップにはhgroupを使用する – TAKLOG
構造化データとは？メリットや種類・マークアップ・ツールなど初心者向けに解説！｜SEOラボ
マークアップをより良くするためにGaji-Laboがやっていること
構造化データマークアップが流入へ対してどの程度影響を得られたかざっくりと調べる方法 | アユダンテ株式会社
構造化マークアップのSEO効果は？メリット・デメリットと実装方法 | QUERYY(クエリー)
SEOに重要な全HTMLタグと構造化マークアップテンプレート
新人プログラマーがセマンティック・マークアップを学習してわかったこと | AndHA Blog
WordPress の FAQPage 構造化データマークアップ（FAQ リッチリザルト） - Naifix
マークアップエンジニアがNuxt.js案件で必須な知識【5選】 - Qiita
JavaScriptでAdobeXDプラグインを作ってマークアップ作業を効率化 - Qiita
商品構造化データでマークアップすればMerchant Centerなしで検索結果に商品掲載できるように