Website best practices
This is the first website I ever created, which taught me a bunch of things about “website best practices” that I thought to share here since most easily discoverable materials about this seem to be SEO marketing bullshit. As a disclaimer, the traffic on my site is very low so I wouldn’t take this advice too seriously at this point of time.
Content
I’ll just say this upfront: The content of your website is what really matters. If it’s superb, you can maybe do with posting link to your sites somewhere and going viral (you wish). If your content is shit, then everyone will see it and no optimization will ever help you.
Most likely your’s is a very quiet voice in the vast internet, but you do have something to say and so struggle making the search engines understand that your stuff matters. I’ll try to help with that.
Copyrights and attribution
Use images on your site, a lot.
To make your site pleasing it needs to have lots of pictures, and practically speaking you won’t be making most of those yourself, and you can’t go about asking the permission of the author every single time. You may also want to quote text and upload/link to video material. IANAL, but my advice is to read about Fair use and interpret it generously in your own favor. Just put in the effort to point the reader to the original author of the material. The odds are no one is going to come after you.
Similarly for quoting Wikipedia and the like I would think it fine to just provide a link to point the reader to the source, but if you want to make a more formal attribution like seen on my site, here’s how to do it:
To attribute an image on Wikipedia, click it and navigate via “More details” or some other manner to Wikimedia Commons, then click “Use this file on the web” and copy the attribution text field in your prefered format.
To attribute a Wikipedia text page click “Tools -> Cite this page” and copy the attribution style you like the best.
If you have a cool image saved but don’t know its source, use the “Search by image” tool on Google’s search engine. If that doesn’t work out, try Yandex or other similar tools (“reverse image search”).
Mobile support
You are probably creating and testing your website on a PC, but these days most users will be using mobile devices in the portrait mode. For a simple solution, use CSS @media screen options to build two different layouts. Test on your own phone.
Cookies and analytics
You certainly know how these days every page shows those “Accept cookies?” popups on the first visit. The short story is that if you want to use Google Analytics or a similar heavy weight analysis tool, then you have to do a similar thing to get the user’s consent, legally speaking.
If you don’t want that shit on your website but still want to get a little bit of information about how people use your site, then what you can legally do is use services like https://www.goatcounter.com (used on this site) which properly adhere to GDPR and other such regulations.
All users who have installed uBlock Origin or similar browser addons will be invisible to either form of analysis.
Fonts
Make sure you are not using fonts you downloaded from some random site, as they could be commercial ones. Get all your fonts from reputable free fonts sites such as https://fonts.google.com.
Videos
Video files are typically large and might cause too much traffic on your site/provider. Upload the videos on YouTube or similar and embed the links on your site using the tools they provide. You may also get SEO benefit for linking from the YouTube page to your site.
Search engine dashboards
Google and other search engines provide tools that tell you how their crawlers see your site and what issues there might be from that perspective (spoiler: a lot). They also track search result clicks leading to your site and whether your site was shown in results (“impressions”). I definitely recommend checking the Google tool out since they basically have a monopoly on search. Other search engines have similar tools but they don’t seem that useful because the traffic is so small.
Signing up is pretty easy, you just need to upload a certain file they provide on your site.
On my website there are lots of pages on different topics and I got quite many surprising results about what pages are most prominent in search results. I find it kind of fun to go back to that topics and tweak the pages to see if I can further improve the ranking.
Sitemap
Probably unnecessary, but if you build your website in a systematic way you can probably quite easily generate an XML sitemap (ie a list) of your pages and upload it to the search engines using their dashboards. The search engines might more eagerly index your new pages if you automatically update this file on every update.
Page optimization
Supposedly search engines will prioritize sites that load fast, but you will also be doing a favor for your users by paying some attention to this.
Google has an excellent tool https://pagespeed.web.dev/ that simulates loading of your website on shitty devices and internet connections (ie what people normally use). It points out the things you should improve. Because I’m a nerd, I tried scoring 100 in their tests and here are some things I learned:
- Images embedded on the page should be very small. Downscale your images and save them in the AVIF format (modern JPEG replacement basically). Make the high quality versions available by clicking the image.
- Loading fonts from Google’s servers takes quite a bit of time, so you should host the needed ones on your website.
- https://gwfh.mranftl.com/fonts this weirdly named site is very useful for the purpose.
- Consider also uploading the font licenses on your site and making them somehow discoverable.
Metadata and AI optimization
Supposedly search engines reward sites that include metadata to describe the textual and image content. For images it seems reasonable: How would they know to show your cool cat photograph for in search results for “cat” if there wasn’t something textual indicating that your picture contains a cat? Until recent advances of AI, the search engines did not “understand” images at all, they really needed the metadata to tell what it’s about.
Now companies that build AIs scrape all the websites they can find and teach their methods by associating the metadata you provide with the image contents. Similarly, the associate any metadata you choose to provide with the textutal contents of your page.
So if you want to help both the search engines and the AI, you should include all the metadata you can. Here is also a link to gwern arguing in favor of doing so: https://gwern.net/blog/2024/writing-online
You should add for every <img> tag a description of the contents using the alt option. For every page you should summary the contents by adding a <meta name="description"> attribute.
If you want to go further in helping your content be understood by AI, you can use https://json-ld.org format to include on your HTML pages additional metadata (used on this website). In theory this “semantic web” can also have applications for human users but to me seems unlikely.
Favicon
Provide one, it will show directly in search results and you probably get penalized for not having one.
Promotion
In the end, you need to post links to your site somewhere for people to find it. Used well, the search engines will help, but never count on them.
A basic metric for value of your site used by the search engines is the number of links from other sites to yours. A simple tactic is to post your website link on a forums or social media, saying “hey I wrote about this topic here”. When other people start making such links to your site, you are good.