メタディスクリプションタグを正しく記述できていますか？

メタディスクリプション(meta description)とは、なにかをweb検索した際に記事のタイトルの下に表示される、そのwebページを100文字程度で表した「要約」のことです。

そのページがどのような内容なのかを検索ユーザーに簡単に伝える役割を担っています。

メタディスクリプションタグ自体にSEOの上昇効果はありませんが、ユーザーからのクリック率を上げるには非常に重要なタグです。

メタディスクリプションタグの適切な書き方を覚えてクリック率上昇を狙いましょう。

この記事でわかること

メタディスクリプションタグの概要と役割

メタディスクリプション(meta description)とは、なにかをweb検索した際に記事のタイトルの下に表示される、そのwebページを100文字程度で表した「要約」のことです。

Googleなどの検索エンジンでの検索結果一覧ページで活用されています。

例えば「SEOとは？」と検索した結果がこちら。

記事タイトルの下に小さい文字でこの記事の説明が書かれています。
これがメタディスクリプションタグです。

記事のタイトルを捕捉するテキストとして補助的な役割を担っています。

メタディスクリプションタグはなぜ重要？

冒頭でも触れましたがメタディスクリプションタグ自体に、Googleの検索順位を上げる効果はありません。

Googleの検索順位を決定する要素の中にメタディスクリプションタグは含まれていないということです。

女の子

「SEOに関係ないのになぜ書かないといけないの？」

メタディスクリプションタグが重要な理由は簡単です。

ユーザーが検索してたくさんのページが一覧で表示された時に

「どのページを読もうかな？」と考えます。

まずは「タイトル」をみて

その次に「メタディスクリプション」でざっと内容を把握してから読む記事を決めます。

つまりメタディスクリプションタグは、

SEO（検索順位）には直接関係はないが、
ユーザーの「クリック率」に大きな影響を与えます。

↓一番手頃なSEO対策の一つである「画像圧縮」について詳しくまとめました。

画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？

メタディスクリプションでクリック率が上がる理由

メタディスクリプションを設定するとなぜクリック率が上がるのでしょう。

メタディスクリプションに検索キーワードが入っているとそのキーワードが太文字で表示されます。

適度に狙っている検索キーワードを入れることでユーザーの興味を惹きやすくなり結果的にクリック率上昇が見込めます。

ここまでを簡単にまとめると

以上のことからメタディスクリプションタグを設置することは大切だと言えます。

メタディスクリプションタグの記述方法

女の子

メタディスクリプションタグってどこに書いたらいいの？

実際にメタディスクリプションタグを記述してみましょう。

メタディスクリプションタグは2つの記述方法があります。

それぞれ解説していきましょう。

HTMLに直接記入する方法

まずはHTMLに直接記入する方法を解説していきます。

サイトのHTMLソースのheadタグ内に記述します。

Xtmlの場合は下記のように記述します。

Xtmlではスラッシュタグ（ / ）で閉じます。

↓alt属性（代替えテキスト）はSEOに影響しますので必ず記述しましょう。

alt属性（代替えテキスト）は必要？alt属性の重要性やSEOに効果的な正しい書き方。

プラグインを使用して記述する方法

WordPressを使用している場合は

「All in One SEO」というプラグインをインストールすることで簡単にメタディスクリプションタグを記述することができます。

投稿ページ下部の「AIO SEO」設定の「メタディスクリプション」から記述することができます。

→「All in One SEO」のダウンロードはこちら

メタディスクリプションタグ記述の注意点

メタディスクリプションタグはただ記述すれば良いものではなく、いくつかのポイントを抑えて記述することが重要です。

それぞれ解説していきます。

メタディスクリプションタグは自然な文体で書く

よくある間違ったメタディスクリプションタグの書き方の一つにタグのように単語の羅列を書くというのがあります。

「iPhone 　ケース　本革　オススメ　開封　解説」

このような書き方はNGです。

あくまで自然体な文言で書くようにしましょう。

「今回はおすすめの「本革iPhoneケース」を購入したので、開封レビューとともに解説も行っていきます。」

上記のような自然な文体でないとGoogleが自動的に作成した文章が表示されてしまうこともあります。

そうなると上位表示できたとしてもクリック率が低下してしまう可能性があります。

狙っているキーワードを含める

実際に上位表示されているwebページのメタディスクリプションを見てみると

検索したキーワードが2〜4回程度使用されているのが分かります。

メタディスクリプションに検索キーワードが入っているとキーワードが太文字で表示されるのでユーザーの興味も惹きやすいです。

メタディスクリプションタグは120文字以内で書く

メタディスクリプションタグは90〜120文字以内が理想です。

こちらの記事を参考にさせてもらいます。

メタディスクリプションは一定量の文字数を超えた場合に「…」となり省略されてしまいます。

その一定量の文字数というのが以下の通りです。

このようにデバイスによっても表示できる文字数が異なります。
あらゆるデバイスにも対応できるようなるべく重要な内容は前半にまとめることを意識しましょう。

また、できる限り省略されない文字数に収めるようにしましょう。

メタディスクリプションはページごとに設定する

当たり前ですがページごとに記事の内容が違いますので、webページを新しく作成した際にメタディスクリプションも作成するようにしましょう。

Googleは各ページを「オリジナル」にするべきという方針です。

ですので、毎回同じ内容の文章をメタディスクリプションに記述するのはGoogleからもあまり好ましくありません。

毎回内容が重複するくらいならメタディスクリプションは空欄の方が良いでしょう。

まとめ；メタディスクリプションは重要！

今回はメタディスクリプション(meta description)の重要性やSEOを意識した適切な書き方などを紹介しました。

SEOには直接関係はないために軽視されがちなメタディスクリプションですが、適切に記述することでクリック率向上が見込めます。

「せっかく上位表示できたとしてもメタディスクリプションを適切に書いてないためにクリックされない」

といった状況にはなりたくないですよね。

一度、自身のwebページのメタディスクリプションを見直してみては以下がでしょうか。

The post メタディスクリプションとは？SEOを意識した適切な文字数と書き方。 first appeared on one log.

alt属性（代替えテキスト）ってご存知ですか？

ブログ作成やwebサイト制作などをしているとなんとなく聞いた事があったり見た事がある方も多いかと思います。

WordPressの投稿画面でよく「代替えテキスト」などと書かれています。

表には出ないものなのでついつい放置してしまいがちですよね。

ですが、SEO（検索エンジン最適化）において、alt属性には重要な役割があります。

この記事を読んでalt属性の重要性・書き方などの理解を深めブログやwebサイト制作に活かせるようにしましょう。

alt属性（代替えテキスト）とは？

alt属性（代替えテキスト）とはその名の通り画像の内容をGoogle（検索エンジン）に伝える際に

「画像の代わりとなるテキスト」のことで、HTMLのimg要素の中に記述されます。

Google（検索エンジン）は画像だけで内容を完全に理解する事ができません。

画像の理解ができないために評価する事ができず結果的に評価が下がってしまいます。

alt属性をしっかりと適切に入力することで、ページの内容を伝えやすくなりGoogle（検索エンジン）側に理解してもらいやすく、SEOにも有利になります。

また、音声読み上げブラウザなどでは画像ではなくalt属性に記述された内容がテキストとして表示・読み上げされます。

画像が表示できない状態であっても画像の内容を正しく理解してもらえるようにalt属性を正しく記述する必要があります。

詳しく解説していきましょう！

ハナノ

ちなみに読み方はalt属性（オルト属性）だよ！

alt属性を記述する3つのメリット

冒頭で説明したようにalt属性を入力すると様々なメリットがあります。

それぞれ解説していきます。

画像が表示できない場合に代わりにテキストを示してくれる

Webサイト内にある画像が通信状況の問題などなんらかの理由で画像が表示されない（できない）場合にはalt属性に記述したテキストが代わりに説明してくれます。

画像がうまく読み込めなかったユーザーに対しても、この画像がどのような内容の画像なのかを理解してもらう事が可能です。

Google（検索エンジン）に画像を理解してもらいやすい

検索エンジンが画像を読み込んで内容を完全に理解するのは難しいと言われています。

そのため検索エンジンは画像を以下の項目などで理解します。

その中で特にalt属性は大きく検索エンジンの画像理解に大きく貢献します。

WebサイトでGoogle（検索エンジン）が画像を理解できなければ
そのサイトを評価する事ができないので結果的に評価が下がってしまいます。

少しでもGoogle（検索エンジン）に評価してもらえるように、alt属性は記述しましょう。

Google画像検索からの流入も期待できる

alt属性を記入することで、自身のwebサイトの画像がヒットした画像検索結果に表示させる事ができます。

筆者は欲しいもの、気になるものがある時にはまず画像検索で検索をかけます。
画像検索は一覧で表示されるので自分の好みに合ったものを見た目から効率的に探し出す事が可能だからです。

例えば、「本革のキーケース」が欲しいと思った時に「キーケース　本革」と検索すると以下のようにたくさんの画像が表示されます。

ここから気に入った画像をクリックするとその商品が売られているwebページに飛びます。

このように画像検索結果からも自分のwebページへの流入も考える事ができます。

集客の観点から見てもalt属性は記述するべきでしょう。

alt属性の正しい記述方法

続いてalt属性の記述方法を解説していきたいと思います。
alt属性はSEOに影響する重要な要素であり、正しく記述すれば良い結果をもたらしますが、間違った記述をしてしまうと返ってSEOに悪影響を与える可能性も考えられます。

ここで解説するalt属性の正しい記述方法をを覚えましょう。

↓SEOに重要なページ表示速度を簡単にあげる事が可能です。

画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？

alt属性を書く場所

基本的にalt属性はHTMLのimg要素の中に記述します。

HTMLが少しでもわかる人なら良いですが

「ブログをWordPressのビジュアルエディタで書いている」

などといった方はわからないと思います。
WordPressでは画像を選択する際に「代替えテキスト」と書いてある項目に記入すればOKです！

alt属性を適切に書くための3つのポイント

ここまでの説明でalt属性の重要性は理解していただけましたか？

ですが、ただ単にalt属性を記入すれば良いわけではなく正しく記述する事が大切です。

記述の仕方によってはSEOに悪影響になる場合もございますので正しい理解を深めましょう。

適確な説明を簡潔に入力する

Alt属性は画像の内容を”適確にかつ端的”に記述する必要があります。
明確な文字数制限などは決まっていませんが、簡潔な文言で記述するようにしましょう。

また、キーワードを並べたり文章全体を記述したりするのもNGです。

例えばこちらの画像

こちらの画像のalt属性を

alt＝”横たわる　手を舐める　眠そうな　猫　雑種　かわいい”と記述したとしましょう。

上の記述は確かに間違ってはいませんが、このような書き方はキーワードの乱用にあたり、Googleガイドライン違反となります。

「指を舐める猫」のように”適確かつ端的”に記述するようにしましょう。

意味のない画像には設定しない

alt属性は基本的に記述した方が良いですが、全ての画像に記述する必要はないです。

例えば、意味を持たない装飾目的の画像や、マーカーなどがそれに当たります。

これらの意味を持たない画像は、記入せずに空（空白）にします。

キーワードを詰め込みすぎるのはNG

画像の内容をより正確に伝えたいからと言ってキーワードを無理にたくさん入れすぎないようにしましょう。

例えば、こちらの画像

alt=“線路の上にいる犬”

といったalt属性が適切かなと思われます。

alt=“線路　雨　コーギー　列車　草　濡れている犬　幸せそうな顔”

などと関連キーワードを入れすぎると間違えてはないのですが、内容がブレてしまいます。

alt属性はあくまで”端的に”キーワードは2〜3個までとしましょう。

まとめ；alt属性は記述するようにしましょう。

今回はalt属性（代替えテキスト）について紹介してみました。

SEOでも重要視されているalt属性の重要性をわかっていただけたでしょうか。

Alt属性は検索エンジンのクローラーに画像内容を伝えたりと重要な役割を果たしています。
できる限り記述するようにしましょう。

しかしalt属性を記述したからといって記述前に比べ一気に順位が上がるといったことはありませんのでご注意ください。

The post alt属性（代替えテキスト）は必要？alt属性の重要性やSEOに効果的な正しい書き方。 first appeared on one log.

いきなりですが、ブログやWebサイトを運営している方に質問です。

ハナノ

スマホやカメラなどで撮った写真をそのままアップロードしてないですよね？

今や「デジタルカメラ」や「スマートフォン」などの気軽に写真を撮れる機械であっても非常に”高画質”な写真を手軽に撮ることができます。

そのような高画質な画像を何も手を加えることなくブログやwebサイトにアップロードしてしまうとwebサイトの容量が大きくなり読み込み速度が低下するなどのデメリットが生じます。

今回はあまり知られていない「画像圧縮とは？」という初歩的な部分から「画像圧縮の重要性」まで解説していこうと思います。

こちらの記事を読んで正しい画像「圧縮」の知識を学びwebサイト運営に活かしましょう。

そもそも「画像圧縮」とは？

そもそも「圧縮」とはなんぞや・・？

恥ずかしながら筆者も最近までは詳しくは知りませんでした。。。

「圧縮」とは簡単にいうと”余分な部分を取り除くこと”です！

画像に余分な部分なんてあるの？

画像の一部を取り除いちゃったらおかしいじゃん！

安心してください。

余分な部分とは「取り除いても人間が知覚できない部分」のことでその部分を取り除いたからといってすぐ見て「圧縮された画像だな！」などとわかる人はいません。

ただ、”何重にも圧縮”をかけてしまうと見てわかる場合もあります。

↓実際に筆者が利用している無料画像圧縮ツール「Image Optim」についてまとめました。

オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット

実はあなたも画像を圧縮したことがある！？

今や、ほとんどの方がSNS（TwitterやInstagram、Facebook）アカウントを持っている時代。

SNSにお気に入りの画像や思い出の画像をアップロードしたことがある方が多いかと思います。

実はその画像”圧縮されています”。

最近のスマートフォンは非常に”高画質”な画像が撮影できるのでスマートフォンで撮影した画像は重たいです。

そのままのサイズで投稿してしまうとSNS側のサーバーに非常に負担がかかります。

Twitterの国内利用者数は約4500万人いるわけですが1日に利用者の4分の1がスマートフォンで撮影した画像をアップロードすると1日で1000万枚以上の高画質な画像がアップロードされることになります。

日本だけでこの数字ですから世界規模ですと。。。

そりゃ流石にSNS側も「勝手に圧縮させてもらいますね」となりますよね。

ということでほとんどの方が画像を圧縮した経験があるということです！

以外と知らない2種類の圧縮方法

「圧縮、圧縮」と口を揃えて言いますが実は圧縮には2種類の方法があります。

以上の2種類の圧縮方法があります。

なぜ2種類の圧縮方法があるの？

先程説明した「可逆圧縮」と「不可逆圧縮」。なぜ2種類の圧縮方法があるのでしょうか。

「可逆圧縮」の特徴

「可逆圧縮」ではよく聞く「ZIP」という圧縮形式があります。

「ZIP」とはファイルの圧縮形式ですが、画像とは違い、そのファイルを転送する際などに一時的に軽くし、使用するときに元に戻す（解凍）ことを想定しています。

「ZIP」ファイルなどの圧縮されたデータは「解凍」することでしっかりと元に戻りデータも欠損することなく使用することができます。

「可逆圧縮」には主にファイル圧縮形式「ZIP」や画像圧縮形式「PNG」や「GIF」などがあります。

「不可逆圧縮」の特徴

一方で「非可逆圧縮」完全に元に戻すことはできないが劇的に圧縮率を高めることができます。

コンピュータの世界では1ビットでも違えばその内容は変わってしまうが、画像や動画の細部の僅かな部分が異なっていても人間の視聴覚では気づくことができない場合が多い。

このような特性を活かしてデータ自体を一部省略することによって復元することはできないが劇的に圧縮率を高めることが可能。

「非可逆圧縮」では主に画像圧縮形式「JPEG」などがあります。

↓「GIF」アニメーション作成アプリ「GIPHY Capture」の使い方もこの記事でまとめております。

「GIPHY Capture」の使い方！Macの画面を簡単にGIF化できる！

「可逆圧縮」と「不可逆圧縮」の違いまとめ

ここまで説明してきましたが理解してもらえましたか？

難しい言葉ばかりでよくわからないという方もいらっしゃると思いますので、簡単にまとめてみました。

このようなイメージを持ってもらえればOKです！

両者の特性を抑えて場面に適した形で「圧縮」を行うようにしましょう。

画像を「圧縮」する重要性は？

画像が多少重たくても表示する時の数秒の差でしょ？

このように考える方も多いと思いますが、
画像が重たく表示速度が遅いwebサイトは”致命的”です。

例えば；あなたがどこかのwebサイトを訪問した際になかなか画像が表示されない場合どう思いますか？

待ちきれずしびれを切らして帰ってしまう。
または待ったとしても良い気分ではないですよね。

せっかく優れた良いコンテンツで作成されたwebサイトであってもページ表示速度が遅いと一向にアクセス数は伸びません。

↓こちらはGoogleが公式で発表しているWebページ表示速度と直帰率に関するデータです

引用；Google

日本語に翻訳すると

これだけwebページの表示速度は重要ということがデータとして出ていますのでブログやwebサイトに画像や動画をアップロードする際には必ず「圧縮」を行いましょう。

Googleが公式にサイト表示速度を評価基準にしている！？

SEOの観点においてもwebページ表示速度は”重要”です。

Googleは公式にwebページ表示速度がランキング要員の一つであることを発表しています。

2012年の時点ではwebページ表示速度はランキング要因の一部に過ぎず、その影響は関連性や外部リンクに比べると小さいものとされていましたが、

2018年の”Speed Update”でwebページスピードがモバイル検索のランキング要因として使用されるようになりました。

以上2つの理由からwebページ表示速度は”重要性”の高いものだと言えます。

画像を「圧縮」するメリット・デメリット

ここまでの解説で画像の「圧縮」とは何か。画像を「圧縮」する重要性とは？

といった部分を解説してきました。

画像を「圧縮」することは必ずしもメリットばかりではなくデメリットも発生します。

ここではメリット・デメリットの両方の解説をしていきましょう。

画像を「圧縮」するメリット

webページ表示速度が上がる

こちらが一番大きな要因となります。
特にwebページ・ブログの場合、表示速度が結果に顕著に現れます。

またSEOの観点から見てもwebページ表示速度は非常に重要であり、検索結果の上位表示を狙うのであれば、画像の「圧縮」は”必須”と言えるでしょう。

pcのストレージ圧迫を軽減できる

先述したように画像を「圧縮」することでデータ容量を減らすことが可能です。
画像を「圧縮」しファイルサイズを小さくすることで無駄なストレージ容量を減らさずに済みます。

また、ファイルサイズが小さい方が読み込み速度も早く作業の効率化が図れますので容量以外の面でもやはり画像はできるだけ「圧縮」しておくのが良いでしょう。

画像を「圧縮」するデメリット

少なからず画像は劣化する

画像を「圧縮」することによって人間では気づくことができない程の差ですが少なくとも”劣化”します。

また、画像を「圧縮」するという作業自体が一つの手間になるのでそこもデメリットと言えるでしょう。

まとめ；画像はできるだけ「圧縮」しましょう。

いかがでしたか。画像の「圧縮」は意外にも影響が大きく、単にファイルが”重たい”だけでなく、webページ表示速度やSEOの観点から見ても「圧縮」することに損はないと言えます。

こういった小さな作業が大きな結果を左右しますので高画質な画像は「圧縮」することをオススメします。

↓実際に筆者が利用している無料画像圧縮ツール「Image Optim」についてまとめました。

オススメの無料画像圧縮ツール「Image Optim」の使い方・メリット・デメリット

The post 画像圧縮とは？画像を圧縮する重要性やメリット・デメリット。適切に「画像圧縮」できていますか？ first appeared on one log.