增强方法有几种方法

by Nicholas Tart

尼古拉斯·塔特(Nicholas Tart)

101种使您的网站更加出色的方法 (101 Ways to Make Your Website More Awesome)

I was talking to an old client last week and she said, “Nick, I know I need help with the site, but I’m not sure what I need.”

我上周与一位老客户谈话时，她说：“尼克，我知道我需要该网站的帮助，但我不确定我需要什么。”

So I asked around. Friends, family, other non-internet-y business folk. They all said the same thing:

所以我问了一下。朋友，家人和其他非互联网业务人士。他们都说了同样的话：

“I need a checklist. I don’t know how to build a website. That’s why I need to hire someone. But I still want to know what’s involved.”

“我需要一个清单。我不知道如何建立网站。这就是为什么我需要雇用一个人。但是我仍然想知道所涉及的。”

So I started making a list of everything we’ve done at AwesomeWeb (and some things we haven’t).

因此，我开始列出我们在AwesomeWeb上所做的所有事情的清单 (以及一些我们没有做的事情)。

Here’s my promise…

这是我的诺言

…If you fix everything on this list, you’ll have one of if not the best site in your industry.

…如果您修复了此列表中的所有内容，那么您将拥有业内最好的网站之一。

How do you know?

你怎么知道的？

At AwesomeWeb, I’ve reviewed 1,000+ of the world’s best freelancers. As far as I know, I’ve never seen a site that can check every box.

在AwesomeWeb，我已经审查了1,000多个世界上最好的自由职业者。据我所知，我从未见过可以选中每个框的站点。

As a business owner, use this list to know what needs to be done. Send it to your designer or developer. You’ll even be able to fix a few of them yourself.

作为企业主，使用此列表可以知道需要做什么。将其发送给您的设计师或开发人员。您甚至可以自己修复其中的一些。

As a freelancer, use this list to make everything you create more awesome. Go back to old clients and say:

作为自由职业者，使用此列表可使您创建的所有内容变得更加出色。回到老客户那里说：

“I was reviewing what we built and noticed that we can fix this, this, and this. I can do it for $500, $1000, $5000 and you can expect these results…”

“我正在查看我们构建的内容，并注意到我们可以修复此问题。我可以花$ 500，$ 1000，$ 5000来做，您可以期待这些结果……”

The point is…

重点是…

…I want to help you make the web more awesome. It starts here, with this list.

…我想帮助您使网络更加出色。它从此列表开始。

很棒的品牌 (Awesome Branding)

Get a professional logo. It’s rare to find a website or a blog with a great logo. So it’s a good way to build instant credibility.

获得专业徽标 。很少有带有出色徽标的网站或博客。因此，这是建立即时信誉的好方法。
Upload a retina-ready favicon (the square icon on your browser tab). Most sites have 16×16 pixel favicons. On retina screens, they’re blurry. Use X-Icon Editor to generate a 64×64 pixel favicon.

上载视网膜就绪图标 (浏览器标签上的方形图标)。大多数站点都有16×16像素的图标。在视网膜屏幕上，它们模糊不清。使用X-Icon编辑器生成64×64像素的收藏夹图标。
Always use retina-ready images. Simply make sure the image is twice as large as it’s container, then scale it down.

始终使用视网膜就绪图像 。只需确保图像的大小是容器的两倍，然后将其缩小即可。
Use 2–3 colors max. You should have a background color, a call-to-action color, and an accent color.

最多使用2-3种颜色 。您应该具有背景色，号召性用色和强调色。
When choosing a color palette, start with complementary or triad colors. Adjust from there. Good color combos give you a design that tells a story.

选择调色板时，请从互补色或三合色开始 。从那里调整。良好的色彩组合为您提供了一个讲述故事的设计。
Never use true black (#000000). Pure black doesn’t exist so it looks out-of-place online. Black, in reality, is always a dark shade of another color.

切勿使用纯黑色 (＃000000)。纯黑色不存在，因此在线上看起来不正确。实际上，黑色始终是另一种颜色的深色阴影。
Never use a neutral grey (e.g. #cccccc) if you want your design to have a personality. Add a tint of yellow to provide warmth, red to give energy, or blue to create trust.

如果您希望您的设计具有个性，请不要使用中性灰色 (例如#cccccc)。添加黄色以提供温暖，添加红色以提供能量，或添加蓝色以建立信任。

很棒的版式 (Awesome Typography)

Pick a premium font. Use a service like Typekit. It’s been said that 95% of the web is typography. Going with a premium font is the easiest and most inexpensive way to make a good impression.

选择一种高级字体 。使用Typekit之类的服务。据说95％的网络都是排版。使用高级字体是获得良好印象的最简单，最便宜的方法。
Use 2–3 fonts max. More is messy and slows load time. Choose a heading font and a paragraph font. One more if you want a font for special cases.

最多使用2–3个字体 。更多杂乱无章并降低了加载时间。选择标题字体和段落字体。如果需要特殊情况的字体，请再添加一个。
Set a body font size at 16px minimum. Anything smaller is difficult to read on large displays. Scale down to 12px on mobile devices.

将主体字体大小设置为至少16像素。较小的东西很难在大型显示器上阅读。在移动设备上缩小为12px。
Choose a typographical scale like the augmented fourth, perfect fifth, or golden ratio. Use the scale to set font sizes for your paragraph text, H4, H3, H2, and H1. Base your line-heights and text margins on this scale.

选择印刷比例，例如增强的第四比例，完美的第五比例或黄金比例。使用比例尺为段落文本，H4，H3，H2和H1设置字体大小。在此比例尺上设置行高和文本边距。
Design other typographical elements like blockquotes, bulleted lists, numbered lists, captions, help text, alerts, highlighted text, code samples, abbreviations, and even addresses.

设计其他印刷元素，例如块引用，项目符号列表，编号列表，标题，帮助文本，警报，突出显示的文本，代码示例，缩写甚至地址。
Install a custom icon font like Font Awesome instead of using images for common elements like social media logos, navigation buttons, and interactive graphics. An icon font loads faster, scales endlessly, and gives you the freedom to change it’s color as you wish.

安装自定义图标字体(例如Font Awesome)，而不是将图像用于社交媒体徽标，导航按钮和交互式图形等常见元素。图标字体加载速度更快，可无限缩放，并可以自由更改颜色。

很棒的布局 (Awesome Layouts)

Use the rule of thirds for a base layout. Divide your layout into thirds horizontally and vertically, then align key focus points where the lines intersect.

对基本布局使用三分法 。将您的布局水平和垂直地分成三份，然后将关键的焦点对准线相交的地方。
Maintain a vertical grid with a grid system. Break your interface into 8-, 12-, 16-column layouts with generous gutters between columns.

使用网格系统保持垂直网格。将您的界面分为8列，12列，16列布局，各列之间有大量装订线。
Keep a consistent vertical rhythm with a baseline grid. The space between lines of text is just as important as the space between content blocks. Every line of text should have a margin bottom that sits on the baseline.

与基线网格保持一致的垂直节奏。文本行之间的间距与内容块之间的间距一样重要。每一行文字的底边应位于基线上。
White space is luxurious. It’s there to create breathing room and balance. Draw your readers’ eye to what’s most important.

白色空间是豪华的。它在那里创造呼吸空间和平衡。吸引读者注意最重要的内容。
Balance the visual elements of your site like the buttons, inputs, forms, headlines, etc. You should be able to blur your eyes and track the path that you want your users to take.

平衡网站的视觉元素 ，例如按钮，输入，表单，标题等。您应该能够模糊自己的眼睛并跟踪您希望用户采用的路径。

很棒的用户界面 (Awesome User Interfaces)

Use big, bold call-to-action buttons. Every page should have one goal. It’s almost always to click a button. Make sure that button can’t be missed.

使用大号的号召性用语按钮 。每页应该有一个目标。几乎总是单击一个按钮。确保不能错过该按钮。
Add hover and active states to your links, buttons, inputs, and textareas. If you choose to lighten your buttons on hover, you should also lighten the links and the borders on your inputs.

将悬停状态和活动状态添加到链接，按钮，输入和文本区域。如果您选择使光标悬停时变亮，则还应使输入中的链接和边框变亮。
Be consistent with form styling. All textareas and input fields should be styled the same. Same border colors, background colors, on hover, on active, placeholder text, active text, etc. Make sure the tabindex’s are set up correctly so you can tab through them in the right order.

与表单样式保持一致。所有文本区域和输入字段的样式均应相同。边框颜色，背景颜色，悬停，活动文本，占位符文本，活动文本等上的边框颜色，背景颜色相同。请确保tabindex的设置正确，以便可以按正确的顺序对其进行制表。
Change the color of visited links, to let the user know that they’ve been to that page before.

更改已访问链接的颜色，以使用户知道他们之前曾经访问过该页面。
Once you have your logo, colors, typography, layout, and image sizes, establish a style guide. Good user interfaces are built with consistent components that are always styled the same.

拥有徽标，颜色，版式，布局和图像尺寸后，请建立样式指南 。良好的用户界面由始终具有相同样式的一致组件构建而成。

很棒的用户体验 (Awesome User Experience)

Add microinteractions to buttons and other fields. For instance, an “Upload” button should change to “Uploading” or “Processing” after it’s clicked.

将微交互添加到按钮和其他字段。例如，单击“上传”按钮后应将其更改为“上传”或“正在处理”。
No scroll jacking! Never mess with the default behavior of the browser. You might think it’s nice to scroll twice as fast as normal, but it’s not.

没有滚动顶 ！永远不要搞乱浏览器的默认行为。您可能会认为滚动速度是正常速度的两倍很好，但事实并非如此。
Get rid of your homepage slider. They decrease conversions and there are better ways to display more information in a small space.

摆脱您的首页滑块 。它们减少了转换，并且有更好的方法可以在较小的空间内显示更多信息。
Never use a welcome gate. When visiting your homepage for the first time, the user expects to see your homepage.

切勿使用迎宾门 。首次访问您的主页时，用户希望看到您的主页。
Use headlines, subheadlines, lead paragraphs, lists, and captions to make your content easily scannable. Most people who visit a webpage will scan it before they decide to read it.

使用标题，副标题，主要段落，列表和标题使内容易于扫描。大多数访问网页的人会在决定阅读之前先对其进行扫描。
Add descriptive placeholder text to all of your forms, inputs, and dropdowns. If you want someone to fill out a field in a certain way, tell them. For dropdown or select fields, make the first option descriptive. “Select Year” is better than “2016”.

将说明性的占位符文本添加到您的所有表单，输入和下拉列表中。如果您希望某人以某种方式填写字段，请告诉他们。对于下拉菜单或选择字段，请使第一个选项具有描述性。 “选择年份”要好于“ 2016”。
Add HTML5 validation on your forms to make it clear when there’s an error in the form after a user tries to submit it.

在您的表单上添加HTML5验证 ，以在用户尝试提交表单后在表单中出现错误时使其清晰可见。
Make your websites accessible for the visually impaired by avoiding vague link names, reducing clutter, using punctuation, keeping a simple layout, adding alt text to images, using larger text, and maintaining high contrast between text and background colors.

通过避免模糊的链接名称，减少混乱，使用标点符号，保持简单的布局，在图像中添加替代文本，使用较大的文本以及保持文本和背景颜色之间的高对比度，使您的网站适合视觉障碍者使用。
Check your site for broken links with BrokenLinkCheck.com. Fix broken links so people don’t get mad when they click them.

使用BrokenLinkCheck.com检查您的站点是否有损坏的链接 。修复断开的链接，使人们在单击链接时不会生气。

很棒的发展 (Awesome Development)

Make sure your site is mobile-optimized to display responsively on any device. Properly mobile-optimized sites load faster, rank higher, and give your users a better experience.

确保您的网站针对移动设备进行了优化，以便可以在任何设备上正常显示。适当地针对移动设备进行优化的网站加载速度更快，排名更高，并为您的用户带来更好的体验。
Generate and display the optimal image size. If you upload a large image, like a blog post feature image, and you want to display it in other places across the site, like the sidebar, make sure you display the thumbnail version of the image instead of the full-size image.

生成并显示最佳图像尺寸 。如果您上传大图像(例如博客文章功能图像)，并且想要在站点的其他位置(如侧边栏)显示它，请确保显示图像的缩略图版本而不是全尺寸图像。
Add alt and title tags to all images and links. If for some reason an image isn’t loading, your site will display the alt text in its place. Also, when you hover over links, the browser displays the title tag for that link.

向所有图像和链接添加alt和title标签 。如果由于某种原因未加载图像，则您的站点将在其位置显示替代文本。另外，当您将鼠标悬停在链接上时，浏览器会显示该链接的标题标签。
Use  and instead of and to bold and italicize text. They have the same effect, but they have a fundamental difference. is a style. is an indication of how something should be understood.

使用和 d 代替和来加粗和斜体文本。它们具有相同的效果，但是具有根本的区别。 是一种样式。 表示应该如何理解某些内容。
Fix sloppy HTML. When you copy paste content into a WYSIWYG editor (like the visual view in WordPress), it adds lots of unnecessary spans and inline styles. Overtime, your site will become un-readable.

修复草率HTML 。当您将粘贴内容复制到WYSIWYG编辑器(如WordPress中的可视视图)时，它会添加许多不必要的跨度和内联样式。加班，您的网站将变得不可读。
Speaking of which, remove inline styles from your HTML. 99% of the time, your styling rules should go into a CSS file so you can update all instances of a component at the same time instead of page-by-page, line-by-line.

说到这，请从HTML中删除内联样式 。 99％的时间，您的样式规则应放入CSS文件中，以便您可以同时更新组件的所有实例，而不是逐页逐行更新。
Use Sass variables instead of CSS to keep colors and other components consistent across your site. Want to change a color and every shade of that color? Update one line instead of hundreds.

使用Sass变量而不是CSS来使颜色和其他组件在整个站点中保持一致。是否要更改颜色以及该颜色的每种阴影？更新一行而不是数百行。
Link to permalinks not URLs in case you switch domains. For example, when linking to a certain page, your HTML should read, <a href=“/slug-goes-here”> instead of <a href=“http://domain.com/slug-goes-here”>. Same for image sources and CSS backgrounds. If you don’t do this and put the site on a new domain, all of your sources will link to pages and files that no longer exist.

如果您切换域，则链接到永久链接而不是URL 。例如，链接到某个页面时，您HTML应该显示为<a href=“/slug-goes-here”>，而不是<a href="http://domain.com/slug-goes-here”> 。图片来源和CSS背景也一样。如果您不这样做，而是将该站点放置在新域中，则所有源都将链接到不再存在的页面和文件。
Develop a custom plugin or tool to provide unique functionality to your site. Custom software is difficult to maintain but will give you a competitive advantage over similar sites.

开发自定义插件或工具以为您的网站提供独特的功能。定制软件很难维护，但会给您带来与同类站点相比的竞争优势。
Test for cross-browser compatibility by making sure your site displays properly in Chrome, Firefox, Safari, Internet Explorer, and other browsers. Older versions of IE are notoriously bad at displaying websites. Use BrowserStack and check manually.

通过确保您的网站在Chrome，Firefox，Safari，Internet Explorer和其他浏览器中正确显示来测试跨浏览器的兼容性 。众所周知，较旧版本的IE不利于显示网站。使用BrowserStack并手动检查。
Use W3C’s Markup Validation Service to find glaring errors in your HTML. Keep in mind, most sites don’t have perfectly valid HTML. It’s not the top priority but will give you a good sense if there are any errors.

使用W3C的 标记验证服务在HTML中查找明显的错误。请记住，大多数网站都没有完全有效HTML。这不是重中之重，但是如果有任何错误，它将使您有一个很好的认识。
Set up a staging environment to make changes to your current website. Ideally you should have a production site, which everyone sees, and a staging site, where your developer makes changes. Once the changes are ready to go live, push the staging site to production.

设置暂存环境以对当前网站进行更改。理想情况下，您应该具有每个人都可以看到的生产站点和开发人员进行更改的登台站点。一旦更改准备就绪，可以将过渡站点推向生产环境。
Show current year in copyright footer. When you see a site with an old copyright, you assume that it’s no longer active. Use a PHP or similar script to display the current year instead of static text (e.g. © <established year> — <current year>).

在版权页脚中显示当前年份 。当您看到具有旧版权的网站时，您会认为该网站不再有效。使用PHP或类似脚本显示当前年份而不是静态文本(例如©<成立年份> — <当前年份>)。

很棒的搜索引擎优化 (Awesome Search Engine Optimization)

Choose one keyword phrase per page that you want that page to rank for. Focus on optimizing every aspect of that page for that keyword. Not in the put-this-keyword-in-every-sentence sense. Just be smart about how you want it to rank.

每页选择一个您希望该页面排名的关键词 。重点针对该关键字优化该页面的各个方面。并非在每个句子中都使用这个关键字。只要对您希望它的排名保持明智即可。
Set keyword-rich title tags on every page. The title displays as the blue link in Google search results. Limit to 55-characters.

在每个页面上设置关键字丰富的标题标签 。标题在Google搜索结果中显示为蓝色链接。最多55个字符。
Include one and only one H1 tag per page. In most cases, this will be the same as your title tag.

每页仅包含一个H1标签 。在大多数情况下，这将与您的标题标签相同。
Include plenty of H2’s, H3’s, and H4’s within the content of your page to create subheadlines and visual hierarchy.

在页面内容中包含大量的H2，H3和H4 ，以创建子标题和视觉层次结构。
Optimize your page for a specific keyword by including it in the title, H1, subheadlines and in the first 1/3 of the content.

通过将其包含在标题，H1，子标题和内容的前1/3中，为您的页面优化特定的关键字 。
Your meta description displays in search results as the description under the link. Make sure you include it on every page and include the keyword phrase.

您的元描述在搜索结果中显示为链接下的描述。确保在每个页面上都包含它，并包含关键字短语。
Your permalink, which is the URL after the domain (i.e. domain.com/permalink-here/), should include the keyword phrase separated by dashes.

您的永久链接是域名后的URL(即domain.com/permalink-here/)，应包含用短划线分隔的关键字词组。
Google considers domain age in it’s algorithm because a domain that’s registered for many years is likely to be a higher-quality resource. Register your domain for several years in advance. If you registered your domain for 10 years, then you’re serious about your business.

Google会在算法中考虑域的年龄 ，因为已注册多年的域很可能是质量更高的资源。提前几年注册您的域。如果您注册域名已有10年，那么您对您的业务很认真。
On average, the first result on the SERP (search engine results page) for any given keyword leads to a page with more than 2000 words per page. When writing a blog post or creating a page that you want to rank well, try to hit at least 2000 words.

平均而言，任何给定关键字在SERP(搜索引擎结果页面)上的第一个结果都将导致该页面的每页超过2000个单词 。在撰写博客文章或创建要排名的网页时，请尝试至少输入2000个单词。
Always create a sitemap as a sitemap.xml file and put it in your root directory so it displays on domain.com/sitemap.xml. It tells Google where all of your pages sit and should automatically update when you add new content. Submit it to Google through Webmaster Tools.

始终将站点地图创建为sitemap.xml文件，并将其放在您的根目录中，以便显示在domain.com/sitemap.xml上。它告诉Google您所有页面的位置，并在您添加新内容时自动更新。通过网站站长工具将其提交给Google。
Add your website Google Webmaster Tools so you can see how Google indexes your site and stay updated if there are any critical issues.

添加您的网站Google网站管理员工具，这样您就可以查看Google如何索引您的网站并在出现任何严重问题时保持最新状态。
To help your images rank, always rename your images and other files before uploading to your website (e.g. rank_for_this_keyword_phrase.png).

为了帮助您的图像排名，在上传到您的网站之前，请务必重命名图像和其他文件(例如rank_for_this_keyword_phrase.png)。
Include a robots.txt file on your site to tell web crawlers which pages they should and should not index.

在您的网站上添加robots.txt文件，以告知网络抓取工具它们应该和不应该索引哪些页面。
Add a canonical redirect to point the non-www to the www version of your website, or vice versa.

添加规范重定向，以将非www指向您网站的www版本，反之亦然。
Research and integrate LSI keywords (latent semantic indexing) on every page to help the page rank for the main keyword phrase. Find the LSI keywords by Googling your keyword phrase and searching for the “Searches related to…” links.

在每个页面上研究和集成LSI关键字 (潜在语义索引)，以帮助对主要关键字词组进行页面排名。通过搜索关键字短语并搜索“与…相关的搜索”链接来找到LSI关键字。
Make sure to actively interlink your content. Every page on your site should be accessible through three or fewer clicks from the homepage.

确保主动链接您的内容 。您可以通过从首页单击三次或更少的点击来访问网站上的每个页面。
Add structured data on relevant pages to help Google properly index your content. Page types that need custom structured data include people, products, events, organizations, movies, books, and reviews. Use Schema Creator to generate structured data.

在相关页面上添加结构化数据 ，以帮助Google正确索引您的内容。需要自定义结构化数据的页面类型包括人员，产品，事件，组织，电影，书籍和评论。使用Schema Creator生成结构化数据。
Check Google’s PageSpeed Insights to make sure you’ve fixed all of the common problems that slow down your page speed. The faster your site loads, the higher it’ll rank.

检查Google的 PageSpeed Insights ，以确保您已解决所有降低页面速度的常见问题。您的网站加载速度越快，其排名就越高。

很棒的页面速度 (Awesome Page Speed)

Keep page weight under 2MB. Use tools.pingdom.com to check the page weight for your primary landing pages. Anything more than 2MB is too heavy.

将页面重量保持在2MB以下 。使用tools.pingdom.com检查主要目标网页的页面重量。超过2MB的空间太重了。
Keep page requests under 50. Every file and image on any given page is a HTTP request. The fewer the number of requests, the faster it’ll load. The average webpage has 70 requests. Use GTmetrix to see your requests.

将页面请求保持在50以下 。给定页面上的每个文件和图像都是HTTP请求。请求数量越少，加载速度就越快。平均网页有70个请求。使用GTmetrix查看您的请求。
Design page elements with CSS instead of background images. Never use an image to show a button, form, or other common component on your site. CSS loads faster and is more flexible in responsive layouts.

使用CSS而不是背景图像设计页面元素。切勿使用图片显示网站上的按钮，表单或其他常用组件。 CSS加载速度更快，并且在响应式布局中更加灵活。
Optimize images before uploading them to your site. Tools like TinyPNG can reduce your image file sizes by 80–95% without losing resolution or image quality.

在将图像上传到您的网站之前对其进行优化。 TinyPNG之类的工具可以将您的图像文件大小减少80–95％，而不会降低分辨率或图像质量。
Set up a Content Delivery Network to host your images and other larger files in several locations around the world. CDNs store and deliver your files from strategically located servers to maximize loading speed depending on your visitor’s physical location.

设置内容传送网络以在全球多个位置托管您的图像和其他较大文件。 CDN可以从战略位置服务器存储和传送文件，从而最大程度地提高访问速度，具体取决于访问者的实际位置。
Minify JavaScript, HTML, and CSS by using compiling and compression tools prior to uploading files to your website. For JavaScript, use Closure Compiler. For HTML, use HTML Minifier. For CSS, use YUI Compressor.

在将文件上传到您的网站之前，请使用编译和压缩工具缩小JavaScript，HTML和CSS的大小。对于JavaScript，请使用Closure Compiler 。对于HTML，请使用HTML Minifier 。对于CSS，请使用YUI Compressor 。
Move render-blocking JavaScript to the footer. The only scripts that should be placed in the header are the scripts that immediately affect the design of the page (e.g. custom fonts).

将阻止渲染JavaScript移至页脚 。标头中唯一应放置的脚本是立即影响页面设计的脚本(例如，自定义字体)。
Avoid landing page redirects. Redirects trigger an additional HTTP request which delays page rendering.

避免登录页面重定向 。重定向会触发其他HTTP请求，从而延迟页面渲染。
Leverage browser caching by setting expiry dates for pages and page types that aren’t updated often. Browser caching instructs the browser to load previously downloaded pages from the local disk rather than through the network.

通过为不经常更新的页面和页面类型设置有效期来利用浏览器缓存 。浏览器缓存指示浏览器从本地磁盘而不是通过网络加载以前下载的页面。
Enable gzip compression in your server configuration. Compression can reduce the transferred response time by 90% which improves the time to first render for your pages.

在服务器配置中启用gzip压缩 。压缩可以将传输的响应时间减少90％，从而缩短了首次呈现页面的时间。
Enable Keep-Alive on your server settings to allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.

在服务器设置上启用“ 保持活动” ，以允许同一TCP连接发送和接收多个HTTP请求，从而减少后续请求的延迟。
Upgrade to a dedicated server or premium hosting service to improve server response time. When you use a shared hosting environment, your site is typically one of hundreds on the same server. If any one of those hundred sites is experiencing a lot of traffic, it’ll slow down your page speed.

升级到专用服务器或高级托管服务，以缩短服务器响应时间。使用共享主机环境时，您的站点通常是同一服务器上数百个站点中的一个。如果这一百个站点中的任何一个正在经历大量流量，它将降低您的页面速度。

很棒的图形设计 (Awesome Graphic Design)

Get a custom ebook cover for your opt-in bonus. They’re not difficult to create and can make a huge difference in your conversion rate.

获取自定义电子书封面，作为您的加入奖金。创建它们并不难，并且可以大大提高您的转化率。
Design a custom graphic or illustration for your homepage or sales pages. A nice illustration that’s done specifically for your site is an easy way to make your site more memorable.

为您的主页或销售页面设计自定义图形或插图 。专门为您的网站做的一个很好的说明是使您的网站更容易记忆的简单方法。
Create a custom or series of custom blog post feature image designs. That’s the image that spreads on Facebook, Twitter, Pinterest, etc. When a user sees a certain type of image associated with a blog post, they should know that it was written by you.

创建一个自定义或一系列自定义博客文章功能图像设计 。那就是在Facebook，Twitter，Pinterest等上传播的图像。当用户看到与博客文章相关的某种图像时，他们应该知道它是由您编写的。
Display custom avatar illustrations or caricatures for yourself and each member of your team. Custom caricatures can be less expensive than hiring a professional photographer each time you add someone to your team. Plus, it’s a nice gift to a new team member.

显示您自己和团队中每个成员的自定义头像插图或漫画 。自定义漫画比每次将某人添加到团队中都要聘请专业摄影师便宜。另外，这是给新团队成员的礼物。
Custom infographics that display data and other content in a visual way tend to get more traffic than the blog post equivalent. People like to share infographics on sites like Pinterest or re-post them on their own sites with a backlink back to your site.

以可视方式显示数据和其他内容的自定义信息图表往往会比博客文章获得更多的访问量。人们喜欢在Pinterest之类的网站上共享信息图，或者通过反向链接回到您的网站，将其重新发布到自己的网站上。
If you produce a video or series of videos, you should have a custom video intro and/or outro to give it a professional touch. Not to mention other video graphics or animations that’ll help your brand stick out.

如果您制作一个视频或一系列视频，则应该有一个自定义的视频介绍和/或视频集，以使其具有专业的风格。更不用说会帮助您的品牌脱颖而出的其他视频图形或动画了。

很棒的网络安全 (Awesome Web Security)

Install an SSL Certificate to allow a secure connection from a web server to a browser. Most checkout software requires an SSL Certificate if you’re accepting credit cards. Google has said that an SSL Certificate will improve your search rankings.

安装SSL证书以允许从Web服务器到浏览器的安全连接。如果您接受信用卡，大多数结帐软件都需要SSL证书。谷歌表示，SSL证书将改善您的搜索排名。
Keep your software and plugins updated. When WordPress and other CMS software releases a update, it’s typically to patch up a vulnerability. If you don’t, it’s only a matter of time before your site will be hacked.

保持软件和插件更新 。当WordPress和其他CMS软件发布更新时，通常是为了修补漏洞。如果您不这样做，那么将被黑客入侵只是一个时间问题。
Set up a double authentication login gate for your admin pages. Most hacks start with the login page.

为您的管理页面设置双重身份验证登录门 。大多数黑客都是从登录页面开始的。
Check for and remove malware. If your site has been hacked before, they likely added corrupt files that aren’t easy to find. If you don’t remove it promptly, your site might be blacklisted by Google which tanks your rankings and warns users to leave when they visit.

检查并删除恶意软件 。如果您的网站以前曾被黑客入侵，那么他们可能会添加不容易找到的损坏文件。如果您不及时删除它，则您的网站可能会被Google列入黑名单，从而排名并警告用户访问时退出。
Never leave your admin username as “admin”. Delete the default admin account and create a new one with a different username.

切勿将您的管理员用户名保留为“ admin”。删除默认的管理员帐户，然后使用其他用户名创建一个新帐户。
Regularly back up your database and website files. Most backup software and plugins only back up your database, which includes the data and content. But if you lose your site, you’ll need to have a backup of the files to restore it.

定期备份您的数据库和网站文件 。大多数备份软件和插件仅备份您的数据库，其中包括数据和内容。但是，如果您丢失了站点，则需要备份文件以将其还原。

很棒的内容 (Awesome Content)

Create a custom error 404 page that’ll display anytime a user tries to visit a page that doesn’t exist. Use the 404 page to direct them back to the homepage or help them find what they’re looking for.

创建一个自定义错误404页面 ，该页面将在用户尝试访问不存在的页面时显示。使用404页面将他们定向回到首页，或帮助他们找到所需的内容。
Other than your homepage, your about page is likely the most visited page on your site. Make sure it represents you and your company well.

除主页以外，您的“ 关于”页面可能是您网站上访问量最大的页面。确保它很好地代表了您和您的公司。
A contact page will help people contact you, but it’ll also build trust between you, your visitors, and even Google. When determining how to rank your site, the bots will find your contact page and look for an email, phone number, and address. Contact info tells Google that the site is slightly more trustworthy.

联系人页面将帮助人们与您联系，但同时也会在您，您的访问者甚至Google之间建立信任。在确定如何对网站进行排名时，漫游器会找到您的联系页面，并查找电子邮件，电话号码和地址。联系信息告诉Google该网站值得信赖。
It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.

在整个站点中策略性地散布选择表单是一件好事，但是挤捏页面却只包含高转化率的选择表单也很聪明。如果您希望有人订阅，请链接到该页面。
When someone subscribes to your list, make sure you send them to a confirmation page asking them to confirm their email. If they don’t confirm their email right away, they might forget about it and never come back.

当某人订阅您的列表时，请确保您将他们发送到确认页面，要求他们确认他们的电子邮件。如果他们没有立即确认电子邮件，他们可能会忘记它并且永远不会回来。
After they click the confirmation link in the email, send them to a thank you page where they can see what’s next. It’s a page every subscriber will see and they’ll only see once, so it’s a perfect opportunity to give them a deal or encourage them to make a purchase.

他们单击电子邮件中的确认链接后，将其发送到“ 谢谢”页面 ，他们可以在其中查看下一步。这是每个订户都会看到的页面，他们只会看到一次，因此这是给他们交易或鼓励他们进行购买的绝佳机会。
Your website or theme should have a landing page template that you can use when you need your users to take a specific action.

您的网站或主题应具有一个登陆页面模板，当您需要用户执行特定操作时可以使用该模板。
If you sell something, make sure you have a nice-looking sales page. Start with a headline. Make room for your pitch. Maybe add a sales video. And direct people to purchase at the bottom of the page.

如果您出售某物，请确保您有一个漂亮的销售页面 。从标题开始。为您的沥青腾出空间。也许添加销售视频。并指示人们在页面底部进行购买。

很棒的社交媒体 (Awesome Social Media)

Limit the number of social media buttons on your posts and pages because each button runs a script that adds extra load time to the page. Only include the 1–5 buttons, e.g. Facebook, Twitter, LinkedIn, Pinterest, Google+, etc. where your content most often gets shared.

限制帖子和页面上社交媒体按钮的数量，因为每个按钮都运行一个脚本，该脚本会增加页面的加载时间。仅包含1-5个按钮，例如Facebook，Twitter，LinkedIn，Pinterest，Google +等，这些按钮最常会共享您的内容。
Create social media graphics for your Facebook page, Twitter account, and YouTube channel. Custom graphics make an immediately positive impression that’ll encourage first-time visitors to like, follow, and subscribe to your page, profile, or channel.

为您的Facebook页面，Twitter帐户和YouTube频道创建社交媒体图形 。自定义图形立即给人留下了积极的印象，将鼓励首次访问者喜欢，关注和订阅您的页面，个人资料或频道。
Set up Facebook Open Graph META tags to make sure your content is shared correctly on Facebook. Use the Facebook Debugger to check your homepage, posts, and other pages to see how they display when someone shares that URL.

设置Facebook Open Graph META标签 ，以确保您的内容在Facebook上正确共享。使用Facebook调试器检查您的主页，帖子和其他页面，以查看当有人共享该URL时它们的显示方式。
Set up Twitter Cards to automatically attach rich photos and videos to your tweets when a URL on your site is shared. Get started with Twitter Cards here.

设置Twitter Cards，以便在共享站点上的URL时将丰富的照片和视频自动附加到您的tweet。从此处开始使用Twitter Cards 。
Set up Google+ Snippets to customize what people see when your site is shared on Google+. Use the Snippet guide to generate the code. Even if your site doesn’t get a lot of Google+ love, Google will know if you add the meta data correctly and that should carry some weight.

设置Google+代码段，以自定义在Google+上共享您的网站时人们看到的内容。使用代码段指南生成代码。即使您的网站没有受到Google+的广泛欢迎，Google也会知道您是否正确添加了元数据，并且应该具有一定的分量。
Tuck away the social media icons on your site that link back to your profiles. Make them small or only show them in the footer. The purpose of social media marketing is to get people back to your site, not the other way around.

隐藏您网站上链接回您的个人资料的社交媒体图标 。将它们缩小或仅在页脚中显示。社交媒体营销的目的是使人们回到您的网站，而不是反过来。

Alright, what am I missing? Is there anything you do as a freelancer or business owner to make your sites more awesome?

好吧，我想念什么？作为自由职业者或企业主，您有什么工作要做，以使您的网站更加出色？

I’d love to hear your feedback. Leave a comment or tweet @wntart.

我希望听到您的反馈。发表评论或鸣叫@wntart 。

If you think more people should see this list, please recommend it. Let’s make the web more awesome!

如果您认为更多的人应该看到此列表，请推荐它。让我们让网络更加精彩！

Cheers,Nick

干杯，尼克

P.S. If you need help with anything on this list, hire designers here or developers here. We have the world’s best freelancers and they’re happy to help!

PS：如果您需要有关此列表中任何内容的帮助，请在此处雇用设计师或在此处雇用开发人员。我们拥有世界上最好的自由职业者，他们很乐意为您提供帮助！

If you want to join AwesomeWeb as a freelancer to get more clients, sign up here.

如果您想以自由职业者的身份加入AwesomeWeb以吸引更多客户，请在此处注册。

翻译自: https://www.freecodecamp.org/news/101-ways-to-make-your-website-more-awesome-79c934dd2a11/