コンテンツ公開キット
Webでコンテンツを公開するためのステップバイステップワークフロー
このワークフローは、記事やランディングページ、ドキュメントを公開するブロガー、コンテンツライター、フロントエンド開発者向けです。ステップを順番に進めることで、下書きからSEOとソーシャル共有メタデータが適切に設定されたデプロイ可能なHTMLファイルへと仕上げることができます。
01
Markdownでコンテンツを執筆する
HTMLタグと格闘せずに書けます。Markdownはテキストに集中させてくれ、ライブプレビューで仕上がりを即座に確認できます。
Markdownエディター
記事をここで執筆またはペーストし、変換前にライブプレビューで書式を確認します。
02
クリーンなHTMLに変換する
MarkdownをどのCMS、ブログプラットフォーム、Webサイトにも対応したセマンティックHTMLに変換します。出力はクリーンで一貫性があり、インラインスタイルや不要なラッパーdivは含まれません。
MarkdownからHTMLへ
完成したMarkdownをここにペーストして、CMSやテンプレートに直接挿入できる適切に構造化されたHTMLを取得します。
03
SEOに適したURLスラッグを作成する
URLスラッグは検索順位と可読性の両方に影響します。記事タイトルを、検索エンジンとユーザーの両方が好む小文字・ハイフン区切りのURLに変換します。
スラッグジェネレーター
記事タイトルを入力して、CMSやルーティング設定ですぐに使えるクリーンな小文字・ハイフン区切りのURLスラッグを取得します。
04
metaタグを生成する
すべてのページに適切なタイトル、ディスクリプション、ビューポート、文字セットのmetaタグが必要です。metaタグが不足していたり不適切に書かれていたりすると、検索結果のクリック率が下がります。
metaタグジェネレーター
ページタイトル、ディスクリプション、著者情報を入力して、ページのheadに貼り付けるHTMLメタタグの完全セットを生成します。
05
Open Graphタグを作成する
Twitter、LinkedIn、Facebookでシェアされたときのコンテンツの見た目を正確にコントロールします。OGタグはソーシャルカードに表示されるプレビュー画像、タイトル、ディスクリプションを定義します。
Open Graphジェネレーター
ソーシャル共有用のOpen GraphタグとTwitter CardメタタグをページのURL、タイトル、ディスクリプション、画像を入力して生成します。
06
デプロイ前にミニファイする
デプロイ前にHTMLから余分な空白、コメント、不要な文字を削除します。ファイルが小さいほど読み込みが速くなり、速いページほど検索順位が上がります。
テキストミニファイヤー
最終的なHTMLをここにペーストして、サーバーにアップロードする前に不要な空白とコメントをすべて削除します。
プロのヒント
- スラッグは公開後ではなく公開前に作成しましょう。インデックス後にURLを変更すると301リダイレクトの設定が必要になり、本来避けられた余分な作業が生じます。
- metaディスクリプションは155文字以内に抑え、そのページ固有の内容にしましょう。汎用的なディスクリプションは検索結果をスキャンする読者に無視されます。
- 公開後はソーシャルカードプレビューツールでOpen Graphタグをテストしましょう。画像URLが壊れていたり必須フィールドが欠けていたりすると、ソーシャルメディアでシェアが空白になります。
よくある質問
はい。ツールはどのCMSや公開プラットフォームにも対応した標準HTML、スラッグ、metaタグスニペットを生成します。HTMLをカスタムHTMLブロックに貼り付け、URLフィールドにスラッグを追加し、metaタグをテーマのhead部分にコピーするだけです。
ミニファイはブラウザがどうせ無視する空白、コメント、冗長な文字を削除します。結果としてダウンロードが速くなる小さなファイルが得られます。ページ速度はGoogle検索で確認済みのランキングシグナルであり、節約されたキロバイトは時間の経過とともに測定可能な効果をもたらします。
metaタグ（タイトル、ディスクリプション、ビューポート）は検索エンジンとブラウザにページについて伝えます。Open Graphタグはソーシャルプラットフォーム（Facebook、Twitter、LinkedIn）に、誰かがリンクをシェアしたときのプレビューカードの作り方を伝えます。両方が必要です：検索にはmetaタグ、ソーシャルにはOGタグ。
はい。各記事には固有のスラッグが必要です。スラッグを再利用すると前のページが上書きされる（またはルーティングの競合が発生する）ため、「post-1」のような曖昧なスラッグでは検索エンジンにも読者にもコンテンツに関するシグナルが伝わりません。
標準的なMarkdown（見出し、太字、斜体、リスト、リンク、画像、ブロック引用、コードブロック）は確実に変換されます。マニアックな拡張機能やプラットフォーム固有の構文（GitHub Flavored Markdownの表、タスクリスト）はコンバーターによって異なるレンダリングになる場合があります。出力をコピーする前に必ずプレビューを確認してください。