How to Create and Optimize an Embed Code

An infographic embed code is a powerful link building and content marketing 1-2 punch. An embed code makes your infographic easier to share AND ensures that the people that publish your infographic link back to your site. But it’s important that you optimize your embed codes the right way or else you risk getting your site hit by a Google penalty. In this video I’ll show you how to set up an optimize an embed code for safe and effective SEO.

Video Transcript

Hey. What’s up, everybody. It’s Brian Dean from QuickSprout and in this video I’m going to show you how to create an embed code so that more people share your infographic and link back to your site. So, first of all, why would you want to use an embed code? Well, when you publish an infographic on your site, like Neil has here, it’s possible that people might just link to it because they like the infographic. Or they might share it by actually downloading the image and then uploading it to their blog.

But you can make it a lot easier for them by including an embed code, and this is an example right here. You may have noticed this at a bottom of a lot of infographics nowadays. Basically what it is, it’s a code that makes it very easy for people to share and I’m going to show you how to do it. So basically you just copy the embed code. Head over to your blog post editor. Click on the Text tab. Paste it in, click on Visual, and boom. Your infographic is now shared on your site.

But more importantly, when people use the embed code it automatically adds a link back to your site. So sometimes people might take your infographic and not give you attribution with a link, which is obviously not very good for SEO. So, one of the benefits of the embed code, besides making it easier for people to share is the fact that you know when people share it you’re going to get your links. So, next I’m going to show you how to create an embed code from within WordPress.

So, this is actually an infographic from Kiss Metrics, but let’s just pretend that it’s your infographic and you want to publish it on your WordPress blog. If you were to publish it like this you would notice that the infographic looks great. But when people get to the bottom there’s no embed code for them to share it. So in order to add that embed code to your WordPress site you want to install the Embed Code Generator plug-in.

So, head back to your WordPress dashboard. Hover over Plug-ins and click on Add New, and then type in “embed code” and click on Search Plug-ins and you want to install this one, Embed Code Generator, which I’ve already installed. So, once this is installed head back to the post that your infographic is on and scroll to the bottom, and you should see this new area called “Embed Code Generator”. Okay? So these are some of the fields that you want to fill in, in order to create your own embed code.

So, the source URL is wherever the image is located on your website. So to find that head back to your infographic and click on the little picture icon here, and click the Advanced Settings tab, and then copy the source from here. Close this, head back down, and paste that in. Now, where it says “link image to”, [you] usually want to leave this blank. Okay? So this is if you want the image itself to be clickable, which is not usually something that you want. In the title you can put something like, “ROI of Paid Ads” because when people hover over it this is the text that they’ll see.

Then, under “Alt Attribute” you can put something that’s similar or the same. You can even set the parameters of how big you want it. But this is the important part down here, “Courtesy of your site name,” and “Courtesy of your site URL,” because this is the actual link that will go back to your site. So under “Site Name” you do want to put your site name. Okay? So if your site was QuickSprout, you’d want to put “QuickSprout”.

You don’t want to use exact match anchor text here. Okay? Because if you do that and 1,000 people share it, all of a sudden you have an anchor text over-optimization problem, which could hit your site with Penguin. So you don’t want to do something like, “Social Media Tips” because that’s just spammy. Right? You want to use your actual brand name or something like “QuickSprout.com”. Okay?

Under “Your Site URL” you could either use your homepage, in this case “QuickSprout.com”, or you can include the page that the infographic is actually published on because that makes sense. But you don’t want to go linking to random pages on your site just because you want them to rank because that’s actually very spammy and it could get your site penalized. So next I’m going to show you how to create an embed code outside of WordPress if you rather not use this plug-in or you run a site that’s not powered by WordPress.

Okay, so what you’re looking at is the SEO Gadget Embed Code Generator. So to find this page, Google “SEO Gadget Embed Code Generator” and this is the first result. So what this is, it’s basically the same fields and features as the plug-in, but you don’t need to install the plug-in. So where it says “Enter image URL”, that’s the source URL. So you’d want to use the same one if you were using the plug-in, so in this case the one from the infographic in your post. Then, “Inforgraphic Title”, that’s just the name of your infographic, so “ROI of Paid Ads”. The source link would be your homepage. Anchor text would be “QuickSprout”, and your email.

Okay? So once that’s done click on “Grab My Embed Code”, and here you go. Here is the embed code that you want to actually embed on your site to create the embed code. So just copy this and paste it into your blog editor and you’re good to go. If you’re going to use this embed code in WordPress there is a little bit of a caveat to this, and I’m going to show you what that is.

So if you were to copy this as is, paste it into your WordPress editor and then click Visual, it wouldn’t work. Okay? So what it does is it actually shows the image twice instead of showing the embed code at the bottom. The reason that is, is because for some reason WordPress has a propensity to delete the JavaScript that makes this whole thing work. So in order to make it work properly in WordPress you need to install a special plug-in called HTML Snippet.

So, hover over Plug-ins and click on Add New. Then type in “HTML Snippet” and click on Search Plug-ins, and choose the first one that comes up which will be called “Insert HTML Snippet”. Now, once that’s installed you’ll notice a new area to your WordPress dashboard called “XYZ HTML”. So you want to hover over that and click on HTML Snippets. Then click on Add New HTML Snippet, and then give it a tracking name. So let’s just call it “Embed.

Then you want to paste the embed code that you got from SEO Gadget in this box, and then click on Create. What this will do, it’ll create a short code that will still keep the JavaScript instead of deleting it like WordPress tends to do. So you want to copy this snippet short code and then head back to the post that you were going to publish the infographic on.

So, all you have to do from here is paste the short code that HTML Snippet gave you, and if you want you can write a little introduction like, “Here is my infographic,” and you’re pretty much good to go. When you preview the infographic you’ll see exactly what it’ll look like when you publish it. As you can see, just like normal the infographic is here. But thanks to the SEO Gadget Embed Code Generator, we now have a nice embed code at the bottom so people can easily share it.

So that’s all there is to creating an embed code for your site. As you can see this is a great way to increase the share-ability of every infographic that you publish and it doesn’t take a lot of extra work. So thanks for watching this video and I’ll see you in the next one.