Focus on Technical SEO - Deploying an Image or Video.docx

Focus on Technical SEO: Deploying an Image or Video Every developer is familiar with the syntax for deploying an image or a video on a web page. It is such an elementary principle that you are probably wondering what new idea this article could possibly address? You can deploy a web page hundreds of different ways and have it all look the same on the front end but the back-end is a different story. For the purposes of better SEO I want to share some best practices I have adopted that will help your website to rank better in the SERPs and ultimately bring more traffic to your website. What is the best way to deploy an image on a web page for SEO? I am going to use the latest HTML5 syntax guidelines for the purposes of this tutorial. For anyone who might be a beginner, let’s outline the parts of the image tag (<img>) for clarification; What do I need to know about the image source URL? Best SEO practices for URL’s should include the following; URL’s for images should contain 2-4 keywords and describe what the image is. For the most part they should follow basic sentence structure but you can eliminate the minor parts of speech to shorten the length. Examples; my-collie-dog-queenie-at-beach.jpg blue-leather-living-room-love-seat.jpg Image file names and URL’s should never contain spaces, punctuation or capital letters. Total URL length should be under 100 characters including dashes. Examples; http://aws/mywebsite/pets/my-collie-dog-queenie-at-beach.jpg http://mywebsite.com/furniture/living-room/blue-leather-love-seat-sale.jpg About image and hyperlink title attributes Title attributes within an image or hyperlink context are not the same thing as ‘title tags’. Title tags are a key part of SEO and should always be included. Here I am discussing the title attribute area that is a part of both image and hyperlink syntax. Whatever you put in the title attribute field will show up to the end-user on your website whenever they hover their mouse over an image or a hyperlink. This is a great resource for providing more information to the visitors on your site. Since site visitors will see this information it is critical that it is well written and relevant to the user experience. Image title atributes are not required in the syntax of image code and most images are deployed without this. If an image has a caption already then in many cases the title attribute is not necessary. As far as SEO is concerned, most experts say that the search engines never consider them and that they do not factor at all in your overall SEO ranking. Remember that the search engines keep their search algorithms top secret to the public and there is some disagreement about use of the title tag. You will find experts who feel that title attributes are a consideration for overall SEO. It all depends who you ask. Typically I only use them for hyperlinks and I don’t use them for deployment of hero images or b-spots however they can be useful if you are using an image for instructional purposes or if you are creating a hyperlink on an image. I always use title attributes for every hyperlink I deploy anywhere. Regardless of whether they are considered a part of SEO by search engines, title attributes have been proven to improve click-through-rates (CTR). They also create a better user experience by providing more information about a particular hyperlink without the end-user having to click the link to discover for themselves. When I do use a title attribute I endeavor to provide detailed data about what the hyperlink leads to. What are image alt tags and why are they so dog-gone important for SEO? The information included within the image alt tag appears on your web pages if the images are unable to load for any reason. It should be a brief description of what the image is to inform visitors to your site in the event an image cannot load. Just as importantly, visually impaired visitors to your site use devices and software that will audibly read the description included in the image alt tag to create a better user experience. When there is no data in the image alt tag a visually impaired visitor doesn’t know there is an image there at all. You will find lots of articles about SEO that mention the importance of including an alt tag with every image. You can easily deploy an image without one and many web developers do. The Internet is littered with website images that contain no alt tag information. An image alt tag is an SEO opportunity that goes unused when you leave the alt tag blank. The search engine spiders who crawl your website are not intelligent enough to examine an image to figure out what it is. The search engines will consider your site less than others when you fail to include image alt tags. By including them, the spiders can index your images for searches within the search engines. If you are like me then you often use the ‘images’ option within the search engine to see photographs of items you are shopping online for. By including descriptive alt tags with your images and likewise including keywords within the file names, the spiders can better index your images to serve them up when people are looking for images of the products you might sell on your website. What do I need to know about image dimensions and file size optimization? Images make your web pages more interesting and it is believed that the search engines algorithms expect to find a certain ratio of images to copy on your web pages. But the more images you have on a web page the slower it will load and since web page loading times are also an important consideration for SEO you should optimize all of your images before you load them on your pages. The dimension attributes of an image tag allow you tell the browsers what size an image should be rendered on a given web page. In the early days of web design many developers did not have tools such as PhotoShop to adjust the sizes of images. These attribute settings allowed a developer to load a really large or small image and then resize it on the fly to fit on the web page. Since page load speed is now an important consideration for SEO it is important to have images pre-sized before you load them on your web page. This reduces overall file size and also ensures that you get the desired image resolution for every image on your website. A best practice is to have these image dimension attributes such as height and width set to ‘auto’ so that the image loads in its natural size rather than being resized on the fly. Here is a list of best practices for image optimization; Resize images with a tool like PhotoShop, Pixlr, Splashup or any other image tool before you deploy the image to your website. Once your image is the natural size you want to have on your webpage use an image optimizer such as Kraken, Optimizilla, Smush.it or any other to make your image file sizes as small as possible before deploying on your website. The search engines will rank your site lower if there is too much duplicate content on your web pages. To reuse images across multiple pages it is a best practice to size them differently, give them unique file names and alt tag descriptions and load them separately for each web page. What do I need to know about deploying video on my website with HTML5? Website video is becoming critical to website performance as well as an emerging standard for SEO. It is theorized that by 2019 as much as 80% of Internet content will be video. The general Internet public prefers to get their information through short narrative video clips rather than reading long paragraphs of copy. People don’t want to read anymore. The video content on your website is about to become a seriously critical factor to your website performance in the SERP’s. Most companies are already hiring video crews and editors to develop effective video content for their websites. In the early days of web development if you wanted to include video on your website then you needed to include a media player as part of your page code in order to play the video. This added a lot of code to web pages and caused them to load very slowly. With the ever increasing number of Internet capable devices and browsers it became harder for web developers to ensure that all visitors to a website could view the video content they deployed. That was when websites like YouTube were born. With HTML5 it is no longer a requirement to load a media player on your web page in order to include videos although it is not as simple as it sounds. The new video tag does allow you to easily embed videos directly on your page without the need for a media player however because of the large variety of Internet devices and web browsers that people use, any video that is deployed on a web page has to be included in at least 3 different formats to be compatible with most Internet capable devices and browsers. These 3 basic formats are; MP4, OGV and WebM. This means that web developers have to use utility software such as Adobe Media Encoder to reformat video into these 3 formats. It also means that the videos will take up more room in whatever file storage you use for your website and can slow web page loading time if not deployed in an optimized manner. In addition, these 3 formats don’t allow older browsers to view your video content. Ideally, if you want to be sure that all devices and older browsers can view your video then you must deploy them in 6 or more different formats. What is the proper syntax for embedding video code on a web page in HTML5? Why are embedded YouTube videos easier to deploy on web pages? Even though HTML5 standards better address video content by including a media player there are still some drawbacks to deploying video content directly on your website. Internet users have many different kinds of devices and browsers. Not all devices or browsers are compatible with MP4 video format. Firefox and older browsers require a different video format necessitating that a video be deployed in at least 3 different formats as previously discussed. Older web browsers have compatibility issues with all of these latest video formats and if you want to be sure your video is viewable by everyone who visits your website then it can be necessary to deploy a video in at least 6 different formats. YouTube eliminates all of this by hosting your video with their own media player that is compatible with most Internet devices and most web browsers. By uploading your videos to YouTube on a public or private channel you can then embed them in your web pages saving you the hassle of having to format the video in all of these different versions. It also saves you from having to store all of the various copies of your video on your own storage site. Once you have uploaded a video to your public or private YouTube channel you can copy the embed code direct from the YouTube site and embed the video directly on your web page. This saves you from having to reformat the video and store the large video files on your own storage area. What is a content delivery network and why is it good for SEO? A content delivery network (CDN) is a separate location apart from your website code and database that is used to store and serve-up outside content such as images, video or documents that will be accessed from within your website code. All of the images, videos and documents that appear or are linked on your website pages are stored separately from the code that builds and lays out your website. A CDN is not specifically a requirement for good SEO but more a best practice. The main benefits of using a CDN are that it makes your website run faster and your pages load quicker. Another benefit is that you can see the total amount of disk space that is required for your images, video and documents sans the website code-base. This provides better insight to your website statistics. If you use a CDN like Amazon S3 which lives in the Amazon cloud you may be able to gain even more site speed. Google offers a similar cloud-based CDN. The reason that this can make your website load faster is that both Amazon and Google have syndicated content servers all over the globe. If a web user in France wants to look at your website then your content is served up from a web server in that part of the globe saving valuable seconds with page load times. Can I Use a CDN With a CMS Like WordPress and Will It Be Helpful for SEO? Yes. With a content management system (CMS), such as WordPress, lots of meta data is created when an image, video or document is uploaded directly into the database. Over time, your website performance begins to slow down as more pages are created and more content is uploaded directly to your WordPress website. The more pages, images, video and documents you add, the slower your website becomes. This is known as ‘website bloat’. Even after you delete pages, images, video and documents, some of that meta data can remain, even after an image, video or document is deleted from your website. This extra code builds up over time and can add to your website bloat as well as increase page load times which directly effects your SEO ranking in the search engines. The only way to clear that old meta data is to back-up your entire site, delete it, reinstall WordPress and rebuild your site one page at a time; a tedious, risky and laborious task. How Does a CDN Help In a Team Development Environment? In situations where you are working with teams of developers it is beneficial to monitor the disk space in use for images, video and documents to ensure everyone is doing their best to optimize assets that are deployed on your website. If the images are stored with your website code then it is more of a challenge to find the opportunities for optimization within the website structure. Without a content delivery network, website assets like images, video and documents not only take up valuable web server disk space, they also take up more room in the website database. Storing the images in a CDN reduces the weight of the code base for your website and eliminates some of the overhead for website maintenance tasks. How Does a CDN Help with Website Maintenance? As your website ages, some images will no longer be in use. Having them in an outside CDN makes it easier to identify which images, video and documents are no longer linked on your site. With this knowledge you can remove them from the content delivery network with less clutter, (such as meta data and assigned disk space), remaining in your website code-base. A CDN can also make website migration simpler. If you are planning on migrating your website to another platform or planning on redesigning your web pages a content delivery network allows you to better segregate your content to make moves more efficient. If you wanted to re-platform your website at any time in the future then you could move the website codebase without having to move all of the website assets at the same time. You wouldn’t have to change your asset mapping as a part of the website migration. What is the best content delivery network CDN provider? Much of this decision depends on wherever your website is hosted. WP Engine provides a CDN for any WordPress website it hosts and likewise Acquia provides a CDN for any specific Drupal website. Most website hosting platforms now provide their own CDN. An argument can be made that Amazon offers the most efficient and fastest responding CDN since its cloud platform is very pervasive all over the globe. The differences we are talking about in speed are fractions of a second. Which CDN is best for your site will have a lot to do with the size of your site. If your website is massive with many thousands of pages then a cloud CDN such as Amazon or Google is a no-brainer. If you website is smaller though you could go with any CDN that is most convenient for you. Especially if your website will serve as an e-commerce platform you should have a CDN. For further reading consider some of my other blog articles; How to Do Keyword Research and Develop Great Keyword Strategies Internal Links - The Do's and Don'ts Why Are Image File Names an Important Consideration for SEO? How Can I Drive More Traffic to My Website?