SEO mistakes I've made and how I fixed them
blog.maximeheckel.com
blog.maximeheckel.com
This blog issue illustrates the too-complex problemof Gatsby - you don't find out about some minor configuration error until it gets indexed weeks later, and you lose substantial business due to the long feedback loop of SEO. Add to that the long compilation time, and you're looking for alternatives soon after investing massive resources in a setup.
Hugo had a different problem the last time we tried it. In a test setup we did, a small configuration issue spewed your entire server and configuration data to anyone who visits a 404 link. Any issue with the setup created the volcano of sensitive data vulnerability. Didn't take the time to dig in any further.
Wordpress is a behemoth, but because of that and slow hosting service providers it is incredibly slow to use on a hosted shared server, without caching. On top of that thousands of bots on the web are looking for and sending post requests to Wordpress admin files or php plugins (even if you're behind Cloudflare).
There are faster and more performant ways to SEO, especially if you can code.
I haven't had that experience with Hugo, but I pushed the files up to S3/Github Pages/Netlify and had them served from there. I'm a big fan of the concept.
I've had a great time with Gridsome, the VueJS version of Gatsby. I don't understand why, with React, you need to install a 3rd-party dependency just to update your meta tags. Like, it should either be part of your main layout when you set up your site (my Laravel approach), or there should be a built-in configuration for it, like Gridsome has (https://gridsome.org/docs/head/). Every site needs this stuff, so it should be a first-class feature.
You don't. This seems to be a common misunderstanding. You're free to and should write your meta tags (and everything else inside the head tag) in plain React components. It's enough to do this on the server side, but the document title should be updated client side, too. React-helmet is an antipattern.
Such as ? ...
I am part way through this, just trying to get a holistic view.
also if you have feedback, hit me up anytime via "fe (at) f19n dot com"
for bigger projects by now next.js became very popular - and works if you start with a webperformacne/speed focused approach
but you can search engine optimize everything (that does server side rendering / that is not client side only), well everything but TYPO3 (a CMS cancer in Europes German Speaking Markets)
Not to say that you couldn't construct some monstrosity of a site with Hugo, but you're more likely to do that with a mess of half-maintained Wordpress plugins.
I get 98 on all lighthouse scores.
This may not be true for your website, but on many Gatsby-driven websites there's heavy reliance on JavaScript that doesn't actually add very much. The really good thing about Gatsby is that it makes moving between pages more efficient because it only downloads the content that changes and then it leverages React to seamlessly transition the parts that change when you move from one page to another. It does that really well. The problem is that a lot of websites that use Gatsby are blogs, and that's not how people read at blogs; most of the time people go straight to a page from Google, and then go back to Google after they've read that page. They don't move around the website. All that JS to make that happen nicely does nothing.
That's certainly the experience I had when my website was Gatsby based. I was sending people a chunk of JS that that just didn't benefit from. If Gatsby suits your visitor model then it's a great tech choice, but I found that something even more static (11ty in my case) worked better for people who came to my website.
Also, for what it's worth, I get 4 100s in Lighthouse. :)
First, I figure out how much interest is in a phrase that is related to what my site is about. I'll go to Google and Bing and start searching for various keywords and see what autocomplete suggests. If the suggestions are relevant, I'll follow them and note roughly how many results there are and how relevant the top results are to the phrase.
Next, I'll go to trends.google.com and compare the most relevant phrases to see how many searches are being performed for each. Then I compare that against the list of quality results to see where the biggest gaps are. That helps me to identify the phrase that I want to target.
Then, I'll plug the phrase changes into the page that I want new users to land on (typically just the homepage, but this can sometimes be a particular section or article, depending on the site and its goals).
Then, I'll go to seowarp.com and throw the page through a Full Scan which reports on phrasing information. Near the bottom, there's a "Duplicate Content" section that will compare similarities between pages, so if there's anything that is textually similar to my target page, I'll adjust it to drive more attention to the target one for relevancy. I'll also do a Single Page scan for my target page. The results of that scan will have a "First Five Targetted Keywords Detected" section that will show any keyphrases that are found on the page. Again, I'll make sure that my target phrase appears and cull any others that might be taking away any attention from it.
After that looks good, I'll distribute links to the page that contains the phrase. Usually I'll see results start popping up within a week, but can take longer depending on the strength of the campaign.
The biggest case I can remember is a former employer who ran a niche search engine. They were trying to get ranked anywhere, but almost never showed up in any results. It didn't take too long to see what was going on. It turns out that a developer had plugged in a regular expression to generate a canonical link on any given page. However, this regex was case-sensitive and was only whitelisting lowercased letters. So when you would go to the page "/job/12345/Data-Engineer", it would tell search engines to go to "/job/12345/ata-ngineer" instead. The link would still work since the site would use the "12345" portion as the page's ID, but nobody was searching for "ata ngineer". Literally just putting the letter "i" in the regex's flags was enough to start ranking on the first page for a large number of the company's listings (though reindexing took several weeks since the problem was large and existed for well over a year at that point).
With that said, it's quite amusing how small SEO changes can dramatically improve search visibility. It's one of the reasons why I point people to using Wordpress + SEO plugins like Yoast, which deal with most if not all of these edge cases automatically.
Are there any of these that are any good? I know next to nothing about SEO and would love to learn a bit more, but I've never found any useful resource that isn't some kind of crappy spam-blog or so old that I'm left doubting if the information is still relevant.
You could try my on-page SEO guide that's more aimed at developers (https://www.checkbot.io/guide/seo/) and my Chrome extension that checks these SEO factors for you automatically (https://www.checkbot.io).
I tried to keep the SEO guide concise with everything backed up with links to authoritative sources like Google or Mozilla.
That's pretty much it but it's obviously easier said than done.
Generating backlinks is a skill you can aquire, but devs tend to sneer at it since a) it looks a lot like sales and b) there A LOT of shady practices
By comparison, building backlinks and writing content you can always sink in more time, and derive benefit from that extra time investment. So the plugin stuff is more like foundations. You need it, but it's not what your strategy is.
And "building backlinks" is a lot about outreach. You need the content worth linking to, but there's also things you can do to encourage people to link to content that they already like. Relationships with other sites, encouraging people to tweet/like/reddit/socialwhatever your content, that type of stuff.
Another "technique" is to crawl sites that link out to 404s, or outdated guides. Especially if it's a high value site. Then email them and suggest their users might prefer <insert better widget/site/etc that you own here>.
It ("on site" SEO) has zero bearing on what other websites are doing. SEO is just an umbrella word that also encompasses "off site" SEO like backlink building.
Managing on-page technical factors (which is what a plugin can help you with) is primarily a matter of successfully missing your foot with hundreds of potential bullets.
Getting SEO to "good" still requires good content and link building.
This is pretty good advice, though what we see more commonly is that Yoast is misconfigured (or not configured at all), which causes more problems than it solves. Another thing that happens is solutions like Yoast will throw lots of errors that actually don't matter because Yoast's goal is to drive interaction with Yoast. It's not always easy to make the distinction.
But yes, for a lot of people "just use Wordpress" is a good solution, and an attentive Yoast install can be super helpful!
Depending on your setup you may or may not want categories/tags/etc. to be included in your sitemaps but Yoast will put them there.
In general I think Yoast (or really anything) is likely to be a net positive and while it makes some things easier it still requires work and thought.
It collects the live cycle of the page load, including static Dom, Dom ready Dom, JS executed Live Dom and runs various tests on those (plus some on the collected HTTP responses). All of the issues outline would have been fetched. Tests can be extended so any special cases minded.
See here https://chrome.google.com/webstore/detail/franz-enzenhofer-s... a few thousand+ installs by now. If I would code it today it would make it part of the dev tools propably.
The book to understand this approach to SEO and the rules in this framework is free for Hacker News readers btw https://gumroad.com/l/understanding-seo/hacker-news
and extendable
At the end it shouldn't be like this, it's the search engines responsibility to surface the right content for the right audience.
I wish we had as many articles about how to communicate ideas in a more clear way as we have for how to annotate correctly your html code for the search engines.
The websites I'm thinking about, though, tended to be marketing websites ('microsites') for large consumer brands, that really didn't do a great deal functionally, and didn't need particularly robust security in the grand scheme of things.
If you're just starting in your static site journey after moving away from something like Wordpress, you'll probably feel like you discovered the holy grail for a while. Yes, Netlify is amazing at first, and yes, it's a pleasure to build sites without fighting a wonky old-school PHP CMS.
However, this will wear thin after you start to care about creating regular content and the nuances of SEO (as the person who wrote this article discovered). I've gotten SSG fatigue over the last couple of years and have completely switched over to building marketing sites and blogs in Webflow.
No worries about build process, no setting up SEO from scratch every time, no wiring up a wonky headless CMS and building rigid content models, no writing blog posts in VScode and then forgetting how I set up my front matter, no PITA trying to set up a new section on your site and then realizing it breaks your headless CMS wiring, Etc. etc.
The second was to neglect link building. Google wants authoritative websites. It also helps to be at the end of everyone's navigation path, no matter what they look for.
For everything else, there's the Google Search console.
And this sort of thing doesn't just make a difference in indexing, but also in other places like analytics – Google Analytics will see a page with a slash and no slash separately, for example, which makes it hard to get an accurate picture of what's performing.
We made a list of these factors here, this is #21 but maybe we should move it up! https://www.ercule.co/seo-content-performance/search-engine-...
Basic SEO advice: look in the Google search console and do what Google says you should do.
I was very close to assuming the site is broken and leaving, until I figured out how to re-enable scrolling.
I don’t know what i can do to debug for you apart from mentioning i’m right now using iphone 7 , safari and ios 13.6.1
Anyone care to do a summary? It seems quite interesting.
- Have canonical pages
- Don't trust code you haven't read/don't understand
- Make sure you view changes you make and that they are actually made when you think they are
- Make sure what you want to be rendered on the page is actually rendered
- Write tests
Seems like a bunch of tips for people who are just starting out with web development, to not miss the most obvious problems. How this post is currently on the top of the front page will forever be a question for me. I'm glad more people are discovering SEO and it's importance, but this guide is specifically for one technology and are general tips about development rather than SEO really.
OP/Author here, to me too trust me
The search engines these days cannot even function without a JS interpreter, something that surely increases the complexity and cost of building one.
Long gone are the days when one cared about semantic elegance of HTML code, per-site optimized CSS stored in an external file for easy caching, only occassional use of JS for easier navigation...
Nowadays you don't build websites, you have to build "apps". It's one of many signs of the "appification" of Internet.
Why would I care about semantic HTML? HTML is at large generated for me, and is an implementation detail. I don't want to read nor "craft" HTML.
> per-site optimized CSS stored in an external file for easy caching
Is this not the standard nowadays, getting CSS files from a cache typically on a proxy like cloudflare?
The AMP spec mandates the exact opposite, for whatever that's worth as a "standard."
well, on the other hand manually crafting the syntax-highlighted block of code isn't a lot of fun either
It’s perfect for personal sites, landing pages, documentation, etc.
That said, how would you propose to do syntax highlighting instead of
> just a wall of <div>s and <span>s, for every single visible character
? Rather than being a wall, it looks to me like it's actually a tree of <divs> and <span>s for every line and every _token_.
I think the author has used Prism[1], so I assume the highlighting was done client-side, but even if you were to do the task server-side I think you'd end up with similar HTML/CSS, no?
What would be a better approach to solving the same problem?
[1]: https://prismjs.com/
Of course you'd use spans to do syntax highlighting, just like you'd use JavaScript to do interactivity. You know what the commenter means–using these in places where they aren't necessary at all.
Agree that it's a mess of div and spans, but it does the job.
They came up with an app, full of JS. Don't get me wrong, I write apps for my own use (quasar / vue) so I like frameworks, but I wanted a simple plain page.
Since they wanted to use a framework, I asked them to use https://motherfuckingwebsite.com/ as the template and after some initial gasps of horror we had a working web page.
I wonder if at some point while building a JS interpreter in the early days of Google for search reasons, they realized that the interpreter they spent all the time on could be packaged into a new browser to compete with Internet Exploder. Maybe instead it was all a conscious decision at the beginning.
Google has parsed JS-generated content from businesses I work at and made it searchable within their index. That's a hoax?
If someone writes a buggy, inefficient C program, we fix the bugs, we don't abandon C and rewrite everything in assembly because the resulting machine code is prettier.
Several languages have popped up to address buggy, inefficient C programs and the problems they cause.
Every web developer in 2020 is a React dev. To a man with a React hammer, everything looks like a React nail. Hence, Gatsby.
In neither case did it really make sense to build simple marketing sites and blogs with those technologies, they are best suited for dynamic web apps.
But, the technology that all the devs want to put on their resumes will ultimately end up powering everything. Common sense be damned.
After the static site hype dies down I am hopeful that Webflow will become the defacto solution for marketing/blog sites going forward and the design/marketing teams can fully own them and manage all changes. I'd be happy if I never had to touch another marketing site again.
“Site builders” like wix, Squarespace, etc. are basically all the same. They sandbox you into a selection of annoyingly rigid templates and a dumbed down UI and abstract the important stuff away.
Webflow is more of a “visual coding” platform. If you don’t know basic html/css you’ll have a hard time using it. It spits out static sites on the front end with proper readable html/css and SEO.
It’s a bit of a steep learning curve to get the hang of their UI but after a few hours, building things is insanely fast and you have control over everything.
I rebuilt my company’s entire site in it in about 4 hours and was blown away how easy it is to update things.
I’ve heard pretty much all YC companies are now using it to build their marketing sites because of this.