10 Things Steemit Can Do To Improve On-Page SEO For All Users

As a recovering agency owner, I have worn a lot of hats in the digital realm over the years.

Wether it was documenting and refining processes for my team, managing paid, owned and earned media initiatives for clients, speaking at conferences to share with my peers, I have had my hands at one time or another in a full spectrum of digital marketing campaigns.

These days I have come full circle back to my design roots though and spend my time helping startups (primarily blockchain & AI) build out their design / UX capabilities and train their in-house teams how to put all the pieces of their marketing together.

I've been offered some pretty crazy jobs but I enjoy my freedom and getting paid to learn bleeding edge technologies as well as working with people who embrace new ideas.

My diverse skillset has allowed me to spot areas of improvement at all parts of a the marketing stack, not just the top level fluff a lot of overpaid marketing consultants try to pass off as value.

After I recently posted my first blog here on Steemit, the technical SEO in me noticed a few issues I couldn't ignore as I looked in the DOM.

We often get so caught up chasing the in-network rewards here on Steemit that we forget that when people find our work in Search Engines like Google, Bing, Yahoo, Duck Duck Go, etc... this helps us build a larger audience who may not be on Steemit.

What better way than to get them here to sign up and be a part of the community?

With that said, the following is a list of 10 On-Page SEO improvements that if implemented, will not only improve @steemit chances of ranking in Search Engines, but all of it's users individual articles as well.

1. Single Point Of Failure - 0/100

A Frontend Single Point Of Failure (SPOF) is a critical dependency on a third-party content, that may block the entire display of your page in case of failure of the content provider.As an example, if your web page uses a blocking script hosted by Google’s servers, then your page is reliant on any failure from this script. Please read our blog post dedicated to SPOF for more information.

How to avoid SPOF?

As far as possible, exclude any of these dependencies, even from renowned providers. If you have to use a third-party content, ensure that you choosed an asynchronous integration and that you have a fallback in case of problem.

The following resources represent a SPOF for all Steemit web pages:

2. Reduce Resources Response Time - 0/100

The server response time has to be as fast as possible to please the Search Engines.

The server response time explained

This time corresponds to the period between when the server receives the request and when the network returns the response. This response time can be reduced because of slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation, or memory starvation.

How can I fix this?

Identify the cause of the slowdown and make sure the server response time is as short as possible. According to Google, a response time under 200ms is acceptable.The server's response time takes too long with the following resources:

https://steemit.com/assets/vendor.4052d5af85085769ff43.js (waiting 1,69 seconds)

3. Defer Parsing of JavaScript - 60/100

JavaScript can significantly slow down a page display, especially if it is necessary to download an external script.Defer the use of JavaScript as much as possible to provide a faster start for the page display.

How can I fix this?

Use one of the methods below to defer parsing for external JavaScript files:

use the async attribute;
use the defer attribute;
append the script to the DOM in JavaScript during the onload event;
make sure your scripts are placed at the bottom of the page (ideally at the end of the body).

1.7KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

steemit.com/steemi[...]-web (1.7KiB of inline JavaScript)

4. Add alt attribute on <img> tags - 0/100

It's no secret users have to manually add image alt tags to their images to boost their on-page effectives here on Steemit. Providing a more robust WYSWIG editor like TinyMCE (used by Wordpress) with these attributes would solve this problem.

Moreover, the alt attribute is also an important criterion for SEO. Indeed, search engines crawlers cannot parse graphic contents. That is why they use the alternative text to return consistent results, like in Google images.

<img src="product.jpg" alt="My product description"/>

The alt attribute is used in several cases unrelated to SEO:

When a screen reader is in use for accessibility purposes;
While image is loading, particularly for slow connections;
When the image file is not found.

You have 1 img tag, but the following tag does not define the alt attribute:

<img src="https://steemitimages.com/0x0/https://stevefloyd.io/images/steem/data-oil.jpg" />

If nothing seems appropriate for describing an image, you might set an empty text. We advise you to make sure the majority of your images define a relevant text. Read the W3C recommendations here.

5. One ID is Duplicated Within Your HTML - 0/100

Using the same ID on several elements can have side effects, especially during JavaScript executions or when applying CSS rules.

IDs explained

Each element of a web page can be identified thanks to the id attribute:

<p>

  <span id="mySpan1"></span>

</p>

These IDs allow you to manipulate your elements with CSS or JavaScript instructions.

How to properly use IDs?

You must ensure identifiers are not duplicated within the page. If you want to share a property or a behavior between multiple items, you have to use the class attribute, which is dedicated to this purpose:

<p>

  <span class="mySpans"></span><span class="mySpans"></span>

</p>

The following ID is used multiple times within your page:

Layer_1, used 20 times

5. Page Does Not Specify a Breadcrumb for Search Engines - 0/100

The breadcrumb enables to visually enhance the results matching your website during a research. On Google, you can find it instead of the URL for example:

On a search made through a desktop device, the breadcrumb only replaces the URL if it is defined on the page.About the mobile search, Google has been consistently displaying the breadcrumb since April 2015. If you haven’t defined a breadcrumb on your website, it will be generated automatically (in particular from the URL). We advise you to make this information explicit in your source code, in order to control the display.

Defining its own breadcrumb

You must define your breadcrumb using one of the accepted implementations (see Google recommendations).

<div id="a" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b">

  <a href="http://www.example.com/mycategory" itemprop="url">

    <span itemprop="title">My category</span>

  </a>

</div>

<div id="b" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child">

  <a href="http://www.example.com/mycategory/myproduct" itemprop="url">

    <span itemprop="title">My product</span>

  </a>

</div>

On this analysed page, we couldn’t find a breadcrumb.

6. Separate the CSS styles from the HTML tags - 0/100

Separating HTML tags and CSS directives improves code readability and promotes factorization.

How to define CSS styles

CSS styles are used to format the page. You can use one of three main methods to define them:

declare styles in a specific CSS file;
declare "inline" styles (<style> tag in your HTML template);
declare styles with the "style" attribute of a HTML tag.

How can I improve my page?

We recommend grouping your CSS styles in <style> tags or in separate files. That way, the HTML is only responsible for providing the structure of the page, and its layout is outsourced. The <style> attribute should only be generated by some JavaScript code (e.g., if you need to know the screen size).
This page uses 27 style attribute(s):

<span class="Icon extlink" style="display:inline-block;width:1.12rem;height:1.12rem;" data-reactid="34">
<span class="Icon extlink" style="display:inline-block;width:1.12rem;height:1.12rem;" data-reactid="38">
<span class="Icon extlink" style="display:inline-block;width:1.12rem;height:1.12rem;" data-reactid="44">
<span class="Icon extlink" style="display:inline-block;width:1.12rem;height:1.12rem;" data-reactid="49">
and 23 others!

7. Steemit Doesn't Use Open Graph Properties - 0/100

This is an easy win and could easily be added as a set of additional fields under the WYSWIG text editor (but still remain optional in case someone doesn't have time to fill it all out).

You can help social networks understand information related to the page by using Open Graph properties.

The Open Graph properties explained

Several properties allow social networks to learn more about the page's content. We recommend using at least the required properties:

<meta property="og:title" content="The title" />
<meta property="og:type" content="The type" />
<meta property="og:url" content="http://url.com/" />
<meta property="og:image" content="http://image.jpg" />

This information is used to improve links between your page and various social networks, including Facebook. Read more about Open Graph here. This page does not provide information to social networks.

8. CSS Properties are Duplicated - 65/100

Using several times the same property within a same CSS rule can affect the readability of the CSS. It is also an optimization opportunity: by removing duplicated properties, you will reduce the file size.

CSS properties

The CSS properties allow to apply a style to a set of elements. It is unnecessary to define 2 times the same property with the same value in a same rule.

How to improve it?

Remove one occurrence of the duplicated property. For example, the following properties:

.myClass {

  margin: 10px;

  ...

  margin: 10px;

}

Should be replaced by:

.myClass {

  margin: 10px;

}

The following files define the same property several times (with the same value) in a single rule: https://steemit.com/assets/app-c1627882f3c0078eac39.css

.js-drilldown-back > a::before {border-left-width: 0} (line 2614, col 3)
.js-drilldown-back > a::before {border-left-width: 0} (line 2618, col 3)
.progress-meter-text {position: absolute} (line 3342, col 3)
.slider-handle {position: absolute} (line 3381, col 3)
.e-btn, .reveal .button, .ReplyEditor .button, .ChangePassword .ChangePassword__...(line 4347, col 3)
.e-btn, .reveal .button, .ReplyEditor .button, .ChangePassword .ChangePassword__...(line 4348, col 3)
.Header .menu .hamburger {position: relative} (line 6915, col 7)

9. Do Not Use Too Long Inline Scripts - 0/100

Any script with a significant size should let the browser cached them in order to reduce loading time/improve performance of your returning visitor.

Inline scripts / cache policy

"inline" scripts allow to integrate easily small portions of scripts directly in the HTML code. Example:

<script type="text/javascript">

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']...,'/analytics.js','ga');

    ga('create', 'UA-11111111-1', 'mywebsite.com');

</script>

By doing so, you avoid making a request to the server to retrieve the resource. So inline scripts represent a performance gain if you want to integrate small scripts.However, once a script has a fairly substantial size, we advise you to outsource it and perform a request to retrieve it. So you will benefit from the cache mechanism.

What should I do?

Outsource your scripts with more than 1500 characters in one or more separate files.You should write this script in a distinct file:

{"global":{"current_route":"/steemit/@sf2/privacy-and-the-decentralized-social-web","discussion_idx":{},"accounts":{"sf2":{"transfer_history":[],"last...

Conclusion

Let me wrap all this up by saying what @dan @ned and team have done with @steemit is nothing short of amazing. These errors are not critical and should not be taken as the community as some major flaw, because all of them are common things developers overlook.

It is extremely hard to engineer a system like Steemit and the fact that this is the majority of the on-page errors speaks for itself. Yes, there is still room for improvement, but it should be underscored that if there are errors, it was probably lower on their list of priorities.

If you would like me to audit your website just like I did here, feel free to hit me up here and I will get back to you right away!

--------------------------------------------------

Like my post? Donations are the most sincere form of appreciation!

BTC: 1CkLzgsSNLE2KpAESscK3gB8ATFBSRQMx5
ETH: 0xf413C0AA896E92a41334156fa345506494c4aB24
LTC: LeQymm77h3EMEMKUbbXYQ1NNGmNYZnR6Uj
BTS: sf214