SEO services are usually expensive and hard to find since they require a considerable time and technical expertise. A handful of SEO factors can be automated with the right tools. In this blog, we will explore how to automate SEO factors using Behat.
Let’s understand what Search Engine Optimization is
Search Engine Optimization is the process of implementing a series of techniques on a website to improve your site’s visibility for relevant keywords on search engines.
How to automate SEO factors using Behat?
In order to automate various SEO factors using Behat, we will be using the extension module “marcortola/behat-seo-contexts” with our additional custom contexts.
Let's understand the major SEO factors and how these can be automated.
Meta Tags
Meta tags are the HTML tags that provide important information about the web page to the search engines. This metadata appears only in the page’s source code.
HTML Markup - <title>Drupal Development and Design </title>
Sample Scenario -
Given I am on homepage
Then the page title should be "Drupal Development and Design"
MetaContext method -
HTML Markup - <meta name="description" content="A service open source company."/>
Sample Scenario -
Given I am on homepage
Then the page meta description should be “A service open source company.”
MetaContext method -
HTML Markup - <link rel="canonical" href="http://example.com/" />
Sample Scenario -
Given I am on homepage
Then the page canonical should be “http://example.com/”
MetaContext method -
We have added below custom “AccessibilityContext” context to validate the alt text attribute, as this is not supported by the extended module.
HTML Markup - <img src="/themes/qed42/logo.svg" alt="Home" />
Sample Scenario -
Given I am on homepage
Then the images should have alt text
Accessibility Context method -
1. index - The bot will index the whole webpage
2. nofollow - The bot will NOT follow the page and any links in that webpage
3. noindex - The bot will NOT index that webpage
Note: When the robot tag is missing, crawler considers the site to be indexed and followed.
The extended module provides support for validating only index/no index values of robots tag. Therefore, we have added below custom context to validate the nofollow/follow values.
HTML Markup - <meta name="robots" content="INDEX, NOFOLLOW" />
Sample Scenario -
Given I am on homepage
Then the page should be nofollow
MetaContext method -
og:title - The title of the page/content/object as it should appear on Facebook, e.g., "QED42".
og:type - The type of the object, e.g. blog, articles. Depending on the type you specify, other properties may also be required.
og:image - An image URL which represents the object. Images must be either PNG, JPEG and GIF formats and at least 50px by 50px.
og:url - The canonical URL of the object that will be used as its permanent ID, e.g., "https://www.qed42.comwww.qed42.com".
The following properties are optional for any object and are generally recommended:
HTML Markup - <meta property="og:url" content="https://www.qed42.comwww.qed42.com" />
Sample Scenario -
Given I am on homepage
Then the Facebook Open Graph data should satisfy full requirements
SocialContext method -
Twitter:card - It describes the type of content. The card type can have one of these values - “summary”, “summary_large_image”, “app”, or “player”.
Twitter:title - Title of content
Twitter:description - The summary of the content.
Twitter:url - A canonical URL for the content
Twitter:image - A URL to a unique image representing the content of the page
HTML Markup - <meta name="twitter:url" content="https://www.qed42.com" />
Sample Scenario -
Given I am on homepage
Then the Facebook Open Graph data should satisfy full requirements
SocialContext method -
Note: Here, getOGMetaContent() method is the same as mentioned in the Open Graph Meta Tags section.
We have added below custom “UXContext” context to validate the viewport tag, as this is not supported by the extended module.
HTML Markup - <meta name="viewport" content="width=device-width, initial-scale=1">
Sample Scenario -
Given I am on "/ux/site-with-valid-viewport.html"
Then the site should be responsive
UXContext method -
Keyword Optimization
Keyword optimization is the process of identifying and selecting keywords to be incorporated into a website's content, which will drive traffic from the search engines to the website. By analyzing the words searched, we can understand what the user needs.
We can achieve keyword optimization, by using keywords in - title tag, meta description, URL, links, keywords in the image alt attribute. You can refer to the Meta Tag section on how we can optimise keywords using various meta tags.
Image Optimization
Image optimization involves two things:
A high number of images on a web page impacts page load time. And Google uses page load time as a factor for ranking. Therefore, we need to ensure the quantity of image, size of image and quality of the image added on a web page.
We have covered the SEO factors - Meta tags, Keyword, content and image optimization. Check out our next blog (Automate SEO factors testing using Behat - Part 2) in this series to discover more SEO factors like Automation to validate image optimization is covered under Page Speed SEO factor.
If you'd like to automate the SEO of your site, reach out to business@qed42.com.