Web サイトを検索エンジン用に最適化(SEO)し、ページランクを上げてサイトを検出されやすくする方法について学習します。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

検索エンジンの最適化(SEO)は、検索エンジンの検索結果リストにおいて上位にランクされることにより、サイトのオンライン表示率を上げることを目標としています。最高ランクのサイトは、リストの一番上に表示され、関係の深いサイトを探してオンライン検索している訪問者に働きかけます。検索エンジンの最適化に成功すれば、サイトのランキングが向上し、サイトへのアクセスを増やすことにつながります。

この記事では、Adobe Muse で作成するサイトの検索エンジンランキングを改善するために、参考となるベストプラクティスやヒントを探っていきます。Adobe Muse ワークスペースには、様々な役に立つ機能があり、それを利用してサイトの最適化を行い、検出率を高め、ユーザーの Web ページへのアクセスを導きます。

インターネット上のサイトをリストするため、検索エンジンは Web ページとサイトのアセットをつなぐリンクをたどって、Web を巡回します。検索エンジンは、インデックス登録と呼ばれる処理の中で、ページのコンテンツやアセットを評価します。インデックス登録が重要なのは、Web 上の利用可能なコンテンツについて検索エンジンに情報を提供する継続的調査だからです。サイトが利用できなくなると、検索エンジンは検索結果からその Web サイトを削除します。検索エンジンは、インデックス登録の結果を利用して、サイトのコンテンツとランキングを判断します。

インデックス登録により、検索エンジンは、キーとなる語句に基づく固有の問い合わせに一致する検索結果に、Web サイトリンクを正確に示すことができます。例えば、検索エンジンフィールドに「Adobe」と入力して「検索」をクリックすると、検索結果には Web ページのリストが表示されます。検索結果には、検索エンジンが Adobe 製品に関連するコンテンツが含まれていると判断した Web サイトへのリンクが表示されます。

リストの最上位に置く Web サイトを決定するために、検索エンジンは数多くのパラメーターを使用します。上位にランクされるのがよい理由は、そのキーワードや語句を検索する人から、ユーザーの Web サイトにアクセスしてもらえる可能性が高くなるからです。以下に示す概要に従うことにより、検索エンジンのインデックス登録の促進をはかり、作成するサイトを、新しい訪問者がオンライン検索で探し出せるようにします。

検索エンジンによるサイトのインデックス登録方法の理解

Web ページには、作成者、キーワード、説明および言語といった埋め込まれたメタデータ情報が含まれています。キーワードと説明は、サイトの目的を明らかにし、提示されているコンテンツを説明するのに役立ちます。これらのメタタグは、HTML ソースコードに埋め込まれており、ブラウザーウィンドウにページが表示されても、目に見える形ではありません。

以前は、検索エンジンがインデックス登録処理中に、メタデータキーワードと説明の両方を評価していました。検索結果におけるサイトの表示率が上がることを期待して、Web デザイナーは、何百ものキーワードを追加することがありました。Google の検索エンジンなどの最新の検索アルゴリズムの中には、ランキングの算定にキーワードの価値を考慮しなくなったものがありますが、キーワードの更新に時間をかける価値はあります。それ以外の検索エンジンや、さらに幅広い Web サイトで使用されている Google 検索アプライアンスでは、キーワードによってランキングが向上する可能性があります。メタデータの説明は、多くの場合、検索結果リストにページが表示されるときに、説明文として表示されたり、Facebook、Google+ およびその他のソーシャルネットワーキングサイトでのデフォルトの説明として表示されたりします。関心を引く説明が、サイトへの誘導に役立つ場合があります。

検索エンジンは、全文インデックス登録を行う場合が多く、これは、ページの全テキストコンテンツを解析するということです。ヘッダータグ(h1、h2、h3 など)内のテキストは、特に重要とみなされます。一般に、ヘッダーは表示される情報を集約しているからです。段落スタイルを使用して、段落タグコンテナを定義し、h1 ヘッダーをテキストコンテンツ内の大見出しに、h2 ヘッダーを見出しに、h3 ヘッダーを小見出しに使用するページを作成します。テキストフォーマットは、検索エンジンに対し、各レベルでのヘッダーテキストの重要性を示します。段落タグを使用するスタイルを定義し、それをヘッダーテキストに適用することにより、上手に構成された HTML コードを作成することができます。そのようなコードは、検索エンジンの巡回プログラムでごく簡単に検出してナビゲーションすることができます。

ページコンテンツに対してインデックス登録が行われると、画像その他のリンクされたアセットが分析されます。アセットにタイトルや代替テキストが含まれていると、このテキスト情報が解析されます。ハイパーリンクに追加されたツールヒントも評価されます。検索エンジンは、サイトのインデックス登録の際に見つかるあらゆるテキストコンテンツを利用し、詳細な情報に基づいて各ページコンテンツに関する判断を行います。また、画像に対してタイトルと代替テキストを、ハイパーリンクに対してツールヒントを追加することにより、作成するページが、補助装置を使用して Web をナビゲーションしている訪問者も含めて、誰からもアクセスしやすいページであるようにします。

サイトは必ず定期的に確認し、リンクが切れている箇所の削除や修正を行います。検索エンジンがリンクの切れを検出すると、サイトはもう更新されていないとみなす場合があります。同じく、不明な画像ファイルやリンクされているアセットも解決してください。メンテナンスされていない古いサイトは、検索結果に割り当てられるランキングが低くなる場合があります。

ページプロパティへのメタデータキーワードと説明の追加

Adobe Muse で初めてサイトを作成するときには、サイトプロパティを設定するよう促されます。レイアウト値やハイパーリンクの外観など、サイト内のすべてのページに影響する属性があります。しかし、それぞれのページにも個々のプロパティがあり、これを設定して特定の属性を追加することができます。例えば、「メニューオプション」を設定すると、ページをメニューに表示するかどうかを制御し、ソースコードに追加されてもブラウザーには表示されないメタデータを更新することができます。

特定のページのページプロパティを更新するには、次の手順に従います。

  1. プランビューでページのサムネールをダブルクリックすると、デザインビューでページが開きます。ページは独自のタブに開かれ、編集可能になります。

  2. ページページプロパティを選択します。

    ページ/ページプロパティを選択する
    ページメニューを使用して、ページプロパティダイアログボックスを開きます。

  3. ページプロパティダイアログボックスで「メタデータ」タブをクリックすると、フィールドにアクセスしてメタデータ情報を入力できます。

    ページプロパティ
    ページプロパティの「メタデータ」セクションを使用して、メタデータのテキストを追加します。

  4. 「説明」フィールド内をクリックして、サイトのコンテンツに合う言葉を入力します。例えば、犬の救済に関するページをデザインしている場合、ページについて、次のような簡単な説明を入力することができます。「犬を助けて、あなたのベストフレンドを見つけませんか。私たちは、ラブラドールレトリバー犬を救済する、北カリフォルニア最大の組織です。犬の世話をして、愛情を注いでいただける家庭を探すことに打ち込んでいます。」

  5. 「キーワード」フィールドをクリックして、サイトのコンテンツに合う言葉を入力します。例えば、犬に関するページをデザインしている場合、「カリフォルニアの犬の救済、ラブラドールレトリバー、黒いラブラドール、茶のラブラドール、犬の健康管理、犬のトリミング、犬の斡旋サービス」など、ページのコンテンツに合うキーワードを入力することができます。

  6. 「ページ名」フィールドを更新する場合、ページ名はサイト全体でメニューウィジェットに表示されるラベル名であることを忘れないでください。

  7. 「ページタイトル」フィールドは、初期設定で、ページ名と同じ名前を使用するよう設定されています。ページタイトルは、ブラウザーウィンドウ、ブラウザータブおよびブックマークリストに表示されます(サイトの表示に使用するブラウザーによっても異なります)。これを変更する場合、「ページ名と同じ」チェックボックスをオフにしてから、異なるページタイトルを入力します。

  8. メタデータの更新が完了したら、「OK」をクリックしてページプロパティダイアログボックスを閉じます。

画像へのタイトルと代替テキストの追加

ページに画像を配置した後、画像プロパティダイアログボックスにアクセスして、その画像に割り当てるタイトルと代替テキストの両方を設定できます。

以下に、各プロパティを簡単に説明します。

タイトル:多くのブラウザーでは、通常、画像に加えて、画像の上にカーソルを合わせたときに表示されるツールヒントとして、このタイトルが表示されます。

代替テキスト:画像ファイルを表示できない場合、画像の代わりにこのテキストが表示されます。代替テキストは、補助技術を利用してページコンテンツにアクセスしている、ハンディキャップのある訪問者に対して、画像を説明するためにも使用します。

訪問者がサイトのナビゲーションで最高の体験が得られるよう、すべてのサイトアセットにタイトルと代替テキストを設定するのが理想的です。ツールヒントは、グラフィックに関する追加情報を持たせるのに役に立ち、また、代替テキストにより、グラフィックコンテンツを言語で表すスクリーンリーダーでページにアクセスしやすくなります。

タイトルと代替テキストを追加するには、次の手順に従います。

  1. 配置済みの画像を選択します。

  2. 画像を右クリックし、コンテキストメニューから「タイトルを追加」または「代替テキストを追加」を選択します。

    画像プロパティ
    タイトルまたは代替テキストの追加を選択します。

  3. 画像プロパティダイアログボックスの「タイトル」フィールドに画像のタイトルを入力します。例えば、画像がアドビのロゴであれば、「アドビ システムズ社」と入力します。

    画像のタイトルプロパティ
    ツールヒントとして表示するテキストを「タイトル」フィールドに入力します。

  4. 「代替テキスト」フィールドには、「アドビのロゴ」のように、グラフィックコンテンツの説明を入力します。

  5. 「OK」をクリックして画像プロパティダイアログボックスを閉じます。

リンクされた画像とテキストに対するツールヒントの設定

ツールヒントを作成して、カーソルがリンクの上に置かれたときに常に表示されるようにすることができます。これらのツールヒントは、ハイパーリンクが指定された画像とテキストの両方に表示されます。訪問者にとっては、実際にリンクをクリックして表示される前に、リンクされたコンテンツに関するより多くの情報が得られるので便利です。また、検索エンジンに対してサイトが参照するコンテンツの説明を提供することから、ツールヒントは理想的です。

ハイパーリンクを持つエレメントに対してツールヒントを追加するには、次の手順に従います。

  1. リンクされたテキストまたは画像を選択します。

  2. ハイパーリンクメニューの左側にある、コントロールパネル「ハイパーリンク」テキストをクリックします。「ハイパーリンク」オプションが表示されます。

    ハイパーリンクのオプション
    コントロールパネルにある青い「ハイパーリンク」テキストをクリックして、ハイパーリンクオプションにアクセスします。

  3. 「ツールヒント」フィールドにツールヒントを入力します。例えば、リンクされたテキストに、ホームページに戻るハイパーリンクがある場合、「ホームページに戻る」と入力できます。

  4. ページ上の他の場所をクリックして、「ハイパーリンク」オプションを閉じます。

段落スタイルを使用したテキストフォーマットの適用と段落タグの設定

  1. テキストツールを使用して、テキストフィールドをクリック&ドラッグします。「これはテキストです」などとテキストコンテンツを入力します。

  2. テキストをフォーマットして、フォント、フォントサイズ、カラー、その他の設定を行います。テキストツールでテキストが選択されている間に、コントロールパネルでオプションを更新するか、テキストパネルのオプションを使用します。例えば、次のテキストフォーマットを設定できます。

    • Web セーフフォント:Verdana
    • フォントサイズ:24
    • カラー:茶色(#8C6239 または R=140 G=98 B=57)
    • トラッキング:6
    • 行送り:120%
    テキストツールパネル
    テキストパネルまたはコントロールパネルのオプションを使用して、テキストをフォーマットします。

  3. 段落スタイルパネルを開きます。フォーマットされたテキストがまだ選択されている間に、段落スタイルパネルの下部にある新規スタイルを作成アイコンをクリックします。

    段落スタイルオプション
    新規スタイルボタンをクリックして、新規スタイルを作成します。

    新規スタイルには、フォーマッティング属性が含まれ、段落スタイルのデフォルト名が与えられます。

  4. 段落スタイル名をダブルクリックして、スタイルオプションダイアログボックスを開き、新しいスタイルの「スタイル名」「茶色のヘッダー(大)」と入力します。段落タグメニューを使用して、h1 ヘッダーのスタイルに関連付ける HTML タグを設定します。

    スタイルを編集
    段落タグメニューから「h1」を選択します。

  5. 「OK」をクリックし、段落スタイルオプションを設定します。これで段落スタイルが設定されて、サイトで適用する任意のヘッダーの外観と HTML タグの両方が更新されます。

    h1 ヘッダースタイルを作成して、ページの一番上の(一般には文字の一番大きな)テキストに適用することが最適です。

    h2、h3 など、段落スタイルをさらに作成し、そのスタイルをサイトのページすべてに対し、表示される小見出しの大きいものから順に適用します。

    テキストスタイル
    上手に構成された Web ページでは、表示されるヘッダーを大きい順に使用して、テキストコンテンツの階層を定義します。

    すべてのヘッダーに対して段落スタイルを作成したら、スタイルを指定するテキストをすばやく選択して、段落スタイルパネルにあるスタイル名をクリックすることで、スタイルの属性と段落タグを適用できます。

サイトの書き出しまたはアップロード時に生成される sitemp.xml ファイルの理解

FTP ホストにアップロードダイアログボックスを使用して、サイトの書き出しや、サードパーティホストプロバイダーに対する Adobe Muse サイトのアップロードを行う場合、Adobe Muse はサイトページとアセットのすべてのリストが含まれる sitemap.xml というファイルを生成します。このファイルは、検索エンジンがユーザーのサイトコンテンツのインデックス登録を簡単にできるようにします。

統合されたアドビのホストサーバー上にサイトをホストする場合、サイトに追加するドメイン名は、内部サーバーインデックスに自動的に追加されるので、それ以外のアクションは必要ありません。

Adobe Muse によって生成されるサイトマップを使用して、サイトの検索エンジンのランキングを向上させることができます。Adobe Muse を使用してファイルをアップロードしている場合、sitemap.xml ファイルは他のファイルと一緒にホストサーバーにアップロードされます。サイトを書き出し、FTP クライアントを使用してファイルをアップロードしている場合は、書き出したフォルダー内の残りのアセットと一緒に sitemap.xml ファイルをホストサーバーにアップロードします。

サイトを対象とした検索エンジン最適化を強化するために、サイトマップには、<image:image> タグ付きの画像がリストされます。画像のキャプションは、<image:caption> タグ付きでリストされます。  .png ファイルを除き、サイトマップには、回転した画像や効果付きの画像も含まれています。

ファイル名が同じで代替テキストが異なる画像をアップロードすると、画像が <image:caption> タグ付きで個別にリストされます。キャプションには、それぞれの代替テキストが含まれます。

書き出した sitemap.xml ファイル内にドメイン名を指定するには、次の手順に従います。

  1. ファイルHTML 形式で書き出しを選択します。

    ファイル/HTML 形式で書き出しを選択する
    すべてのサイトファイルをユーザーのコンピューター上のフォルダーに書き出します。

  2. 「ドメイン名」フィールドにドメイン名を入力します。

    HTML 形式で書き出しダイアログボックス
    「ドメイン名」フィールドにサイトのドメイン名を入力します。

  3. ドメイン名が、mysite.com の形式で正しく記載されていることを確認します。

  4. 「OK」をクリックして、ドメイン名を sitemap.xml ファイルに追加し、書き出し処理を完了します。サイトを書き出してから、サイトファイルが含まれているフォルダーをユーザーが選択した Web ホストプロバイダーにアップロードすることができます。

    注意:ファイルFTP ホストにアップロードを選択して、サイトをアップロードすると、「ドメイン名」フィールドに入力したドメイン名が sitemap.xml ファイルに追加されます。

    FTPホストオプション
    FTP ホストにアップロードダイアログボックスにドメイン名を入力します。

Google 検索エンジンが sitemap.xml ファイルを使用する方法については、Google ウェブマスターツールのヘルプページを参照してください。

Adobe Muse でのサイトのデザインについて詳しくは、Adobe Muse ヘルプを参照してください。また、Adobe Muse Site of the Day(Muse 今日のサイト)を参照して、独自のプロジェクト作成を開始するにあたって、インスピレーションをかきたてるデザインをご覧ください。

ビデオ | サイト分析を表示

ビデオ | サイト分析を表示
lynda.com - James Fritz

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー