Technical SEO Strategies: Build The Right Architecture, Schema, Javascript, API’s.

In the previous article on Technical SEO part 2 we covered how to track a site’s availability, we looked at the 404 error, servers/CDN’s, browsers, robot directives, redirects, HTTP response status codes and how to canonize a site. In this article we will look at how the architecture of a site is done, as well as the Schema, Javascript and APIs.

• Step 4 of the Strategy: Build the right Architecture

• Schema

• JavaScript

• APIs

• Conclusion

Step 4 Of The Strategy: Build The Right Architecture

A big part of technical SEO is showing Google/search engines all the paths embedded within a site, so that it understands the hierarchies between pages and the connections between internal links. For this the site needs a good architecture/structure, with page hierarchy and categorization logic:

The formatting of friendly URL’s – not too long and direct to the subject at hand;
The creation of XML Sitemap on the site;
The internal linking between URL’s – shows Google which pages have more authority on the site;
Navigation Menus;
Categorization.

A well-organized HTML code will help a lot in the crawling process, because it is through this that the bots can interpret the content and understand its relevance. An example of a good structure are the “Breadcrumbs” – they show the path the user took within the site (categories and subcategories) to get to a certain page. This information can also be used for search engines to make a better read of your site.

Another rule for the site to have a good structure is to keep in mind that the user should not give more than 3 clicks to reach the desired content, in this case, you can always improve the menu, putting more primary sections in this, or you can choose to have 2 menus, since relevant, for example, for an E-commerce, which have many categories, would have the main menu and secondary menu, with other more detailed listings.

Another possibility to improve the architecture of the site is the footer, this is composed of several links, in it you also have to think what will be the strategy of exposure of this, it should group themes by categories and redirect the user to the most important pages of the site, as well as social networks, which demonstrate to search engines, that the site is linked to other networks, and the site map, different from XML Sitemap, this is just a page that contains all the paths that the site provides.

Another technique for structuring a site is to put links in the middle of the homepage, for example, if it has news or categories, make mentions of them. This way both the user will immediately realize, through a single click, that these specific pages exist, and the search engines will instantly link the entire site.

Use Twitter Cards on the site, these are protocols that allow you to attach photos, videos and other interactive media to Tweets, driving traffic to your site. These Twitters Cards can be integrated into the site via HTML, on each page you want to add. The following exist:

Summary Card;
Application Card;
Lead Generation Card.

Summary card can be used for posts, news, product pages:

App card can be used to promote mobile apps on Twitter and increase installs, if your app is not available in the app store, Twitter will not be able to get this information, also indicate the metatag twitter:app:country:

Lead generation cards can collect information about customers. Users can express interest about your company without having to fill out a form or log out of their Twitter account. To set up this free lead generation card, you need to log into your Twitter Ads account. In wordpress you can add these cards through the “Yoast SEO” plugin, “JM Twitter Cards” or “JetPack”.

Faceted search refers to the search magnifying glass, this search gives the user the ability to search for specific products using keywords. This faceted search can also be through filters, a Marketplace, for example, like amazon, uses this technique a lot, filtering products by categories. The faceted search gives the user the ease of searching for the product they already have in mind.

Another method to take into account is paging, that is, usually there is a lot of content for a certain topic, the user should not have to scroll too much in the pages, because they will disperse their attention and leave that page. The best practice for this situation is to split the page in half, so you will have 3, 4 or 5 pages talking about the same topic. In wordpress, by default it always shows 10 articles per page, but you can edit to get less or more:

But wordpress also has another good thing, you can edit the article itself and split it in half, to do that you just put an HTML code in the article edit:

<!–nextpage–>

Another good thing about wordpress are the plugins to make these pages, like “WP-PageNavi”, “WP-Paginate” or “Pagination by BestWebSoft”.

Also add the Open Graph protocol, it is used to facilitate data transmission between sites and Social Networks. It consists of tags implemented to indicate characteristics of the content sharing. To turn your web pages into graph objects, you need to add basic metadata to your page, the <meta> tags in the <head> of the web page:

og:title- The title of your object;
og:type- The type of your object. Depending on the type specified, other properties may also be required.
og:image- An image URL that should represent your object within the graphic.
og:url- The canonical URL of your object that will be used as the permanent ID in the chart.

<html prefix=”og:https://ogp.me/ns#”> <head> <title>Título</title> <meta property=”og:title” content=”título” /> <meta property=”og:type”content=”video.movie” /> <meta property=”og:url”content=“https://www.imdb.com/title/tt0117500/” /> <meta property=”og:image” content=”https://ia.media-imdb.com/images/rock.jpg” /> … </head> … </html>

Making the site architecture is important, but it requires time and UX knowledge, the most important parameters to consider are:

Fewer clicks;
Content grouped by topics;
Highlight the most important content;
Organize internal links so that they are interlinked across all pages of the site;
Avoid Keyword Cannibalization (Keyword cannibalization occurs when pages on the same blog focus on the same search term. In other words, the company competes with itself).

Google provides a structured data wizard tool to help this process. Another tool that helps in visualizing the entire internal structure and depth of your site’s pages is “Screaming Frog”.

Schema

Schema Notation is HTML code placed on website pages that helps search engines better understand their content. Schema is a vocabulary of structured data that defines entities, actions, and relationships on the Internet. This vocabulary enables search engines to understand the meanings behind subjects on the web and in turn provide a better user experience. Google has a search gallery that shows the various search resources and the Schema needed for your website to qualify: https://schema.org/docs/gs.html.

Schema tags are normally used to indicate:

– People,

– Ratings and Reviews,

– Recipes,

– Medical Conditions.

Javascript

More and more websites are using JavaScript in their construction as it provides dynamic content within the web pages and is also a very versatile language. An SEO needs to be aware of a site that uses JavaScript because it can impact or cause some anomaly when search engines are crawling the site, because Google, although nowadays, can read this language, still has some flaws/misinterpretations. To know if a site uses JavaScript, you just have to identify this tag in the HTML code: <script> .

The SEO has to be aware of this tag in Title, Description, Canonical, among others, they have to make sure that the file is responding quickly , so that this information is delivered to the crawler (search engines) in an intantaneous way, if not you run the risk of being without this information displayed. Javascript sites are fed with external content, which responds according to the accesses to the site. Therefore, it is important that this response time be as short as possible, not exceeding 5 seconds. To learn more about Javascript you can access these pages: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics | https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript.

In wordpress you can add Javascript to the code in these ways: add a script to selected pages using a plugin like “WPCode” (small pieces of code, like scripts); add the script to a specific page or several pages using functions.php; or add a Javascript file to your theme header. You can learn and understand more about Javascript in wordpress by visiting this page: https://www.collectiveray.com/pt/adicionar-javascript-ao-wordpress .

In some cases of NodeJS applications or others with complex layouts that rely on javascript, it can happen that some content is not displayed. One of the methods used to avoid this is pre-rendering, which identifies the type of access to your site and, when it identifies that it is a user, it delivers the file for client-side rendering, when it is identified that it is a crawler, such as Googlebot, the site will be rendered inside the server (server-side rendering). There are several pre-rendering solutions, depending on the technology/framework you are using. Those using AngularJS can use prerender.io. For those using React, one of the best is react-snap.

Tools that can help you check how JavaScript is doing on the site are “GTmetrix”. In “Google Search Console” do test like Google, choose desktop and mobile bot, then between “Search” and “Search and Render”. “Merkle SEO” have a very versatile range of tools to check/test the site as if it were on the search engine side.

APIs

An SEO API is an Application Programming Interface that allows developers to add SEO capabilities to applications. Often, to use an API, you will need an API key. Once you have acquired your API key, you can use it to interact with the API manually, via online HTTP clients such as Postman or Runscope or do it from your command line, for example, to be able to use the Pagespeed Insights API, you will need to go to this site which provides the information on how to proceed: https://developers.google.com/speed/docs/insights/v5/get-started.

There are several APIs for various SEO topics, the process is the same for all the others:

Conclusion

Technical SEO is very extensive and needs to be studied regularly, many regulations or updates are being implemented every day, the professional SEO must be aware of the new possibilities in this niche market and constantly update himself. In this article part 3 we saw part of building the correct architecture of a site, in the article part 4 we will analyze Duplicate Content, Hreflangs, Mobile, AMP, Progressive APPS, the security and speed of a site.

Many companies today need immediate results, but the truth is they can’t afford to implement SEO internally while leveraging with the priority of their business focus. If you still can’t handle these steps or don’t have the time to put them in place, Bringlink SEO ensures you get the visibility and brand growth you deserve.

Talk to us, send email to bringlinkseo@gmail.com.