{"id":82,"date":"2018-11-28T13:56:04","date_gmt":"2018-11-28T13:56:04","guid":{"rendered":"http:\/\/rosie.fourfrontdev.us\/tasks\/?p=82"},"modified":"2018-11-28T13:56:04","modified_gmt":"2018-11-28T13:56:04","slug":"image-optimization-from-yoast","status":"publish","type":"post","link":"http:\/\/rosie.fourfrontdev.us\/tasks\/image-optimization-from-yoast\/","title":{"rendered":"image optimization from yoast"},"content":{"rendered":"<header class=\"post__header\">\n<h1 class=\"post__title\"><em class=\"font-body\">Image SEO:<\/em>\u00a0Optimizing images for search engines<\/h1>\n<picture class=\"post__image\"><source srcset=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/1_Optimize_images_FI.png\" media=\"(min-width: 601px)\" \/><source srcset=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/1_Optimize_images_FI-600x314.png\" media=\"(max-width: 600px)\" sizes=\"100%\" \/><img decoding=\"async\" src=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/1_Optimize_images_FI-600x314.png\" alt=\"\" \/><\/picture><\/header>\n<div class=\"post__content\">\n<div class=\"post__meta meta mb-32\">\n<div><span class=\"meta__date\">25 November 2018<\/span>\u00a0<span class=\"meta__author\">by\u00a0<a href=\"https:\/\/yoast.com\/about-us\/team\/michiel-heijmans\/\">Michiel Heijmans<\/a>\u00a0<\/span><span class=\"meta__comments\">&#8211;\u00a0<a href=\"https:\/\/yoast.com\/image-seo\/#comments\">8 Comments<\/a><\/span><\/div>\n<div><span class=\"meta__tags\">Tags:\u00a0<a href=\"https:\/\/yoast.com\/tag\/content-seo\/\" rel=\"tag\">Content SEO<\/a>,\u00a0<a href=\"https:\/\/yoast.com\/tag\/image-seo\/\" rel=\"tag\">Image SEO<\/a><\/span><\/div>\n<\/div>\n<div class=\"post__aside post__author hide-on-mobile\">\n<div><a href=\"https:\/\/yoast.com\/about-us\/team\/michiel-heijmans\/\">Michiel Heijmans<\/a>Michiel is a partner at Yoast and our COO. Internet veteran. His main goal with most of his articles is to kick-start your site optimization. So much to do!<\/p>\n<\/div>\n<p><img decoding=\"async\" src=\"https:\/\/yoast.com\/app\/uploads\/2015\/09\/Author_Michiel_x2.png\" alt=\"Picture of Michiel Heijmans\" \/><\/div>\n<p>Whether you\u2019re a blogger or you write articles for an online magazine or newspaper, chances are you\u2019ll find yourself asking whether your article needs an image or not. The answer is always \u201cYes\u201d. Images bring an article to life and can also contribute to your website\u2019s SEO. This post explains how to fully optimize an image for\u00a0<a href=\"https:\/\/yoast.com\/what-is-seo\/\">SEO<\/a>\u00a0and provides some pointers on using images for the best user experience.<\/p>\n<ul class=\"toc\">\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#always\">Always use images<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#find\">Finding the right image<\/a>\n<ul>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#alternative\">Alternatives<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#prepare\">Preparing images for use in your article<\/a>\n<ul>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#format\">Choose the right file name<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#scale\">Scale for image SEO<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#responsive\">Use responsive images<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#size\">Reduce file size<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#add\">Adding the image to your article<\/a>\n<ul>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#caption\">Captions<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#alt\">Alt text and title text<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#structured\">Add image structured data<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#graph\">OpenGraph and Twitter Cards<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#align\">Alignment<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#sitemap\">XML image sitemaps<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/image-seo\/#summary\">Image SEO: summary<\/a><\/li>\n<\/ul>\n<h2 id=\"always\">Always use images<\/h2>\n<p>Images, when used with care, will help readers better understand your article. The old saying \u201cA picture is worth a thousand words\u201d probably doesn\u2019t apply to Google, but it\u2019s certainly true when you need to spice up 1,000 dull words, illustrate what you mean in a chart or data flow diagram, or just make your social media posts more enticing.<\/p>\n<p>It\u2019s a simple recommendation: you should add images to every article you write online to make them more appealing. What\u2019s more, since visual search is getting increasingly important \u2014 as seen in\u00a0<a href=\"https:\/\/yoast.com\/google-at-20\/\">Google\u2019s vision for the future of search<\/a>\u00a0\u2014 it could turn out to provide you with a nice bit of traffic. If you have visual content it might make sense to put image SEO a bit higher on your to-do list.<\/p>\n<p>Google Images was recently revamped with a brand-new interface. You\u2019ll also find new filters, meta data and even attribution. The cool new filters show that Google increasingly knows what\u2019s in an image and how that image fits into the larger context.<\/p>\n<div id=\"attachment_1529144\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1529144 size-full\" src=\"https:\/\/yoast.com\/app\/uploads\/2017\/04\/new_google_image_search-e1539770137514.jpg\" alt=\"new google image search\" width=\"900\" height=\"437\" \/><\/p>\n<p class=\"wp-caption-text\">Google\u2019s new interface for Image Search was released at the end of September 2018<\/p>\n<\/div>\n<h2 id=\"find\">Finding the right image<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"nopadding noborder alignright wp-image-293927 size-full\" title=\"Image of employer welcoming the visitor\" src=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/not-welcome-to-your-company.jpg\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" srcset=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/not-welcome-to-your-company.jpg 250w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/not-welcome-to-your-company-132x114.jpg 132w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/not-welcome-to-your-company-159x137.jpg 159w\" alt=\"Image SEO: This image isn't saying 'welcome to our\u00a0company', it's saying 'welcome to a\u00a0company'.\" width=\"250\" height=\"216\" \/>It\u2019s always better to use original images \u2013 those you have taken yourself \u2013 than stock photos. Your team page needs pictures of your actual team, not this dude on the right or one of his stock photo friends.\u00a0<em>Off topic: never mind that dude needs a haircut.<\/em><\/p>\n<p>Your article needs an image relevant to its subject. If you\u2019re choosing a random photo just to get a green bullet in our SEO plugin\u2019s content analysis, then you\u2019re doing it wrong. The image should reflect the topic of the post or have illustrative purposes within the article of course. Try to place the image near the relevant text. If you have a main image or an image that you\u2019re trying to rank, try to keep that near the top of the page, if it makes sense.<\/p>\n<p>There is a simple image SEO reason for all of this: an image with related text ranks better for the keyword it is optimized for. There\u2019s more about image SEO later.<\/p>\n<h3 id=\"alternative\">Alternatives<\/h3>\n<p>If you don\u2019t have any images of your own that you can use, there are other ways to find unique images and still avoid stock photos.\u00a0<a href=\"https:\/\/www.flickr.com\/creativecommons\/\">Flickr.com<\/a>\u00a0is a nice image source for instance, as you can use Creative Commons images. Don\u2019t forget to attribute the original photographer. I also like the images provided by sites like\u00a0<a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>.\u00a0Our blogger Caroline wrote an awesome\u00a0<a href=\"https:\/\/yoast.com\/using-images-in-your-blog-post\/\">overview of where to get great images<\/a>. Steer clear of the\u00a0<a href=\"https:\/\/peopleimages.com\/search#business\">obvious stock photos<\/a>, picking the ones that look (ok, just a bit)\u00a0<a href=\"https:\/\/www.shutterstock.com\/cat.mhtml?searchterm=leisure&amp;language=en&amp;lang=en&amp;search_source=&amp;safesearch=1&amp;version=llv1&amp;media_type=\">more genuine<\/a>. But whatever you use, it seems like images with people in them always look like stock photos, unless you took them yourself. In the end, that\u2019s always the best idea.<\/p>\n<p>Obvious alternatives for photos could be illustrations, which is what we use, or graphs. An honorable mention should go to\u00a0animated GIFs, as they are incredibly popular these days.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"nopadding wp-image-294024 size-full\" title=\"Animated image of Barney Stinson and Robin Scherbatsky from the sitcom How I Met Your Mother doing a highfive.\" src=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/how-i-met-your-highfive.gif\" alt=\"Image SEO: Animated GIFs are popular these days\" width=\"500\" height=\"235\" \/><\/p>\n<p>But even though animated GIFs are popular, don\u2019t go overboard. It\u2019ll make your post harder to read, as the movement of the image distracts your readers\u2019 attention. They can also slow down your page.<\/p>\n<h2 id=\"prepare\">Preparing images for use in your article<\/h2>\n<p>Once you have found the right image \u2013 whether an illustration, chart or photo \u2013 the next step is to optimize it for use on your website. There are a number of things you need to think about:<\/p>\n<h3 id=\"format\">Choose the right file name<\/h3>\n<p>Image SEO starts with the file name. You want Google to know what the image is about without even looking at it, so use your focus keyphrase in the image file name. It\u2019s simple: if your image shows a sunrise in Paris over Notre Dame Cathedral, the file name shouldn\u2019t be DSC4536.jpg, but notre-dame-paris-sunrise.jpg. The main keyphrase would be Notre Dame, as that is the main subject of the photo, which is why it\u2019s at the beginning of the file name.<\/p>\n<h3 id=\"scale\">Scale for image SEO<\/h3>\n<p>Loading times are important for UX and SEO. The faster the site, the easier it is to visit and index a page. Images can have a big impact on loading times, especially when you upload a huge image then display it really small \u2013 for example a 2500\u00d71500 pixels image displayed at 250\u00d7150 pixels size \u2013 as the entire image still has to be loaded. So resize the image to how you want it displayed. WordPress helps by automatically providing the image in multiple sizes after upload. Unfortunately, that doesn\u2019t mean the file size is optimized as well, that\u2019s just the image display size.<\/p>\n<h3 id=\"responsive\">Use responsive images<\/h3>\n<p>This one is essential for SEO as well, and if you\u2019re using WordPress it\u2019s done for you since it was added\u00a0by default from version 4.4. Images should have the\u00a0<code>srcset<\/code>\u00a0attribute, which makes it possible to serve a different image per screen width \u2014 especially useful for mobile devices.<\/p>\n<h3 id=\"size\">Reduce file size<\/h3>\n<p>The next step in image SEO should be to make sure that scaled image is compressed so it is served in the smallest file size possible.<\/p>\n<p>Of course, you could just export the image and experiment with quality percentages, but I prefer to use 100% quality images, especially given the popularity of retina and similar screens.<\/p>\n<div id=\"attachment_1529143\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"nopadding wp-image-1529143 size-full\" title=\"Screenshot of an image, half normal and half optimized by JPEGMini showing no difference in visual quality\" src=\"https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo.jpg\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" srcset=\"https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo.jpg 1800w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo-250x121.jpg 250w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo-768x372.jpg 768w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo-600x291.jpg 600w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/jpegmini-image-seo-103x50.jpg 103w\" alt=\"jpegmini image seo\" width=\"1800\" height=\"873\" \/><\/p>\n<p class=\"wp-caption-text\">Tools like JPEGmini can drastically reduce image file sizes without artifacts<\/p>\n<\/div>\n<p>You can still reduce the file size of these images by removing the\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Exchangeable_image_file_format\">EXIF data<\/a>, for example. We recommend using tools like\u00a0<a href=\"https:\/\/imageoptim.com\/\">ImageOptim<\/a>\u00a0or websites like\u00a0<a href=\"http:\/\/www.jpegmini.com\/\">JPEGmini<\/a>,\u00a0<a href=\"https:\/\/www.jpeg.io\/\">jpeg.io<\/a>\u00a0or\u00a0<a href=\"https:\/\/yoast.com\/out\/kraken\/\">Kraken.io<\/a>.<\/p>\n<p>When you\u2019ve optimized your images, test your site with tools like\u00a0<a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google PageSpeed Insights<\/a>,\u00a0<a href=\"https:\/\/yoast.com\/google-lighthouse\/\">Lighthouse<\/a>,\u00a0<a href=\"https:\/\/webpagetest.org\/\">WebPageTest.org<\/a>\u00a0or\u00a0<a href=\"https:\/\/tools.pingdom.com\/\">Pingdom<\/a>.<\/p>\n<h2 id=\"add\">Adding the image to your article<\/h2>\n<p>While Google is getting better at recognizing what\u2019s in an image, you shouldn\u2019t rely on their abilities just yet. It all comes down to you providing the context for that image \u2014 so fill in as much as you can!<\/p>\n<p>Now your image is ready to use, but don\u2019t just throw it into your article anywhere. As mentioned earlier, adding it close to related textual content helps a lot. It makes sure the text is as relevant to the image as the image is to the text.<\/p>\n<h3 id=\"caption\">Captions<\/h3>\n<p>The image caption is the text that accompanies the image on the page \u2014 if you look at the images in this article, it\u2019s the text in the gray box below each one. Why are captions important for image SEO? Because people use them when scanning an article. People tend to scan headings, images and captions as they scan a web page.\u00a0<a href=\"http:\/\/www.nngroup.com\/articles\/concise-scannable-and-objective-how-to-write-for-the-web\/\">Back in 1997, Nielsen wrote<\/a>:<\/p>\n<blockquote><p>\u201cElements that enhance scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.\u201d<\/p><\/blockquote>\n<p>In 2012,\u00a0<a href=\"https:\/\/blog.kissmetrics.com\/shocking-truth-about-graphics\/\">KissMetrics went even further, stating<\/a>\u00a0that:<\/p>\n<blockquote><p>\u201cCaptions under images are read on average 300% more than the body copy itself, so not using them, or not using them correctly, means missing out on an opportunity to engage a huge number of potential readers.\u201d<\/p><\/blockquote>\n<p>Do you need to add captions to every image? No, because sometimes images serve other purposes. Decide whether you want to use yours for SEO as well or not. Bearing in mind the need to avoid over-optimization, I\u2019d say you should only add captions where it would make sense to the visitor for one to be there. Think about the visitor first, and don\u2019t add a caption just for image SEO.<\/p>\n<h3 id=\"alt\">Alt text and title text<\/h3>\n<p>The alt text (or alt tag) is added to an image so there will be descriptive text in place if the image can\u2019t be displayed to the visitor for any reason. I can\u2019t put it any better than\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Wikipedia:Alternative_text_for_images\">Wikipedia<\/a>:<\/p>\n<blockquote><p>\u201cIn situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.\u201d<\/p><\/blockquote>\n<p>Be sure to add alt text to every image you use, and make sure the alt text includes the SEO keyword for that page (if appropriate). Most importantly, describe what\u2019s in the image so both search engines and people can make sense of it. The more relevant information surrounding an image has, the more search engines deem this image important.<\/p>\n<p>When hovering over an image, some browsers show the alt text as a \u2018tooltip\u2019. Chrome shows the title text\u00a0<a href=\"http:\/\/www.w3.org\/TR\/html4\/struct\/global.html#adef-title\">as was intended<\/a>. Title text for images is similar and a lot of people who use titles simply copy the alt text, but more and more people leave them out altogether. Why is that?\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Images_in_HTML#Adding_nice-to-have_information_using_the_title_attribute\">Here\u2019s Mozilla\u2019s take<\/a>:<\/p>\n<blockquote><p>\u201c<code>title<\/code>\u00a0has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won\u2019t show it unless you are hovering with a mouse (so e.g. no access to keyboard users).\u201d<\/p><\/blockquote>\n<p>It is better to include such supporting information in the main article text, rather than attached to the image.<\/p>\n<p class=\"readmore\">Read more:\u00a0<a href=\"https:\/\/yoast.com\/image-seo-alt-tag-and-title-tag-optimization\/\" data-prefix=\"Read more\">Read more about alt tag and title tag optimization \u00bb<\/a><\/p>\n<h3 id=\"structured\">Add image structured data<\/h3>\n<p>Adding\u00a0<a href=\"https:\/\/yoast.com\/structured-data-schema-ultimate-guide\/\">structured data<\/a>\u00a0to your pages can help search engines display your images as rich results. While Google says structured data doesn\u2019t help you rank better, it does help to achieve a more fleshed out listing in Image Search. There\u2019s more, though. For instance, if you have recipes on your site and you add structured data to your images Google can also\u00a0<a href=\"https:\/\/webmasters.googleblog.com\/2017\/08\/badges-on-image-search-help-users-find.html\">add a badge to your images<\/a>\u00a0showing that this image belongs to a recipe. Google Images supports structured data for the following types:<\/p>\n<ul>\n<li>Product<\/li>\n<li>Video<\/li>\n<li>Recipe<\/li>\n<\/ul>\n<p>Google has a number of guidlines you need to follow if you want your images to appear rich in image search. Main takeaway is that the image attribute is mandatory and that your images should be crawlable and indexable. You can find them all Google\u2019s\u00a0<a href=\"https:\/\/developers.google.com\/search\/docs\/guides\/sd-policies#images\">Structured Data General Guidelines<\/a>. Try out\u00a0<a href=\"https:\/\/yoast.com\/academy\/structured-data-training\/\">Structured data training<\/a>\u00a0if you want to learn how to add structured data to your pages!<\/p>\n<h3 id=\"graph\">OpenGraph and Twitter Cards<\/h3>\n<p>Earlier on, I mentioned using images for social sharing. If you add the following image tag to the\u00a0<code>&lt;head&gt;<\/code>\u00a0section in your page HTML like this:<\/p>\n<p><code>&lt;meta property=\"og:image\" content=\"http:\/\/example.com\/link-to-image.jpg\" \/&gt;<\/code><\/p>\n<p>That will make sure the image is included in your share on Facebook (and OpenGraph is also used for\u00a0<a href=\"https:\/\/developers.pinterest.com\/rich_pins_overview\/\">Pinterest<\/a>, for instance).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1469565 size-full\" src=\"https:\/\/yoast.com\/app\/uploads\/2017\/04\/post-to-facebook.jpg\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" srcset=\"https:\/\/yoast.com\/app\/uploads\/2017\/04\/post-to-facebook.jpg 557w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/post-to-facebook-250x293.jpg 250w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/post-to-facebook-43x50.jpg 43w, https:\/\/yoast.com\/app\/uploads\/2017\/04\/post-to-facebook-128x150.jpg 128w\" alt=\"post-to-facebook\" width=\"557\" height=\"653\" \/><\/p>\n<p>Our\u00a0<a href=\"https:\/\/yoast.com\/wordpress\/plugins\/seo\/\">Yoast SEO plugin<\/a>\u00a0has a\u00a0<a href=\"https:\/\/yoast.com\/social-media-optimization-with-wordpress-seo-by-yoast\/\">Social section<\/a>\u00a0where you can set and even \u2013 in the Premium version \u2013\u00a0<a href=\"https:\/\/yoast.com\/social-previews-yoast-seo-premium\/\">preview your Facebook and Twitter posts<\/a>. Make sure you use a high-quality image, like the original image you used in the post, as the social platforms use higher quality\/larger images more often than not. If you have set this up correctly, and it doesn\u2019t work, try to flush Facebook\u2019s cache in the\u00a0<a href=\"https:\/\/developers.facebook.com\/tools\/debug\/\">URL Debugger<\/a>.\u00a0<a href=\"https:\/\/dev.twitter.com\/cards\/overview\">Twitter Cards<\/a>\u00a0do the same for Twitter and are also generated by our plugin.<\/p>\n<h3 id=\"align\">Alignment<\/h3>\n<p>This is one of my pet peeves: Images should never break the left reading line. I\u2019m sure there are studies backing this up, but for me it\u2019s personal. I just really don\u2019t like it when text starts to the right of an image, only to jump to the left the next image down:<\/p>\n<div id=\"attachment_294654\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-294654 size-full\" title=\"Image of a web text that starts with an image aligned to the left. This means text starts in the center of the column and jumps back to the right below the image.\" src=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line.png\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" srcset=\"https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line.png 500w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line-250x111.png 250w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line-180x80.png 180w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line-360x160.png 360w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line-235x104.png 235w, https:\/\/yoast.com\/app\/uploads\/2015\/01\/maintain-the-left-reading-line-470x209.png 470w\" alt=\"Maintain the left reading line; don't align images to the left\" width=\"500\" height=\"222\" \/><\/p>\n<p class=\"wp-caption-text\">Maintain the left reading line; don\u2019t align images to the left<\/p>\n<\/div>\n<p>If you use an image at the same width as your text column, that\u2019s fine and it will even help emphasize the image more.<\/p>\n<p>I\u2019ll be honest: this has absolutely nothing to do with image SEO, but I saw the chance to express my opinion and used it! I think it\u2019s bad for user experience. So, just to please me: don\u2019t do this. Thanks, I appreciate it.<\/p>\n<h2 id=\"sitemap\">XML image sitemaps<\/h2>\n<p>If you are a web developer, you might wonder about XML image sitemaps. I\u2019d prefer to describe this as\u00a0<em>images in XML sitemaps<\/em>. Google is\u00a0<a href=\"https:\/\/support.google.com\/webmasters\/answer\/178636?hl=en\">clear about this<\/a>:<\/p>\n<blockquote><p>Additionally, you can use Google image extensions for sitemaps to give Google more information about the images available on your pages. Image sitemap information helps Google discover images that we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate images on your site that you want Google to crawl and index.<\/p><\/blockquote>\n<p>Every now and then, people ask us about XML image sitemaps. We don\u2019t generate these in our plugin, but follow Google\u2019s advice and include them in the page or post sitemaps. Just scroll down in our\u00a0<a href=\"https:\/\/yoast.com\/post-sitemap.xml\">post sitemap<\/a>\u00a0and you\u2019ll see we have added images to all our latest posts (there is a column just for that). Adding images to your XML sitemaps helps Google index your images, so be sure to do so for better image SEO.<\/p>\n<h2 id=\"summary\">Image SEO: summary<\/h2>\n<p>Image SEO is the sum of a number of elements. With Google getting better at recognizing elements in images every day, it makes sense to make sure the image and all its elements contribute to a good user experience as well as SEO. It would be foolish to try to kid Google.<\/p>\n<p>Keep these things in mind when adding an image to an article:<\/p>\n<ul>\n<li>Use a relevant image that matches your text<\/li>\n<li>Pick a good file name for your image<\/li>\n<li>Make sure image dimensions match the image size as displayed<\/li>\n<li>Use\u00a0<code>srcset<\/code>\u00a0if possible<\/li>\n<li>Reduce file size for faster loading<\/li>\n<li>Add a caption, if appropriate, for easier scanning of the page<\/li>\n<li>Use image alt text. Title text is optional<\/li>\n<li>Add structured data to your images<\/li>\n<li>Add OpenGraph and Twitter Card tags for the image<\/li>\n<li>Don\u2019t break the left reading line with an image \u2013 align images right or center<\/li>\n<li>Use images in your XML sitemaps<\/li>\n<li>Provide all the context you can!<\/li>\n<\/ul>\n<p>Besides contributing to SEO and user experience, images can also play an important role in conversion!<\/p>\n<p>taken from\u00a0https:\/\/yoast.com\/image-seo\/<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Image SEO:\u00a0Optimizing images for search engines 25 November 2018\u00a0by\u00a0Michiel Heijmans\u00a0&#8211;\u00a08 Comments Tags:\u00a0Content SEO,\u00a0Image SEO Michiel HeijmansMichiel is a partner at Yoast and our COO. Internet veteran. His main goal with most of his articles is to kick-start your site optimization. So much to do! Whether you\u2019re a blogger or you write articles for an online &hellip; <a href=\"http:\/\/rosie.fourfrontdev.us\/tasks\/image-optimization-from-yoast\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;image optimization from yoast&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-image-optimization"],"_links":{"self":[{"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":1,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":83,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/posts\/82\/revisions\/83"}],"wp:attachment":[{"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/rosie.fourfrontdev.us\/tasks\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}