アンカーテキストを短く説明的なものにする

デザインの観点からアンカーリンクを視覚的にスタイリングする方法については多くの意見があります。今日は、さらに重要なことに焦点を当てます。リンクアンカーテキストに名前を付ける方法とその理由。 衝撃的な量のウェブサイトがこれを間違えています、私もこれに罪を犯しています。

Webサイトでクリック可能なリンクを作成するには、リンクパスをHTMLアンカータグでラップします：<a></a> 。アンカータグには、URL（リンクパス）クラス、ID、タイトル、アンカーテキストなどの多くの属性を含めることができます。

アンカーテキスト クリック可能を指します リンクの一部。アンカータグをラップするのはテキスト（リンクURLではありません）です。

TechStackerのフロントページへのリンクは次のとおりです。 HTMLの外観は次のとおりです。

<a href="https://techstacker.com">TechStacker </a> 

• href=" "内のURL リンクターゲットです
• >TechStacker< ターゲットにつながるクリック可能なアンカーテキストです。

リンクのアンカーテキストを書く次の2つの異なる方法を見てください。この場合、リンクターゲットはパフォーマンスの最適化に関するページです。最初のアンカーテキストは良くなく、2番目のアンカーテキストは良いです：

最初のアンカーテキストが悪いのはなぜですか？ 最初のものは説明的ではありません 2つ目は説明的で、関連性があります リンク先のURLへ。

いくつかのアンカーテキストポインタ：

• アンカーテキストは短くしてください。 5語を超えると、レイアウトが乱雑になることがよくあります。特に、アンカータグがデザイン的に非常に強調されている場合はそうです。ただし、コンテキストによって異なります。
• 意味のある説明的なアンカーテキストを使用します。 「ここをクリック」は、スクリーンリーダーを使用している人や通常の視力を持っている人にとっても、説明的なものではありません。
• アンカーテキストはSEOに影響します。 検索エンジンは、リンク先のコンテンツを説明し、関連性のあるリンクを求めています。
• アンカーテキストはアクセシビリティに影響します。 スクリーンリーダーが視覚障害者へのアンカーテキストをどのように読み取るかを考えてください。アンカーテキストの説明をガイドしましょう。

結論

アンカーテキストはSEOとUXの両方に影響します。アンカーテキストに名前を付ける方法を検討することで、読者と検索エンジンの両方を満足させることができます。

この記事の調査の一環として、GoogleのSEOスターターガイドを読みました。

私がやったことがわかりますか？上記のアンカーテキストは説明的であり、この記事のコンテキストと、リンク先のGoogleSEOスタートガイドの両方に関連しています。これが、アンカーテキストに名前を付ける方法です

アンカーテキストは期待値を設定する必要があります。これは、UIカードがより詳細なコンテンツ（記事、製品ページなど）のプレビューとして機能する方法と似ています。例：MediumのフロントページまたはTechStackerのこちら

私は実際にこの記事を書いたのは、コンテンツに意味のある説明を使用することがいかに重要かを思い出させるためです。一般的に 、ブログ、コーディング、さらには食料品のリストでも。曖昧にしないで、説明的にしてください。

デジタル製品デザイナーのように、ルーク・ウロブレフスキーは次のように述べています。

明らかに常に勝ちます。