aタグは親要素いっぱいクリック可能にして文字だけ囲む

トップページなど複数の記事の一覧ページによくある間違いは、aタグで1つの記事の要素全てを囲って、クリックできるようにしてしまうことです。
例えばこんな感じ。

<a href="（記事のurl）">
<div>
画像
タイトル
要約
更新日時
ラベル
</div>
</a>

これではSEO効果が無く、Googleに評価されなくなってしまいます。同じリンクなのに、リンクによって囲まれているものが違うとGoogleに評価されません。Googleに一番評価されるのはタイトルの文字だけの状態です。
以下のように変更します。

<div>
画像
<a class="list" href="（記事のurl）">タイトル</a>
要約
更新日時
ラベル
</div>

これだけでは、タイトルだけクリック可能で他はクリックできない状態です。

cssで以下の設定を追加すると、タイトル以外のdivで囲まれた範囲の個所をクリックしても、aタグで設定した（記事のurl）にリンクすることができます。

<style>
.list:after{
content:'';
position:absolute;
top:0;right:0;bottom:0;left:0;
z-index:1;
}
</style>

親要素いっぱいまでaタグの範囲を広げ、他の要素よりもクリックの優先順位を上げるという設定です。この結果、親要素いっぱいまでクリック可能になります。