SEO

Markdown記法チートシート+ブログでの上手な使い方

9 分で読める 著者: Toolips

ブログを書いてるなら、Markdownは覚えておいて損はないです。

というか、一度使い始めたらもうリッチエディタには戻れなくなると思う。

Markdownっていうのは、テキストファイルに決まったルールで書くだけで、見出しやリスト、リンクなどの構造を表現できるシンプルな記法のこと。

マウスでツールバーをポチポチしなくていいし、WordPressのエディタが勝手に挿入する謎の <span> タグに悩まされることもない。

この記事は前半がチートシート、後半がブログで使うときのコツっていう構成にしました。

前半はブックマークしておいて、「あれ、表ってどう書くんだっけ?」ってなったときにサッと見返す用に使ってください。

基本の記法

見出し

# の数で見出しレベルが決まります。

1個で H1、2個で H2、最大6個まで。

# のあとにスペースを入れるのを忘れがちなので、気をつけてくださいね。

# 記事タイトル
## セクション
### サブセクション

太字・斜体・打ち消し

太字は **テキスト**、斜体は *テキスト*、両方同時なら ***テキスト***。打ち消し線は ~~テキスト~~。インラインのコードはバッククォートで囲んで `code`

日本語の文章だと斜体はあまり使う場面がありませんが、太字を強調したいときに便利です。

リンクと画像

リンクは [表示テキスト](URL) の形。画像はその先頭に ! を付けるだけ。

[Toolips](https://toolips.net/)
![スクリーンショット](screenshot.png)

画像の [] の中に書くのが代替テキスト(alt属性)。

これを空にしてる人がすごく多いんですが、ちゃんと書いたほうがいいです。

スクリーンリーダーが読み上げてくれるし、Googleの画像検索にも引っかかりやすくなります。

手間はほとんどかからないのにSEO効果があるポイントなので、サボらずに書きましょう。

リスト

箇条書きはハイフン - かアスタリスク *。番号付きリストはそのまま数字で。

- りんご
- みかん
  - 温州みかん
  - ポンカン
- バナナ

1. 下準備をする
2. 焼く
3. 盛り付ける

引用と区切り線

引用は行頭に >、区切り線はハイフン3つ ---

> これは引用文です。出典や補足に使えます。

コードブロック

バッククォート3つで前後を囲みます。開始行に言語名を書くと、シンタックスハイライト(色分け表示)が有効になります。

```javascript
const greet = (name) => `こんにちは、${name}さん`;
```

最近のブログサービスやCMS(Hugo、Astro、Ghost、WordPress+プラグインなど)ならほぼ対応してるので、技術系の記事を書く人は積極的に使いましょう。

表(テーブル)

パイプ | とハイフン - を組み合わせて作ります。

見た目はちょっとゴチャっとすしますが、慣れればさっと書けるようになります。

| ツール名   | 用途       | 料金 |
|-----------|-----------|------|
| Markdown  | 執筆       | 無料 |
| HTML      | 表示       | 無料 |

2行目のハイフン部分にコロン : を入れると、セル内の文字揃えを指定できます。:--- で左寄せ、:---: で中央、---: で右寄せ。ソースコード上で列幅がバラバラでも、パイプの位置さえ合ってれば問題なく表示されます。

Markdown→HTML変換
Markdownを貼り付けるだけで、CMSにそのまま使えるHTMLに変換できます。
無料で試す →

ブログにMarkdownを使う3つのメリット

1. どこにでも持っていける

Markdownファイルの実体はただのテキストファイルです。

どのOSでも開けるし、Gitでバージョン管理もできます。

今使ってるブログサービスが終了しても、記事の中身はそのまま別の場所に移せます。

WordPressのエクスポートデータを開いて「これ、どうやって他のサービスに移すんだ……」と途方に暮れた経験がある人なら、この身軽さのありがたみが分かると思いますよ。

2. 書くスピードが上がる

キーボードから手を離さずに、見出し・太字・リンク・リストを全部入力できます。

ツールバーのボタンを探してクリックして、ドロップダウンから選んで……という操作が一切なくなるから、「書く」という行為に集中できます。

実際、Markdownを使い始めてから記事を書くペースが明らかに上がったという人は多いです。

3. 記事の構造が自然に整う

Markdownには「フォントを大きくする」とか「文字色を変える」みたいな装飾機能がありません。

見た目で階層を表現したければ、見出し(##)を使うしかなし、リストで整理したければ - を使うしかありません。

つまり、Markdownで普通に記事を書くだけで、検索エンジンが理解しやすい論理構造が自然にできあがるということ。

SEOのためにわざわざ意識しなくても、正しい見出し階層やリスト構造が記法に従うだけで出来上がります。

これは地味だけどかなり大きいメリットです。

ブログで使うときに意識したいこと

ここからは、Markdownでブログ記事を書くときに知っておくと役立つ実践的なコツをまとめます。

H1は1記事に1つ

#(H1)は記事のタイトルに使って、それ以外では使わないようにしましょう。

本文中のセクション分けは、##(H2)から始めるのが基本です。

H1が複数あると、検索エンジンが「この記事のメインテーマは何?」と判断しづらくなります。

見出しレベルを飛ばさない

H2の次にいきなりH4を使う、みたいなことは避けましょう。

H2 → H3 → H4 と順番に深くしていくのがルール。

スクリーンリーダーも検索エンジンのクローラーも、見出しレベルの順序で文書構造を把握しているので、飛ばすと正しく理解してもらえません。

段落は短めに

Markdownはソースコード上で段落の区切り(空行)がはっきり見えるので、1段落が長いとすぐに気づけます。

スマホで読まれることを考えると、3〜4文くらいで段落を区切るのがちょうどいいバランスです。

内部リンクは積極的に

Markdownのリンク記法は [テキスト](URL) と書くだけなので、他のエディタより圧倒的に手軽です。

関連する過去記事やツールへのリンクを気軽に入れておくのがおすすめ。

内部リンクはSEOの評価にも直結するので、面倒がらずにどんどん張っておきましょう。

画像のalt属性は必ず書く

さっきも書いたけど、大事なのでもう一度。

![](photo.jpg) みたいに alt を空にしている記事をよく見かけますが、「何が写っている画像なのか」を一言添えるだけで、アクセシビリティとSEOの両方に効きます。

HTMLで書いた過去記事をMarkdownに変換する

すでにHTMLで大量の記事がある場合、手作業で書き直すのは現実的じゃないですよね。

変換ツールを使えば、見出し・リンク・リスト・コードブロックなどの構造はそのままに、不要なインラインスタイルだけ取り除いたきれいなMarkdownにできます。

HTML→Markdown変換
HTMLを貼り付けるだけで、Markdownファイルに変換できます。
無料で試す →

変換後は一応ざっと目を通しておきましょう。

だいたいきれいに変換されますが、複雑な入れ子のテーブルや特殊なインラインスタイルが含まれていると、たまに崩れることがあります。

1記事あたり2〜3分の確認で、ほとんどの問題は見つけられます。

初心者がつまずきやすいポイント

空行を入れ忘れる

Markdownでは、段落と段落の間に空行が必要です。

空行なしで書くと改行されず、1つの段落として繋がってしまいます。

リストや見出しの前にも空行を入れる癖をつけておくと安心です。

アンダースコアが斜体になる

URLやファイル名に含まれるアンダースコア _ が、Markdownの斜体として解釈されてしまうことがあります。

表示がおかしくなったら、バックスラッシュでエスケープ(\_)すれば解決します。

中央寄せやフォント変更はできない

Markdownに「中央寄せ」「文字色の変更」「フォント指定」といった記法はありません。

不便に感じるかもしれませんが、これは意図的な設計です。

見た目の調整はCSSに任せて、Markdownでは文書の構造だけを書く。

この役割分担がはっきりしているからこそ、Markdownで書いた文書はどこに持っていっても崩れにくいんです。

まとめ

Markdownは覚えることが少ないわりに、一度身につけたらずっと使えるスキルです。

1時間も触ればだいたいの記法は頭に入るし、1週間も使えば「リッチエディタにはもう戻れない」と感じるようになるはず。

このページをブックマークしておいて、記法を忘れたときに見返してみてください。

あとは変換ツールをブラウザのタブに開いておけば、装飾のことは気にせず、書く内容そのものに集中できるようになりますよ。

#Markdown #SEO #ブログ #ライティング