2017-02-28 3 views
0

私はthisをstackoverflowで見つけました。私はこれに関する質問があります。このコードをCodePenで使用してSEOを満足させ、ページの一部をデザインすることはできますか?<img/>対背景画像

<figure> 
<img src="https://placehold.it/350x150" alt="something important"> 
<figcaption> 
    something important 
</figcaption> 
</figure> 

*{ 
    font-family: helvetica; 
} 
figure { 
margin: 100px auto; 
position: relative; 
width: 500px; 
height: 100px; 
background-image: url(https://placehold.it/650x150); 
background-size: cover; 
background-position: center center; 
} 

img{ 
display: none; 
} 
figcaption{ 
    position: absolute; 
bottom: 0; 
width: 100%; 
background: maroon; 
color: WhiteSmoke; 
text-align: center; 
font:small-caption; 
font-style: italic; 
} 
+2

「satisfo SEO」は、コンテンツがページ上にあるかどうかによって異なります。 imgや背景に何が含まれているのか、どちらを使用しているのか、あるいはその両方を使用しているのか、という文脈は提供していません。 –

+0

アートを販売するギャラリーです。imgは販売している写真のサムネイル用ですが、100px * 100pxで切り取られているわけではありませんが、300px、500pxのものもあります。サイズは同じですが、 PSでそれらを切り取っている...私は背景画像のために人形のインラインスタイルを使用すると思う –

+0

検索スパイダーはあなたのページがどのように見えるか気にしない、彼らはあなたの 'figcaption'タグと' alt'属性。 – Slime

答えて

0

私はStackOverflowの上でこれを発見し、私はこれについての質問があります。 SEOを満足させてページの一部をデザインするためにこのコードをCodePenで使用できますか?

SEO:はい、https://support.google.com/webmasters/answer/114016?hl=enhttps://yoast.com/image-seo/をチェックしてください。

あなたのコンテンツに適した画像を提供し、ユーザーエクスペリエンスを向上させるために役立つ限り、優れたものになります。貴重なalt属性テキストを提供し、システムを悪用しようとしないようにしてください。

デザイン:意味的に正しいと思われ、外見ははるかに主観的ですが、私は外観が好きです。

+0

答えをありがとう...それは非常に有用だった...デザインはちょうど例です...私はちょうどこれをチェックする必要があった...私はCSSで私はhtmlを変更しないことを理解するが、それのapearence ...だから、alt属性の画像がそれに当てはまる場合は... –