How to Improve Weblog Pictures for Public Sharing: An Introduction to Open Chart Tags

We’ve all been there before. You’ve written a great short content, and you’ve plopped a presented image in there to signify the publish on public networking, your blog’s main web page, and so on.

Then, you hop on your public networking accounts and insert the weblink into a new publish. You’re all ready to discuss it with your program, but there’s just one problem.Unfortunately, the public networking sites are taking the wrong thumbnail image. Or worse, they’re taking none at all.

Not only is this annoying — you were so near to being done — but a bad thumbnail image (or no thumbnail image) could seriously hurt your post’s performance on public. Pictures are a key play for garnering engagement on your public websites, and information shows they help generate more likes, shares, and comments. For example, twitter posts that function an image result in 150% more retweets. But that image needs to be the right image — not your logo, not a cut-off image of your call-to-action button, and not some other image randomly pulled from the web page.

So, how do you make sure each of your public networking sites draws in the image you want it to? The answer lies with something called the Start Chart Method.

When you discuss a web page or a piece of writing on Facebook or myspace or LinkedIn, or via Tweets Credit cards, you’ll notice each of these public networking sites instantly draws in a few pieces of details into your public post: the website’s headline, an image, the URL, and a short details. This is made possible using each public body open graph protocol.

LinkedIn has since adopted the same protocol Facebook or myspace originally developed, while Tweets uses its own open graph program that’s based on the same conventions — although Tweets accommodates the Start Chart protocol if you already have it on your website. Also note that Tweets only instantly draws in details from a web weblink when you use Tweets Credit cards — not for regular twitter posts.

How to Use Start Chart Protocol

Marketers need open graph (OG) protocol if they want to write better-looking material on public networking. But where does each online community discover that information? That’s where open graph labels come in. When you put OG labels in the top area of a web page, public networking sites have a much easier time finding the appropriate details for each part of the public publish.

If your website doesn’t have OG labels in the rule, they’ll take a guess on where to locate the right details. Usually they’ll do OK with the headline, URL, and knowledge, but they might have trouble picking the right image. OG image labels tell public networking sites exactly which image to take.

If you plan to use certain websites or weblog articles in your public networking content, there are few OG labels you’ll consist of most often in each page: one for the website headline, one for the image you want displayed, one for the URL of the website, and one for a one- to two-sentence meta details that describes the web page. Here’s what they all look like below, with placeholder written text in all caps denoting where you’d change the details of each tag to reflect what you want the public networking publish to show.

    • <meta property=”og:title” content=”TITLE OF PAGE” />
    • <meta property=”og:image” content=”URL OF IMAGE ONLY” />
    • <meta property=”og:url” content=”URL OF WEBPAGE” />
    • <meta property=”og:description” content=”DESCRIPTION OF PAGE” />

See that “og: … ” text describing the meta residence of each line above? The written text that comes after it is the tag category of the OG tag, telling the online community you’re publishing to which kind of prepared to look for on your website. For example, the first one says “og:title” because this tag dictates the title of the website you want to appear at the top of your public networking publish. Posting a weblog article? The OG headline tag will probably be the headline of your content.

Depending on the kind of press you’re publishing — image, movie, infographic, or just written text — you might choose a need for other OG labels as well to further change the OG that appears on your public networking feed once you publish you. Here are a few of them:

  • “og:image:width” — This OG tag is stacked within the image tag, helping you to determine the particular size of your function image in your public networking publish.
  • “og:image:height” — This tag is stacked within the image tag, helping you to determine the particular size of your function image. We’ll talk more about suggested image dimensions for each online community in the next area.
  • “og:article” — This tag lets the online community know your website is a piece of writing, and there are several other labels you can nest inside this one to further enhance this content in your public networking publish.
  • “og:article:author” — This tag is stacked within this content tag, helping you to enhance the writer (or the byline) informed in your public networking publish.
  • “og:audio” — This tag allows you to enhance and explain a usable audio file in your public networking publish.
  • “og:video” — This tag allows you to enhance and explain a usable movie in your public networking publish.
  • “og:video:series” — This tag is stacked within it clip tag, helping you to enhance and determine videos clip sequence if your movie belongs to a bigger movie campaign.

The list goes on for the OG tag groups available to you. Blog, game, city, book, organization, hotel, and country are all types of OG labels you can use to personalize your Facebook or myspace, Tweets, and LinkedIn content best signify the details you’re serving to your audience.

Good news for HubSpot and WordPress users: If you use HubSpot for blogging, your public networking sites will take in the presented image instantly — just make sure you designate a presented image in each of your weblog website articles. (Pro tip: Try uploading your presented images to the COS as at least 610 p wide, which ends up looking better on Facebook or myspace, Tweets, and LinkedIn. Although LinkedIn’s photo measurements ask for a little image, the COS should re-size it instantly.)

If you use WordPress, you’ll need to install this plugin or one like it, but then you’ll be set to go.

Ultimately, this informative content is for you if you don’t use a cms (CMS), as you’ll need to do it personally for each web page on your website. We’ll show you step-by-step instructions for how to personally improve images for public publishing on the top three public networking sites for discussing content: Facebook or myspace, LinkedIn, and Tweets.

Facebook Start Graph

To make sure Facebook or myspace draws the right image from your short content into your Facebook or myspace content, you’ll need to first improve the image dimension for Facebook or myspace and then add the appropriate OG labels to your website.

Optimizing the Image Size for Facebook or myspace Start Graph

Required: Facebook or myspace needs you to use an image that’s at least 200 x 200 p.

Suggested: Although 200 x 200 is the very least, Facebook or myspace suggests using an image that’s at least 600 x 314 p. For the best show on high-resolution devices, the organization suggests choosing an image that’s at least 1200 x 630 p.

If the image has a compact footprint compared to 600 x 314 p, it’ll still show in your website, but appear as a thumbnail-sized image. So, if your images carry a lot of important detail that would be lost in such a little frame, it’s best to set your OG image labels to 1200 x 630.

Adding the Start Chart Tags

If your website is fixed and you don’t use a CMS like HubSpot, you’ll need to personally add OG labels to each of all websites your weblog website articles are on. The labels are meta information, so you need to add them to the top area of the web page your short content is on. (If you don’t manage the rule on your website, you’ll need to ask your web designer for help.)

1. Duplicate the meta information below.

<meta property=“og:image” content=“http://example.com/picture.jpg ” />

<meta property=”og:image:width” content=”1200″ />

<meta property=”og:image:height” content=”630″ />

2. Replace the placeholder written text with your chosen image’s URL.

Next, take away the example image URL above, outlined in red, with the actual URL of the image. Do the same with the size and size numbers, outlined in green, changing them with the appropriate measurements of the image. Keep in mind Facebook’s image dimension specifications.

3. Duplicate the causing rule little into the HTML go area of your website.

Once you’ve completed the rule in phase # 1 with your own content’s image URL and measurements, open the source rule (often denoted with this icon: “<>“) and insert it into the top of the page’s HTML.

4. Enter previously distributed websites into Facebook’s Sharing Debugger.

(Don’t worry about this phase if the website you’re working on has never been released before.)

If you’ve previously released this website without labels, or if you publish the web page and then realize you messed the labels up and need to adjust them, you’ll need to run the URL through Facebook’s debugger once you make any changes. This is because Facebook or myspace caches its distributed websites — so if you don’t refresh the cache, the thumbnail won’t be corrected.

That’s it! Now, when you publish a web weblink to your content to Facebook or myspace, the Start Chart Method will read the OG:image tag and show the image you point it to. (Learn more about OG labels for titles, descriptions, and more on the Facebook or myspace dev weblog.)

LinkedIn Start Graph

Like Facebook or myspace, LinkedIn also uses the graph protocol. So, when you discuss a web weblink with your LinkedIn program, LinkedIn scrapes this content for a headline, images, and a URL, and then uses that details to fill our your LinkedIn publish. (While they don’t explicitly say they scrape for a meta details, their algorithm does take this in as well.) Here’s an example of a LinkedIn publish by HubSpot with a meta details shown underneath the web page title:

To make sure LinkedIn draws the right image from your website to use as a thumbnail, you’ll need to improve that image’s dimension and then add the appropriate OG labels to your website, much in the same way as you did for Facebook or myspace.

Optimizing the Image Size for LinkedIn Start Graph

Required: LinkedIn needs thumbnail images to be at least 80 x 150 p but no greater than 80 x 110. If the image doesn’t meet these specifications, LinkedIn will instantly take in an different image on your website that fits the right measurements.

Recommended: LinkedIn’s discussing module has the ability to enhance wide, rectangle-shaped images, which can increase your post’s clickthrough rate over a 80 x 150 thumbnail. To discuss an image like this, the organization suggests using an image that is 1200 x 627, and as near to a 1:91:1 aspect ratio as you can (i.e. rectangle-shaped, rather than square).

Adding the Start Chart Tags

Just like on Facebook or myspace, if your website is fixed and you don’t use a cms (CMS) like HubSpot, you’ll need to personally add OG labels to each of all websites your weblog website articles are on. The labels are meta information, so you need to add them to the top area of the web page your short content is on. (Again, if you don’t have control over the rule on your website, you’ll need to ask your web designer for help.)

1. Duplicate the meta information below.

<meta property=“og:image” content=“http://example.com/picture.jpg ” />

<meta property=”og:image:width” content=”1200″ />

<meta property=”og:image:height” content=”627″ />

2. Replace the placeholder written text with your chosen image’s URL.

Next, take away the example image URL above, outlined in red, with the actual URL of the image. Do the same with the size and size numbers, outlined in green, changing them with the appropriate measurements of the image. Keep in mind Facebook’s image dimension specifications.

3. Duplicate the causing rule little into the HTML go area of your website.

Once you’ve completed the rule in phase # 1 with your own content’s image URL and measurements, open the source rule (often denoted with this icon: “<>“) and insert it into the top of the page’s HTML.

That’s it! Now, when you publish a web weblink to your content to LinkedIn, the Start Chart Method will read the OG:image tag and show the image you point it to.

Important Note If You Plan to Post to Both Facebook or myspace & LinkedIn

You might notice there’s a conflict in the needed image dimensions if you’re improving your website for thumbnail images: LinkedIn needs your presented image be no greater than 180 x 110 p, while Facebook or myspace needs the image be no smaller scaled compared to 200 x 200 p.

While you could technically dimension your presented image as near to 180 x 110 p as possible without going over, that would improve for LinkedIn while becoming a little image on Facebook or myspace. Remember, although Facebook or myspace needs an image dimension 200 x 200 p or bigger, they recommend you don’t go smaller scaled compared to 600 x 314 p so the image in the publish is large.

Instead, according to web designer Jay Holtslander, contain two OG labels for the same image in two difference dimensions in the top area of your website using this rule (and you’d substitute the rule in red with the URLs of your differently scaled images):

<meta property=”og:image” content=”image-180×110.jpg ” /> <!– 180×110 Image for Linkedin –>

<meta property=”og:image:width” content=”180″ />

<meta property=”og:image:height” content=”110″ />

<meta property=”og:image” content=”image-600×315.jpg ” /> <!– 600×315 Image for Facebook or myspace –>

<meta property=”og:image:width” content=”600″ />

<meta property=”og:image:height” content=”314″ />

Twitter Start Graph

Twitter uses a program just like Start Chart labels called Tweets Credit cards labels. (You need to have Tweets Credit cards already set up in order to use Tweets Credit cards labels.)

If you already have OG labels set up on your website, the folks at Tweets made it pretty easy for you to generate a Tweets Credit cards without duplicating your labels and information. According to Twitter’s dev weblog, “When the Tweets card processor looks for labels on your website, it first checks for the Tweets residence, and if not present, falls back to the supported Start Chart residence. This allows for both to be defined online independently, and minimizes the amount of duplicate markup needed to explain you and experience.”

But Tweets Credit cards look pretty just like weblink content on Facebook or myspace and LinkedIn — it draws the headline, an image, the URL, and a short details.

To set up Tweets Credit cards labels, you’ll need to improve the image dimension and then add the appropriate Tweets Credit cards labels to your website.

Optimizing the Image Size for Tweets Start Graph

Required: Tweets needs the image to be no smaller scaled compared to 144 x 144 p and less than 1 MB in quality. The online community also says it’ll instantly re-size images greater than 4096 x 4096 p.

Recommended: Like LinkedIn, Tweets Credit cards support large images as well, not just the square-shaped thumbnail. To improve your images for this open graph, format the image you want presented in your tweet to be no smaller scaled compared to 300 x 157.

Adding the Tweets Credit cards Tags

Just like on Facebook or myspace and LinkedIn, if your website is fixed and you don’t use a Content Control System (CMS) like HubSpot, you’ll need to personally add Tweets Credit cards labels to each of all websites your weblog website articles are on. Like the other public networks’ labels, Twitter’s labels are meta information, so you need to add them to the top area of the web page your short content is on. (Your designer can help with this if you don’t have access to your website’s rule.)

Step 1: Duplicate this tag:

<meta name=”twitter:image” content=” http://example.com/picture.jpg”>

Step 2: Replace the example image URL, outlined in red, with your chosen image’s URL.

Step 3: Duplicate the causing rule little into the HTML go area of your website.

That’s it! Now, when you publish a web weblink to your content to Tweets, it’ll properly show your desired image.

Leave a Reply

Your email address will not be published. Required fields are marked *