adminwhen checking a website’s quality, issues with its code and other ‘invisible’ features can be a major concern with dramatic SEO impact. Code attributes can be missing, structured data can be misused or underused, important social media integration can be overlooked, and other important user experience features can be unsupported. Maintaining your pages according to coding standards is critical to signalling your website’s usability and accessibility to search engines. Here are the Do’s and Don’ts for doing a semantic check and reviewing coding standards.
- Do: use rich snippets for all possible entities on a page
Structured data can be used to identify what kind of content is contained on a page, helping search engines with indexing and playing a role in displaying rich snippets within search engine results. If you want rich snippets to provide samples of your content to prospective visitors before they click, it’s essential to have functioning structured data.
Entities on your page such as articles, products, reviews, FAQs, and recipes can be set out with schema markup. Make sure all types of content that fit into these categories are given schema markup.
- Don’t: miss any attributes from structured data
When you create schema markup for an entity, make sure you include all relevant attributes that you are able to provide. For instance, if you are marking up data about a product you are selling, utilize every attribute that would identify information about its product details, such as price, size, description, and condition. For a review, use the Rating or similar schema to display the rating given by the reviewer in the rich snippet.
- Do: Check your pages to see if they support rich snippets
If you want to see how rich snippets will appear in search results, use the rich results testing tool from Google. It will show which types are being used on the page and whether the structured data you used contains errors. Seeing the rich results will demonstrate that it is working as intended and all attributes and properties are being displayed. A schema validator tool can make sure there are no errors in the code that cause issues with the rich snippets.
- Do: include Open Graph meta tags on all relevant pages
Another way to showcase your content before users have even clicked is to support methods of displaying it on social media and other sites as embedded content rather than as text links. Open Graph is a great way to achieve this. In the <meta> tag in the <head> of your webpage, add lines for property=”og:title”, “og:image”, and “og: description”, and a title, image, and description you specify in the tags will be used in links on social media.
Using Open Graph will make your content much more visible and shareable on social media, increasing your click-thru rate. Using additional properties like og:type will give Facebook and other social media a clearer picture of what kind of content is being linked.
- Do: include support for Twitter card tags
Twitter cards are another important method of giving your content a great presentation when it’s linked on social media. There are five different types: Summary Card, Summary Card with large image, Player Card, App Card, and Lead Generation Card. Summary is good for linking articles or other informative content, Player is for sharing video, App for an app download page, and Lead Generation lets users share their Twitter information if they click. In your meta tag, <meta name=”twitter:card” content=”summary” /> or the other card types can designate which you are using. Try the Twitter Card Validator to check that your Twitter cards are working when people link from your pages.
- Do: make pages AMP Compliant
Accelerated Mobile Pages (AMP) are an initiative supported by Google that makes static web pages load faster by serving the AMP version in search results. The AMP version is cached by Google and pre-renders content so it is within the reach of users. Pages that don’t rely on dynamic content should have an AMP version if possible. Placing an rel AMP HTML link within the code of your desktop version will direct Google to use the AMP version instead and direct mobile users to the accelerated version. Faster-loading pages are appreciated by users and they signal to Google that they will be received better when served as search results.
In addition, as Google focuses on new Page Experience metrics as a factor in search rankings, they stated in a May blog post that AMP is a cost-effective and simple solution for publishers to create a great page experience. The AMP team observed that 60% of AMP-based domains passed the Core Web Vitals test compared to 12% of other domains.
- Don’t: use nonstandard HTML and other code structure
Make sure that your HTML code is well-formed and follows W3C’s HTML coding standards. Even if it technically displays properly on your screen, poorly-formed HTML can lead to errors and other usability issues. Human users and search engines browse your web pages in a variety of ways, and web pages change over time, so following standards is important.
Run your web pages through the W3 validator tool, versions of which are available here or here. A CSS validator is here. The Web Content Accessibility Guidelines (WCAG) created by the W3C urge that HTML is used according to specification (Technique H88). Try to make your pages as traditional HTML documents , with headings in <h1> to <h6> tags, text within <p> tags, images within <img> tags, and so forth, or else do the equivalent using CSS or other web technologies. Browsers and other user agents expect HTML elements or attributes to be used in expected ways, and it’s important to not use them for an unexpected purpose.
Read also:- Content Checklist
Final Thoughts
Supporting rich snippets and enabling social media integration vastly improves the presentation of your content outside your site. The ability to display more than just a hyperlink can boost your click-through rate and get you more conversions. When auditing your site, check that these features are fully supported by including the right code. A site that effectively uses clean code and utilizes semantic elements is necessary to compete with other websites and not get left behind.
Add comment