ホーム>ネットワークプログラミングチュートリアル>ASP チュートリアル

asp.net 向けに最適化されたサーバー コントロールの背後にあるフレンドリーな HTML と JS

著者：Eve Cole 更新時間：2010-02-26 21:39:28

あるページから別のページに移動する必要があるとします。次のような方法があります。その理由を明確に説明できますか？

<%--リンクの表現形式--%>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default2.aspx">ハイパーリンク</asp:HyperLink>
<asp:LinkBut​​ton ID="LinkBut​​ton1" runat="server" PostBackUrl="~/Default2.aspx">リンクボタン</asp:LinkBut​​ton>

<%--美的理由から、多くの Web サイトではリンクの代わりにボタンを使用します--%>
<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="~/Default2.aspx" />

<%--画像をリンクとして使用するには、2 つのオプションがあります--%>
<asp:ImageButton ID="ImageButton1" runat="server" PostBackUrl="~/Default2.aspx" ImageUrl="~/upup.gif" />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default2.aspx" ImageUrl="~/upup.gif"></asp:HyperLink>

まだ少し混乱している場合は、HTML を生成した後にソース コードを確認することをお勧めします。

<a id="HyperLink1" href="Default2.aspx">ハイパーリンク</a>
<%--HyperLink が HTML に解析されると、単純なハイパーリンクに対応し、href はジャンプするページを指します--%>

<a id="LinkBut​​ton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;LinkBut​​ton1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default2.aspx&quot;, false, true))">LinkBut​​ton< /a>
<%--LinkBut​​ton1 もアンカー タグですが、実際には JavaScript を使用してジャンプします--%>

<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "", "Default2.aspx"; 、false、false))" id="ボタン1" />
<%--button は type="submit" の入力要素に解析され、ページも JavaScript を通じてジャンプされます--%>

<input type="image" name="ImageButton1" id="ImageButton1" src="upup.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ImageButton1&quot;, &quot;&quot;, false, &quot;&quot; 、&quot;Default2.aspx&quot;、false、false))" style="border-width:0px;" />
<%--ImageButton は type="image" の入力要素に解析され、JavaScript を通じてページもジャンプされます--%>

<a id="HyperLink2" href="Default2.aspx"><img src="upup.gif" style="border-width:0px;" /></a>
<%--HyperLink の ImageUrl 属性に値を割り当てた後、それを Html に解析すると、ハイパーリンク内の「クリップされた」img に対応しますが、href はジャンプされるページを指したままになります--%>


これを知って何の役に立つのでしょうか？

さまざまな用途がありますが、今日は SEO についてのみ話します。

現在の検索エンジン技術では、JavaScript (もちろん AJAX も含む)、フォーム要素 (入力など)、Flash、画像は読み取れません (または読みにくい)。 「スパイダー」は、単純な HTML 形式のテキストを読み取る傾向があります。したがって、SEO の観点からは次のようになります。

1. ページ ジャンプ リンクに JavaScript やフォームを使用しないでください。通常の <a></a> でも同じ機能を実現できます。一般に、標準アンカー識別子 <a></a> を介してアクセスできないナビゲーションは、スパイダーによって取得されません。もともとクライアント側の要素を使用している場合は、これに気づきやすいはずですが、カプセル化されたサーバー側のコントロールを使用する場合は不注意になる可能性があります。

2. UpdatePanel にはテキスト コンテンツがないことに注意してください。簡単なテストを実行できます。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:スクリプトマネージャー>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<コンテンツテンプレート>
<asp:Label runat="server" ID="lbl" ></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>


protected void Button1_Click(オブジェクト送信者、EventArgs e)
{
this.lbl.Text = "私は UpdatePanel によって生成されたので、私を見ることはできません!";
}


HTML に解析した後のソース コード部分:

<div id="UpdatePanel1">
<span id="lbl"></span>
<input type="submit" name="Button1" value="Button" id="Submit1" />
</div>


UpdatePanel はページの JavaScript 関数を通じてページ コンテンツも生成するため、これは理解しやすいです。ソース コードを見ると、関連する JavaScript 関数が表示されますが、関数によって生成されたコンテンツは表示されません。検索エンジン スパイダーに関しては、ソース コードのみを調べます。

3. ポップアップ ページを使用する必要がある場合、通常のアプローチは次のとおりです。

<a href="#" onclick="window.open('popup.html','common','height=600,weight=800');">共通ポップアップ</a>


上記で説明したことから、この書き方は間違いなくSEOに悪影響を及ぼします。したがって、ポップアップ ウィンドウの効果を確実にし、SEO に優しい次のコードを使用する必要があります。また、顧客のブラウザが JavaScript をサポートしていない場合や無効にしている場合でも、ページはスムーズにジャンプできます。

<a href="popup.html" onclick="window.open(this.href,'seo','height=600,weight=800');return false;" SEO ポップアップ</a >
<%--注: ここでの return false ステートメントは省略できません。 --%>


4. 特別なフォントを使用したい場合 (コラムのタイトルなど)、代わりに漢字の絵を使用することがよくあります。これも厄介で、タイトルとしてはその内容が非常に重要なキーワードである場合が多いので、画像を使ってしまうと蜘蛛はそれを読むことができません。考えられる解決策の 1 つは sIFR ですが、これについてはあまり詳しくありません。オンラインで検索したところ、漢字には適用できないようです。

写真の場合、一般的に使用される SEO 方法は、タイトルと alt を示すことです。

<img alt="ASP.NET 検索エンジンの最適化" title="ASP.NET テクノロジを使用して Web サイトを開発するときに注意すべき SEO テクニック" src="seo.gif" />


しかし、これも「目に見えないページ要素」であり、具体的な効果を正確に測定することは困難です。しかし、何もしないよりは何かあったほうが良いでしょう。

5. その他の注意事項:

5.1 HTML タグのセマンティクスを CSS と組み合わせる 「span」や「div」とは異なり、「h1」はタイトル、「b」は強調、「ul」と「li」はリストを意味します。これらのセマンティクスタグは検索を与えることができます。エンジンの指示がより明確になります。

5.3 重要なコンテンツを HTML ページの上部に配置します (ブラウザーによって表示される結果ではなく、ソース コードを参照します)。

5.5 JavaScript の大部分をページの下部または別の js ファイルに配置します。

5.2 フレーム レイアウトは使用しないことをお勧めします。

5.3 多数の VIEWSTATE は「Spider」に干渉を引き起こす可能性があります。

5.5 留意事項: 現在の検索エンジン テクノロジでは、JavaScript (もちろん AJAX を含む)、フォーム要素 (入力など)、Flash および画像を読み取ることができません (または読み取りが困難です)。

関連記事