SEO を向上させるために、SVG マスキングを使用して透明なテキストのカットアウト効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

SEO を向上させるために、SVG マスキングを使用して透明なテキストのカットアウト効果を作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-30 21:33:14

オリジナル

671 人が閲覧しました

SVG マスキングを使用した背景の透明なテキストのクリッピング

提供された画像に見られるように、背景に透明なテキストの切り抜き効果を実現するという問題が生じました。 CSS テクニックも考慮されますが、より最適なアプローチは、SVG マスキングを備えたインライン SVG を利用することです。

CSS と比較して、このアプローチにはいくつかの重要な利点があります。

強化されたブラウザのサポート: IE10、Chrome、Firefox、およびSafari。
SEO 保護: スパイダーは SVG コンテンツを効果的にクロールしてインデックスを作成し、検索エンジン最適化 (SEO) の取り組みに悪影響を与えません。

は次のとおりです。参考用の CodePen デモ:

[CodePenデモ](https://codepen.io/animanimal/pen/pxKVQm)

How Can I Create a Transparent Text Cutout Effect with SVG Masking for Better SEO?

次のコードスニペットは実装の概要を示しています。

<!DOCTYPE html>
<html>
<head>
  <title>SVG Text Mask</title>
  <style>
    body,html{height:100%;margin:0;padding:0;}
    body{
      background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
      background-size:cover;
      background-attachment:fixed;
    }
    svg{width:100%;}
  </style>
</head>
<body>
  <svg viewbox="0 0 100 60">
    <defs>
      <mask>

ログイン後にコピー

これこれを実装すると、SEO の利点を維持しながらテキストの視覚的な透明性が保たれるため、純粋な CSS 技術と比較してより効果的なソリューションになります。

以上がSEO を向上させるために、SVG マスキングを使用して透明なテキストのカットアウト効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。