I've recently started to lean harder into considering freelance web development as a viable career path as of late. And with that new avenue, I've been diving into different ways that freelancers promote themselves and use digital marketing techniques to rank higher in search engines (Search Engine Optimization; SEO) to their advantage. What I came across was a couple really simple tips to instantly help your website rank better.
Those Juicy Meta Tags
You know those things at the top of the html doc you're working on? You know, the ones that let you specify a title and do something for viewport scaling? Well, those pesky things can actually help web crawlers and search engines better recognize what your site is really about.
Title
This little guy is probably familiar to most web developers but its possible that it didn't really register as anything really that important. Of course everything has to have a title so just putting up any old thing will do. However, this is what google or another search engine will use to discover your site. Let's take a look at an example of my personal site.
<head>
<meta charset="UTF-8">
<!-- META VIEWPORT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TITLE -->
<title>Christian Kastner | Software Engineer</title>
...
</head>
For my site, I have my name separating my title as a software engineer. If we do a little google search for little ol' me, we'll find
That little title tag is front and center here. Hence the significance of this tag is way bigger than just something we slap on there. It now becomes the single largest piece of data that people will see upon a google search. For instance, this blog that you're reading right now will use the title of this blog as a title tag. So we might wanna really think about creating a title that's applicable, descriptive, and related to important terms that users will search for.
Description
This meta tag also takes on significance in the Google arena as it'll lie directly below our title tag and be another very important piece of information that can make or break oncoming web traffic. It's set with
<head>
<meta charset="UTF-8">
<!-- META VIEWPORT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<!-- DESCRIPTION -->
<meta name="description" content="Frontend Software Engineer with a quantitative background, who loves building creative and interactive software">
...
</head>
It uses the self closing meta tag and you must specify the name of "description" for it to be set. Currently because I just applied these markup tags they aren't showing for my result but let's take a look at Spotify.
As you can see, the meta tag with a name of description will appear directly below the title tag and be displayed by google. So putting a nice and short description of your site (People advise to keep it under 100 characters but google allows 160) will help and direct users onto your site. Think carefully about these tags because these are the very first things a user will see even BEFORE they come onto your site.
Keywords
This is a bit of toss up. It's claimed that using the keywords meta tag doesn't really help all that much. Putting it in your html like this:
<head>
<meta charset="UTF-8">
<!-- META VIEWPORT -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<!-- KEYWORDS -->
<meta name="keywords" content="REACT, JAVASCRIPT, RAILS, WEB DEVELOPMENT">
...
</head>
Google and other web crawlers will actually store the meta data for your site in a database for easy retrieval when users are searching. Google will quickly generate a list of viable results given the search term, then rank each result in ascending level of relevance.
However, meta keywords have actually fallen out of favor with search engines like google, yahoo, and bing. So if you're really stressing over your keyword generation and thinking those guys are gonna jet you to the top, think again.
Alt Text
You might be tempted to not consider alt text as an important extension of your website, unless you're considering accessibility. But since search engines aren't actually people, they don't see those images when they crawl through your site. The only source of significance for them is the alt text. So thinking about the alt text and how it reiterates the "point" of your site or how it's relevant to users is an important step towards ranking.
Using Proper HTML Tags
With the use of css and styling you can pretty much make a div into anything you want or just spam h1 tags all over your site. But using intelligent and organized markup to segment your page is important for SEO. The reason being that an h1 tag is going to be read as indicative of what the main substance of the page is about. Likewise, dividing up the page using main or section tags brings added intelligibility for SEO indexing and ranking.
This was meant to be a short recap of things you can do right this second to improve your site SEO. From what I've seen SEO is both an art and a science. Thinking hard about who your target audience is and catering to them will pay off dividends if done effectively.
Top comments (4)
Correlative analysis tools indicate that there is a small benefit to having your keywords in the html(meta-keywords), and thus in the alt-text too. Nice primer for devs.
SEO, Data Science & Correlative Analysis For Google Organic Traffic
Nice primer. Thanks!
Really helpful tips Christian. Thanks for sharing.
Great tips! thanks a lot. Gonna incorporate this today in my project.