Embedding Videos the Right Way
Adding video content to your site properly will definitely improve your site’s SEO. While embedding videos into your site is easy, it can be a little bit tricky to make it mobile responsive. I will use a YouTube video as an example.
As standard a YouTube video’s embed code looks something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/OrtvCuPQTRI?si=v-oS9gdQi5u50C91" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Embedding the above code into one of your web pages will display it and it will look good on desktop view, but not in mobile view, due to the set width and height forcing the video to go beyond the width of the mobile screen. The width and height can be manually changed to suit mobile view, but then it won’t look as good on desktop view. So, what to do? There are two options:
- The first is to ask your CMS support team to code your videos to scale in size, based on device width. This may come at a cost.
- The second choice is to update the embed code yourself, just slightly. On the above video code, we can see the width and height is set to:
width=”560” and height=”315”.
Remove both the width and height code completely, and replace it with:
style=”width:100%; max-width=”560px” aspect-ratio: 16 / 9”
Your embed code should now look like this:
<iframe style=”width:100%; max-width=”560px; aspect-ratio: 16 / 9;” src="https://www.youtube.com/embed/OrtvCuPQTRI?si=v-oS9gdQi5u50C91" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Using this method, your video embeds will automatically scale based on the width of the screen. This works well with landscape videos, for portrait videos, update the code like to look like this:
<iframe style=”width:100%; max-width: 320px; aspect-ratio: 9 / 16;" src="https://www.youtube.com/embed/OrtvCuPQTRI?si=v-oS9gdQi5u50C91" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Now your videos will display beautifully for your site visitors on both desktop and mobile devices.
Here's a video demonstration of this code change.
For more tips and tricks on embedding YouTube videos into your Wordpress site or any other website using a CMS, check out our article on 'Mastering YouTube Embeds - A Guide to Custom Coding for Non-Technical Users'.
Use of images
If you aren't using images, think again. Adding images to your website makes it a lot more appealing to site visitors, persuading them to come back to your site, which in turn helps with your SEO ranking. Choosing the right images is especially important to make your website grab the viewer’s attention.
You should use the best images you can. Here are two websites we think you'll love, both allow the use of their images free of charge without requiring any attribution:
- Pexels - An amazing site offering tons of pixel perfect images and videos.
- Unsplash - Add splashes of color to your website, with over 6 million images and illustrations to choose from, Unsplash is perfect for your website. It has a paid version to use more sought-after images, or a free version. The free version itself provides many quality images.
Reducing Image Sizes
Reducing image sizes is extremely important, try not to upload an image with a huge file size.
When accessing a website, your browser downloads the code and images required to display it. It's a no brainer, the larger the images, the larger the download size will be for site visitors, and this will affect how long the web page will take to load, leaving either a good impression if the site is fast or a bad one if the site is slow to load. A slow website is not good for SEO, so it's best to keep your images small.
Images can be saved in many different file types such as PNG, JPEG or WEBP, we recommend always saving your website’s images in the WEBP file type as it allows for a smaller file size with minimal image quality loss when compared to other image file types.
That gets us onto image quality. While it’s very important to ensure all of your images are small in file size, please note that making them too small can reduce the image quality more than you would like at times, please bear in this in mind when compressing your images.
Now, to reduce your image file sizes, there are many tools on the web that can serve this purpose, here are two of our favorites:
- CloudConvert - A brilliant online tool that allows us to convert our files into WEBP format which automatically reduces the file size whilst maintaining good image quality. This site has many more conversion features available and allows up to 10 free conversions per day, or you can choose one of their paid plans.
- Tinify AKA TinyPng - Another brilliant online tool. Simply drag and drop your image files into the drop area and the site will automatically reduce the file size. TinyPNG allow free conversions, but they do also have paid plans.
Image File Names
Is this important? Maybe not at first, but after a couple of years of using your web CMS, you'll have a ton of images stored on your website, and along the way some of the content will likely become redundant, and when this happens, if your images are all named screenshot_10052024_1547, they won't be found easily.
To keep your website in tip top condition, it’s a good idea to remove redundant images, this ensures your site's file storage doesn’t get full up with files. A file storage area that is full will take your website longer to find specific images before it can load it on the web page. Having good page speed is crucial to giving your site visitors a good impression, as well as this, site speed is a factor in SEO ranking metrics.
Do remember that if your file storage drive becomes full and you need more, your website CMS provider will likely charge for it.
Alt Attributes
The Alt attribute is a bit of information added to images describing it. It is to provide information when the image cannot be viewed, for example if a site visitor uses a screen reader due to visual impairment or, perhaps if there is an error with the image, the Alt attribute appears, providing a description of the image, allowing for a better experience.
Your site visitors who use Alt attributes will appreciate this, and you will have a far higher chance of them returning to your site if you provide this information.
This is also very good for SEO, using Alt text can increase your web page's visibility in search engines. Your CMS provider will likely provide a tool to check images missing Alt text, however, if you need a third-party tool, here is a tool you can try:
Content Quality
How important is content quality for your website? Very.
Writing takes a fair bit of time and getting it right takes longer. After spending valuable time, you don't that content to go unnoticed. In order to have content seen and read by people, the content must be of a good quality. Search engines look at this and rank your website based on the quality of your content.
Bear in mind, if your content is poor and people bounce from your website quickly after seeing the content, your web page's bounce rate will soar, and that will indicate to Google that this web page is not valuable, making Google push the page down in SEO ranking.
Use a spellchecker to keep your content free of errors as this contributes to SEO ranking. Bad grammar reduces your website's chances to getting the higher spots in Google search pages. It can also be off putting for site visitors to read grammatical errors, preventing them from wanting to come back to your site. Fortunately, we have some amazing tools to help us with this.
-
Microsoft Word – The whole world knows Microsoft Word. The built-in spellchecker is very good and is a great asset to writing.
-
Grammarly - By now, most people have heard of Grammarly and know what it is capable of. Grammarly can be used for free as a Chrome extension with limited features, or purchased as part of a plan.
-
Capitalize My Title - A simple but brilliant tool that automatically capitalizes text into title format. Sometimes even the best writers can be unsure if a word should or shouldn't be capitalized, but with this tool there is none of that, just pure confidence.
Word Count
For SEO purposes word count is important. When writing blogs or posting a job description, or even a product overview, always provide enough text content for your site visitors to feel they have found what they were looking for.
Generally speaking, for blogs a minimum of 600, for job descriptions a minimum of 250, and for product descriptions a minimum of 150 words is needed, although we would recommend more than the minimum.
We would not recommend writing words just for the sake of it as search engines may pick up on this and de-rank the page, so please, always write valuable words that add meaning to the page.
Use of Headings
The structure of your website is imperative to good SEO, thankfully it is an easy topic. Google wants to find your content well structured, in an easy-to-read format and understandable. For this, we need to ensure our titles are correctly labelled and ordered.
In websites, titles are labelled as H1, H2, H3, H4, H5 and H6. The H stands for header. Always start with a H1 for a web page's title, then consider separating the page's text content into sections and giving them all a subtitle using a H2. If you then have sub sections within one of the H2 sections, use a H3 tag and so on.
For more information, please see the W3Schools site
Hyperlinks
Hyperlinks are a good way to provide more information that may not be on the same page, for example if you are referencing a survey, or providing more information of which you have already created an article for, you may decide to link that into the current article.
Hyperlinking, if done correctly can definitely improve a site's SEO ranking and user experience. There is however a caveat, if your hyperlinks break due to the linked website no longer existing, it can negatively impact your website's user experience and SEO ranking. No need to be in despair, we have many online tools that can check your website for broken links, here are a few:
Aside from the tools above, your CMS may already have a built in checker for this so be sure to check in with your CMS provider.
White Space
White space is important, it gives your website a clean, spacious look, a beautiful UX, and a nice feel about the place. Your website is online because you want people to see it, think of your site visitors as guests, you want them to immediately get a good impression of you. The better the impression, the more likely a site visitor will come back to your site.
Here are some beautifully designed websites that make use of white space elegantly.
Custom Features & Call to Action Buttons
Along your journey with your CMS provider, you may want to have some custom features created like CTA buttons, popups, or animations etc.
It is a good idea to write these down, perhaps on an Excel spreadsheet to remember them for future reference. This is important as you may be given methods to activate the custom features on different pages and remembering the activation methods is worth remembering, so you don't have to waste time contacting your CMS support team.
Another reason why you should do this is because your staff member in charge of liaising with the CMS support team, may leave the company, and along with that employee, goes all the knowledge of custom features.
Check Your Tables on Mobile View
We all love to use tables in our websites from time to time, and they look great when set up properly on our desktop/laptop screens. However, over the last few years I have come across a fair few sites that have beautifully setup tables, that aren't optimized for mobile view. What I mean by this is that on mobile view, the table will flow beyond the screen and a lot of the table contents will not be viewable, and this makes the website look bad.
There are two solutions to this:
- The first option is to ensure the table becomes slidable when displayed in mobile view.
- The second option is to make the table cells collapse into one column. This option however may not suit every table, but is an option that can be used.
Your CMS platform may already have the functionality built in to make tables slidable or collapsible and you may just have to apply the settings to the table. If this is not available, ask your CMS provider to make your tables mobile friendly, and a web developer from the company should, on most occasions, implement the styling for you.
Third-Party Scripts
Now out of the box a website CMS provider will give you a lot of features, but there may be things you want to add to the websites that isn’t provided, such as analytical data collecting or a cookie popup.
Consider the performance toll of adding a third-party feature. While some of third-party features will be necessary such as having a cookie popup for GDPR compliance, other features such as having an interactive quiz may not be necessary.
A recommendation is to run a page speed test on the web page you wish to add the third-party feature to and record the page speed. Then add the third-party feature and run the same page speed test again. Now compare the before and after speeds and consider whether the feature is worth adding to your site.
Here are some online tools you can test your page speed with:
Meta Tags
Meta tags are bits of information stored on your website that aren't displayed on your website's visuals, they remain in the code, within the section called the header. These tags are very important to providing search crawlers like Google or Bing, data to tell them what a web page is about.
You shouldn’t need to do any coding as CMS platforms usually offer an area or method in which you can update this data.
Here is a list of Meta data you should be including in your website and should have control over through your CMS:
- Title - The title tag is crucial; it is used to tell your browser and search sites what your web page is called. This is used for search results. What this is set to, will be displayed on search engine result pages like Google.
- Description - The description tag is another crucial piece of meta data; it describes briefly what the page is about to search engines.
Open Graph tags are used when providing data to social media platforms. If you're planning to share your web pages on sites like Facebook, it is a good idea to include OG meta data in your web pages. Here are a few you can include:
- OG Title - The title of the page.
- OG Image - An image link which should appear on sharing the web page URL.
- OG Type - The type of web page e.g. A blog or job page.
As with most CMSs, yours will likely include a feature to see if pages are missing any crucial meta data, however, if you wanted to use a third-party tool, you can install this SEO meta in 1 click Chrome extension. It's super easy to use and gives a ton of information about your web pages.
There are other meta tags that can be added, do check in with your CMS support team to see what meta tags you can add and update.
No Index Tags
This tag is especially helpful when needing to tell Google or Bing not to index a certain page. The following code can be placed inside of the head tag of the page you do not want to have indexed:
<meta name="robots" content="noindex">
This may be possible to add with some CMS providers. If you don't have the ability to add this code in, just ask your CMS support team and they should be able to add this in for you.
There could be a variety of reasons as to why you wouldn't want a page to be indexed, this is the one of the easiest ways to go about doing this.
URL Structure
Your website URLs are also content that needs to be managed. They provide valuable information about your website's structure and are used for various functions. The better a search engine understands your website's structure, the better your chances of reaching a higher rank.
A well written URL allows both search engines and us humans, to know clearly where the URL link will take us. A good URL also has a small contribution to SEO ranking.
- When creating a URL, try to keep it simple and sweet, making use of readable words instead of ids and other technical names.
- If your URL is to have multiple words, separate them with a hyphen. The aspects of the destination web page will be much more easily understood by users and search engines. Google recommends using hyphens over underscores so please keep this in mind.
- It is better to use lower case letters to avoid duplication in future
In web CMSs, when creating a new web page, usually we have the option to auto-create a URL path, or create it ourselves. Do try and stay on top of your URL’s in either case.
Protect the Security of Your Website
As an admin user of your website's CMS, it's imperative it stays out of the hands of those who wish harm for it. Now, your CMS provider will have already taken steps to secure the platform from external threats such as hackers and the likes, however as admins of our content management systems we have the responsibility of giving access to staff members, IT personnel if required and so on.
First and foremost, always know who you have given access to, and if they ever leave your company, revoke their access immediately to avoid any unnecessary issues.
It is also crucial you familiarize yourself with the permission settings your CMS has built in. You don't want a junior member of your staff to have full access and then accidentally delete all of your data. In some cases, your CMS provider will give you some training or guides on this subject.
Removing Old Content
Drop parts of your website that are no longer beneficial to site visitors.
Old content in general is not a bad thing, in fact it is a good thing, as pages need to build up authority over time. However, old content such as a blog post about the best laptops of 2007 is not going to be attracting many site visitors and will likely just take up space on your website's file storage.
Always Keep a Backup of Data
Your website data is important and losing it could mean losses for your business. While website CMS providers do back up your data, the backup may only be for the last 14 days. If you’ve lost data going back 15 days or more, then that data could likely be lost forever.
Here are some practical steps to ensure your website data is safe:
- Ask the website CMS provider, how long do they keep a backup of your data - This could be the difference in deciding on choosing which website CMS provider to do business with.
- Store your data locally - When adding content to your site, if the content is important such as a blog post or a job description, ensure that content is saved in a word document and stored either locally on your PC or on a cloud drive such as Google Drive or Microsoft One Drive, somewhere away from the website itself.
- Wayback Machine - This a popular tool which is used to archive data and sites. It simply stores your website in its history books for future reference. In the future, you can use a snapshot stored from an earlier date to see how the site was and what content was there. The site may not display your website exactly how it should be, but it will likely contain some of the important text or images that needs recovering.
Wrapping it Up
This was a big one, we’ve covered a lot of solutions to help you get the best out of your website and content management system. Remember that website changes can take a couple of months if not more, to reflect positive changes and growth on search engines.
What you put into your website is what your site visitors will get out of it, and in turn, what you reap!
