Jadual Kandungan
页脚 & CTR(点击率)
1. Don’t treat it as an SEO dumpster
2. Introduce hierarchy
3. Try one last time to get a conversion
4. Use white space
5. Experiment with “about the author” blocks
6. Don’t forget about the must-have links
7. Display social media links
8. Consider using a sub-footer
9. Showcase social proof, badges, and safety seals
10. Link to your best content
11. Be careful about turning your footer into “master navigation”
What’s wrong with your footer, my friend?
Rumah hujung hadapan web html tutorial 如何构建一个很棒网站页脚(Website Footer)_html/css_WEB-ITnose

如何构建一个很棒网站页脚(Website Footer)_html/css_WEB-ITnose

Jun 24, 2016 pm 12:07 PM

  对于很多人来说,制作页脚是只是设计师顺手而为的任务。它似乎很容易,似乎可以忽略不计。因为很多人都觉得网站底部很少人会去看,而且页脚链接的所有链接的点击率(CTR)都是最低的,何必呢?

  真是这样的吗?下面为您解析。

页脚 & CTR(点击率)

Well, the fact about the low CTR may be true, but it doesn’t present the whole picture. The low CTR is mainly a result of the fact that few people see the footer in the first place.

So I have a theory of my own about this.

Although, apparently, there’s no study done on the topic (at least I wasn’t able to find it; feel free to chip in if you have some data), I believe that the CTR is actually quite high for footers if we only count the people who have scrolled all the way down on the page.

I did some quick number crunching with my CrazyEgg account to examine this more closely. When I compare the estimated number of people who see my footer (through the scroll map tool) and the total number of clicks my footer generates, I can see that between 14 percent and 20 percent of people end up clicking on something once they see the footer (depending on the page tested).

Of course, this is just a very simple test with a rather small heap of data, so it’s difficult to draw any reliable conclusions. Also, my footer is huge. It takes around 55-60 percent of the screen, so it’s hard to resist clicking on something. Anyway, even despite the shortcomings, the results are still very interesting.

So the lesson is simple…

Footers matter.

And here’s what you can do to make your footer properly awesome.

1. Don’t treat it as an SEO dumpster

Some people still try to inflate their rankings by using keyword links in the footer. And I know that doing so is hard to resist. It’s just too easy, and the links don’t even look out of place. But this really should be avoided in 2014. Mainly because it isn’t much of a challenge for Google to recognize the footer and give the links a low SEO value.

The whole practice is just so 2008 ? or even worse.

Actually, it was 2008 when Rand Fishkin already talked about this being not effective.

2. Introduce hierarchy

There are always some elements that are more important than others, and you should reinforce this idea through alignment, scale, and placement within your footer.

For instance, if you go to Smart Passive Income, you’ll see that getting you to opt in is the most important goal for Pat ? the owner. The footer for every page on the site starts with a big subscription box.

Then, additional links and disclosures follow.

Try adopting the same idea. Start with what’s important and then continue with everything else.

3. Try one last time to get a conversion

Speaking of opt-ins, these days, getting someone to opt in is one of the most popular website goals, and site owners are willing to do almost anything it takes to raise their conversion rates.

Hard to blame them for that, to be honest.

The footer is the last chance to get a conversion. And that’s regardless of what the conversion represents in your individual case. Take advantage of that chance, you owe it to your site’s main goal.

For example, here’s the footer at Codeinwp.com ? a company providing PSD-to-WordPress services that I’m part of. The footer is huge and it has one main goal ? to convince people to submit their designs and have them turned into a working WordPress theme.

4. Use white space

White space is so underrated right now. Actually, it’s been underrated since ever. When in fact, there’s no other easier way to give your footer some additional emphasis and make the links pop more.

We don’t have to go far for examples ? just scroll down to see the footer here at WDL.

5. Experiment with “about the author” blocks

If you’re designing a single author site/blog then it’s often a good idea to use the available space to present a nice “about the author” block.

Now, the goal here isn’t increasing the CTR. People rarely click on author blocks (at least in my tests), but it does introduce a personal touch and makes it clear who the author is no matter what page is viewed at the moment.

Here’s a great example from Leaving Work Behind:

It’s really hard to imagine a footer without some of the following links:

  • About
  • Contact
  • Home
  • Blog (if there is one)
  • The reason why they’re essential is simple. Over the years, people have gotten used to seeing those pages in footers. It’s become a convention, and breaking it rarely pays off.

    A good way to go about this when picking the things to mention in your footer is to ask yourself the following:

    Will my audience expect to see this link in the footer?

    Here are two of the most popular approaches to social media vs. footers:

  • Use default buttons. For example, to get a Facebook Like button, go to this section in the developers area. They tend to be effective because of their official nature ? people are very familiar with them and know exactly what to do when they see one.
  • Use some custom buttons. They may not have the same CTR, but you don’t always want to click-optimize these buttons, especially if you attempt to show more than a handful of them. Take a look at TechCrunch, to get an idea:
  • Your sub-footer is the part that comes after your main footer area. It’s most commonly used to display various legal links or other things that you don’t necessarily want people to click on, but they do regulate and disclose some of your operations.

    I’m talking about things like privacy policy, terms, earnings disclosure, copyright clause, DMCA, etc.

    Example from SugarSync.com:

    9. Showcase social proof, badges, and safety seals

    Depending on the kind of business that the site you’re working on is in, displaying some additional social proof can work well for the site’s overall credibility.

    Let’s take another look at Pat Flynn’s site to get an example (this time it’s the homepage):

    These company logos are not clickable, plus the contrast is very low. But you don’t really need more. The logos are there to provide social proof, not to catch too much attention.

    This is something that can work well on blogs and online publishing sites in general; not so much on business sites or product sites.

    The main idea is that popular content is usually popular for a reason, so showcasing it in the footer can improve the readership numbers even further.

    It’s a simple rule ? it’s much easier to grow the popularity of something that’s already popular, than to build the popularity of something that’s not.

    An example by newInternetOrder.com:

    This goes back to the first item on this very list ? treating your footer as an SEO dumpster.

    Footers should be neither an SEO dumpster, nor a master navigation.

    You really shouldn’t try cramping all the links you have in the footer. This will not have a good effect on your readers.

    A lot better approach is to create a custom archives page and then link to it from the footer. That way, you still have a readable and clear footer, and if someone wants to find a specific resource, they can do so via the archives.

    To be honest with you, when gathering the data for this post and then writing it, I found at least a handful of things wrong with the footers I use on my sites. So my question is simple: What’s wrong with your footer? And more importantly, what will you do to fix it?

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Repo: Cara menghidupkan semula rakan sepasukan
    1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
    4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

    Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

    Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

    Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

    Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

    Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

    Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

    Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

    Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

    Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

    Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

    Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

    Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

    Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

    Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

    Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

    See all articles