This content originally appeared on DEV Community and was authored by Zeeshan 🎖
It's easy to code a website with good UI/UX with time and good coffee.
But what good is a website without visitors and users?
Here are 12 easy things to look out for when building your next website and get more organic visitors.
1. URL Structure
Keep the URLs short and concise that are easy to remember. Your goal here should be conveying lot's of information through less words. Your main keyword for webpage must be in the URL.
For example:
nextjs-tutorial vs superfine_nextjs-tutorial_aimed-at_100%-beginners
Which of the above do you think will better in terms of SEO?
Special characters like $ % ^^ (] must be avoided.
Using hyphens vs. underscores
Using special characters in URLs, such as underscores, might confuse search engines.
It makes sense to use hyphens in place of underscores.
You may improve the readability of your URLs and help search engines understand the genuine purpose of each web site by using hyphens to divide words.
2. Title Tags and Meta Descriptions
Here is how a title tag looks:
<head>
<title>AcidOP | Freelancing Developer</title>
</head>
Your goal here is again to tell a lot in very less. You technically don't have any limit to this number but you should keep it less than 60 characters.
The title should explain your niche or product related to your website or article.
Writing compelling meta descriptions
Here is how a description tag looks:
<head>
<meta name="description" content="Excellent Developer from India." />
</head>
One of the most important elements in drawing visitors to a website is the meta description tag.
The meta description should skillfully include the page's target keywords to persuade readers to click through to the page.
Search engines like Google frequently draw the user's attention by emphasizing terms from the query while displaying the description. It's critical to match your descriptions closely, but not excessively, to highly valuable search terms.
Below is a title and description tag in action:
Do not exceed 155 characters in descriptions or google will then truncate the text.
Here is a list of other meta tags that you can use as well.
3. Header Tags (H1, H2, H3, etc.)
Header tags help your users navigate the page. The break up your content and break the page into dedicated sections.
Search engines rely on headers to better understand the sections of a page, which help with SEO.
Instead of writing a very long article with a few paragraphs, divide the article in multiple parts with each having it's own heading, like I have done here in this blog.
Structuring content with header tags
The main title of your document should be your <h1>. The H1 Tag represent the document's overall topic and is displayed at the beginning as a large text.
Your main points should be wrapped in <h2>. H2 tags are second level headings used to break up content and make it scannable and easy to read.
Subsequent heading tags lead all the way up to H6, which are not that important in the heading hierarchy.
NOTE:
- All the tags must be in hierarchy, i.e. H1>H2>H3...H6.
- There should only be 1 H1 tag in entire document.
Example:
In my blog markdown editor, I arrange my headings in the below order.
<h1>I built an Markdown editor using Next.js and TailwindCss 🔥</h1>
<h2>Objectives</h2>
<h2>1. Create the landing page</h2>
<h2>2. Add states to store data</h2>
<h2>3. Setup react-markdown and @tailwindcss/typography</h2>
<h2>4. Code Highlighting and Custom Components</h2>
<h3>Optional</h3>
<h2>5. Adding Rehype and Remark Plugins</h2>
<h2>6. Header with Markdown buttons</h2>
4. Image Optimization for SEO
According to Optinmonster, content that contains images receives up to 94% more views.
Visuals naturally captivate people, and nothing does it more effectively than a pleasing image.
This means that in order to engage readers and increase your visibility, you must use visuals in your content.
Using descriptive alt text
Example:
<img src="https://acidop.codes/og.jpg" alt="My website banner" />
Alt tags (Technically they're not tags, they're attributes, but you don't need to worry about that) are important for a few key reasons:
Enhanced Accessibility: It assists visually impaired individuals in comprehending the image.
SEO Boost: It offers search engines valuable details about the image, aiding in its visibility in search rankings.
Improved User Experience: It conveys information about the image, even when it fails to load.
Choosing the right image formats
JPEGs are good for things like screenshots, blog post images, and content where site speed is essential.
PNG is better for quality and resolution, but these files are typically larger, which can result in slower page load times.
WebP offers superior compression capabilities compared to others, without compromising much on image quality. It enhances the load time of your web pages and minimizes bandwidth. It supports both the animated features of GIFs and the transparent backgrounds of PNGs.
SVG is best when it comes to icons and logos. They can be scaled to any size without losing resolution.
Implementing responsive images (srcset)
Your website may perform much slower with large graphics. We can speed up the process and lower the file size. But visual quality remains the same on mobile devices as it does on desktop computers.
srcset allows you to define a list of different image resources along with size information so that browser can pick the most appropriate image based on the actual device's resolution.
Example:
<img
src="image.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
/>
5. Mobile-Friendliness
With the rise in mobile device usage for online searches, like smartphones and tablets, Google's web crawler now prioritizes indexing the mobile version of a website's content.
Fun Fact:
Mobile devices contribute to 59.45% of global online traffic
Ensuring responsive design
The website shows the exact same HTML code on the same URL no matter what device you're using (like a computer, tablet, phone, or even a browser that doesn't display images), but it can adjust how the content looks depending on the size of the screen.
Google suggests using Responsive Web Design because it's the simplest design approach to set up and keep up with.
Free SEO Tools for testing mobile-friendliness:
6. Site Speed
According to a study conducted by Google, 53% users abandon a website if it hasn't loaded in 3 seconds.
Therefore page speed is now a ranking factor for SEO.
Use these 3 metrics to get a picture of loading speed based on speed, interactivity, and visual stability:
Largest Contentful Paint (LCP): How long it takes for your main content to load.
It should be 2.5 seconds or less.First Input Delay (FID): How long it takes until a user can interact with a page.
It should be of 100 milliseconds or less.Cumulative Layout Shift (CLS): How often users experience layout shifts.
CLS score should be as close to 0 as possible.
Free SEO Tools for measuring site speed:
7. Internal Linking for SEO
It's when you link to another page that lives on the same domain.
Linking another article or product in a tasteful way increase users time on the site and creates a network of links of related pages.
Internal Links make your pages more discoverable and they also pass Page Rank, which is a value used by Google to rank pages.
Best practices for internal linking structure
Will it be a good decision to spam internal links?
- No. Absolutely not.
It's important that you link content where it feels natural, with anchor text that describes what the destination is.
Example:
Notice I have also linked to some of my other blogs all throughout the article 😉.
8. Schema Markup and Structured Data
Schema is not a ranking factor for Google. But it indirectly helps your site rank higher in google.
Google, Bing, Yandex, and Yahoo! worked together to create Schema.org so you could provide search engines the data they require to understand your content and deliver the most relevant results.
Implementing Structured data
You can use any of the 3 methods suggested by Google:
JSON-LD is the format Google recommends and also the easiest one to implement.
1. Choose the most important material on your blog to markup.
Typical keys consist of:
- Author information
- Publishing dates
- Categories or tags
2. Create the script
{
"@context": "https://schema.org",
"@type": "BlogPosting",
...other data,
"author": {
"@type": "Person",
"name": "Your Name"
},
"datePublished": "2024-07-01",
}
3. Embed JSON-LD in Your HTML
This JSON-LD script needs to be embedded in the HTML of your blog now.
A special script tag: <script type="application/ld+json"> is used for this purpose.
We can insert this into head or the body of the html.
Schema markup of my github bio blog looks something like this:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"url": "https://acidop.codes/blogs/beautify-your-github-profile",
"image": {
"@type": "ImageObject",
"url": "/blogs/beautify-your-github-profile/cover.jpg",
"height": 630,
"width": 1200
},
"author": {
"@type": "Person",
"name": "AcidOP"
},
"inLanguage": "en-US",
"headline": "Beautify Your GitHub Profile like a Pro",
"dateCreated": "2023-03-15",
"datePublished": "2023-03-15",
"description": "Beautify your GitHub ... appealing for developers."
}
</script>
The above script can be placed in either <head> or <body>.
You can check the validity of your structured data in the schema.org validator.
9. XML Sitemaps and Robots.txt
An XML sitemap tells search engines which URLs on your website should be indexed. Its is a list of all important content of your website.
Here is a part of the sitemap of my website:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acidop.codes</loc>
<changefreq>Yearly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://acidop.codes/blogs/nextjs-markdown-editor</loc>
<changefreq>Yearly</changefreq>
<priority>0.7</priority>
</url>
</urlset>
Save your sitemaps as sitemap.xml in your project root. Then submit your sitemap to Google Search Console.
Robots.txt
A robots.txt file is a simple text file on a website that tells search engines which pages they can or can't visit.
Example:
Sitemap: https://acidop.codes/sitemap.xml
User-agent: *
Allow: /
Disallow: /admin
In the above example, we submit our sitemap, and also make it clear we do not want to index our admin directory.
10. Canonical Tags (Important)
<head>
<link
rel="canonical"
href="https://acidop.codes/blogs/developer-seo-tips"
/>
</head>
In SEO, canonical tag is a link attribute used to tell search engines which version of a webpage is the original one, helping to avoid confusion when there are multiple pages with similar or identical content.
Google is known to penalize sites with duplicate content.
EXAMPLE:
https://acidop.codes
https://acidop.codes?utm_content=buffer
Even with UTM parameters, both point to the same page right?
But Google would consider both URLs to be different pages.
Having a proper canonical tag would help google understand both are same.
My story :
I write blogs on 2 sites. Dev.to (which supports canonical URLs) and my website: acidop.codes. My primary source is my website obviously.
First I post my blog on my website. Then I post the same blog on dev.to with canonical URL pointing to my own website.
This way I manage to get a bigger audience while also preventing google from penalizing me.
11. User Experience (UX) on SEO
Google wants users to have a seamless, intuitive, and enjoyable experience when on a site (page experience).
Google has a set of guidelines to assess page experience.
- Do your pages have good Core Web Vitals?
- Are your pages served in a secure fashion?
- Does your content display well on mobile devices?
- Does your content avoid using an excessive amount of ads that distract from or interfere with the main content?
- Do your pages avoid using intrusive interstitials?
- Is your page designed so visitors can easily distinguish the main content from other content on your page?
12. Regular SEO Audits and Monitoring
An SEO audit determines how optimized your website is for search engines. It identifies problems that could be harming the website's rankings and offers ways to fix them.
Free Tools for SEO audits:
Conclusion
There you have it, 12 easy tricks to improve on SEO.
Implementing all of them does not need too much tweaking and are very straight forward.
This content originally appeared on DEV Community and was authored by Zeeshan 🎖
Zeeshan 🎖 | Sciencx (2024-07-01T12:16:49+00:00) 12 easy SEO Tips Every Developer Should Know. Retrieved from https://www.scien.cx/2024/07/01/12-easy-seo-tips-every-developer-should-know/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.