#whichlight

How do video embeds impact SEO? Search engines can’t dig into a video embed to see what it’s about. The updated Cards account for this. You can see the difference here:

Embeds

YouTube Embed

Card Embed

Jon Hopkins - "Open Eye Signal" (Official Music Video)

SUBSCRIBE to Pitchfork.tv: http://bit.ly/MgXoZp MORE Music Videos: http://bit.ly/J27abt A skateboarding odyssey in the desert. Artist: Jon Hopkins Track: Open Eye Signal Album: Immunity Label: Domino Records Skateboarder: Chris Chann Director: Aoife McArdle Production company: Colonel Blimp Executive producer & producer at Colonel Blimp: Tamsin Glasson Open Eye Signal is from Immunity out June 3/4 on Domino: http://smarturl.it/immunity-itunes http://dominorecordco.com/immunity.

Embed Code

YouTube Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q04ILDXe3QE" frameborder="0"></iframe>

Card Embed Code

<blockquote class="embedly-card" data-card-key="###" data-card-chrome="0" data-card-align="left"&gt<h4> <a href="https://www.youtube.com/watch?v=Q04ILDXe3QE"> Jon Hopkins - "Open Eye Signal" (Official Music Video) </a></h4><p>SUBSCRIBE to Pitchfork.tv: http://bit.ly/MgXoZp MORE Music Videos: http://bit.ly/J27abt A skateboarding odyssey in the desert. Artist: Jon Hopkins Track: Open Eye Signal Album: Immunity Label: Domino Records Skateboarder: Chris Chann Director: Aoife McArdle Production company: Colonel Blimp Executive producer & producer at Colonel Blimp: Tamsin Glasson Open Eye Signal is from Immunity out June 3/4 on Domino: http://smarturl.it/immunity-itunes http://dominorecordco.com/immunity.</p> </blockquote> <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script;

When you sign in to make a Card, or use the Embedly Wordpress plugin, all videos will be embedded as Cards with the "SEO" option enabled. They will include information readable by search engines to improve findability of your posts. A search engine parses the additional text in the blockquote to index what is posted there. Note that the text is replaced by the embed when it loads. For your readers that information is not important, it is the video that is the focus. This is a solution that works great for reader experience and search engines. Now instead of it just being a YouTube iframe, it is clear this is a Jon Hopkins video.

While social is gaining relevance to drive traffic, search is still an essential component. This small change helps make your embeds SEO friendly. If you're on Wordpress, easily include Cards in your posts with the Embedly Wordpress Plugin.

Andy and I will be at South By Southwest Interactive this year. Over the last year we've thrown two hackathon-conferences in the news & media space, and released several products making it easier to share content with Cards and measure attention with Analytics. I'd love to meet up and jam on digital storytelling, and share what's next on the roadmap. Andy builds the technology that powers the API, and can talk to you about that.

If you're headed as well and want to meet up, definitely swing by our core conversation session with Matt Carroll of the MIT Media Lab: "The Hunger for Atomizing News". 

The atomization of media is gaining momentum in newsrooms, from building viral content to unravelling complex news stories. Atomizing breaks down stories into simpler blocks of ideas to discuss, remix, and share. The simplest block being a post with a single opinion, an image, or a video. Such an approach to complex stories and topics in media is quickly growing a wider audience. To be a relevant media company means to understand how to reframe content atomically- to make it easier to share, repost, and append to other articles. This is by no means an easy endeavor, but provides for a range of opportunities. Circa is leading in this space, and newsrooms are responding. We'll survey a few companies and how they are leveraging news atomization. Reddit is built on the earliest conception of atomization- the link. We'll dive into Reddit's media data, and how it can be used to understand Redditor's behaviors and preferences towards media across subreddits.

The Hunger for Atomizing News, 3/15 11am-12pm, 208 Barton Springs Rd.

2014 was a pretty busy year for Embedly, and it marked an important step. The company expanded from being developer focused to embracing a wider audience by introducing products specifically for bloggers and journalists. In addition, analytics were built to better understand reader behavior around embeds. Here are a few highlights over the past year:

Embedly welcomed three new people to the team. Dave brought on his sales skills, Laura her marketing chops, and Steph her design expertise.

Cards were released in January, providing embeds for anything. They went from ~700K impressions in January to 36M in November. 

In January and February, Embedders traveled to Berlin to start building relationships with media and tech companies in Europe. We spoke at a BerlinJS, sponsored Hack4Good, and threw a meetup at Istanbul Hackerspace.

Embedly produced Hacking Journalism, partnering with the MIT Media Lab. This event brought together journalists and developers to innovate in news tech.

In addition to producing the hackathon, Embedly participated in a few other news tech events, including a Hacks/Hackers Boston talk and Media Hack Day in Berlin.

in June, Embedly Analytics were released to allow anyone to measure analytics for video embeds. 

In August, Bale was released to showcase PlayerJS and Analytics.

In September, Embedly ran an APIs for Journalism workshop at the Online News Association.

December brought a revamped Embedly, with beautiful illustrations and animations. 

Embedly contributed insights into journalism in 2015. 

We're excited to share our latest product to help you build a more engaging site: Embedly Analytics.  For this release, we teamed up with Reddit to take a look at how videos are watched on their site. See some of the fun insights we uncovered on the Reddit blog.

This post will give you a quick intro on our analytics tools.

When you post a YouTube video on your site, you really don't know how many people actually hit play and how far they watch.

With Embedly Analytics, you can now see these stats.  Analytics are measured for any of the supported providers, including Vine, SoundCloud, Instagram, and Vimeo when the embed is served from the Embedly API.  

After logging in, an in-embed overlay appears over posted embeds on your site.  Click it to see the Embedly Analytics. 

Here you can find the realtime and weekly stats for the embed.  The stats take into account the funnel of visits (when the page loads), hovers, and plays.  The weekly stats helps identify recent bursts. Hover over the graph to see the specific funnel stats over time.

Furthermore, see the distribution of views over the timeline of the video on the heatmap.  This is fairly powerful in seeing what people are actually watching.  Perhaps no one makes it to the funny moment 25 seconds in, and miss the point of the post. You should highlight to start there. Maybe you notice a burst of activity in the middle- that could be the perfect gif opportunity. 

You can pull up the dashboard view from there, or see it in App.  This gives you an overview of all of your embedded media analytics. You can use this to find out which videos are played most of the way through, and which ones are abandoned immediately.

It's not just about finding your most popular posts- it's finding out what is most engaging.  The same embed posted on different pages can have different results based on the target audience.  If a video has a low play count, people are not enticed to actually click play- find a better title.  If people abandon the video immediately, then it isn't actually delivering anything substantial. Perhaps it will be more successful with a different audience. Explore these relationships with the funnel and duration analytics for embedded media. 

Embedly Analytics are powerful on popular media sites, and sites with lots of user generated content. If your site has a custom video player, Embedly can measure these analytics if there is an API for the media player following the playerjs spec.  You can get in touch with us about this as well. 

In this post I'll outline a few simple steps to integrate Cards and the Button in your site or CMS.  This is geared towards users who are comfortable editing JavaScript.  If you are unfamiliar with HTML and JavaScript, you can find the basic instructions to include the Button and Cards on your page, but this delves a bit deeper on what the Embedly platform.js script provides.

This tutorial will be helpful if you want to add embed support to your site or CMS for either including media in your posts, or allowing readers to embed your posts.  One of the advantages of using Embedly Cards and Button is that they are free, and you don't have to maintain them.

1. Add this script to your page, preferably at the end before the closing body tag </body>.

This gives you access to rendering Cards and opening up the Embed tool via the Button. 

2. Include a Card

After platform.js is on the page, if you add the "embedly-card" class to a link, it becomes a card. Here is an example with and without the "embedly-card" class. 

Rendered it looks like this. The first is a link, the second becomes a card.

Man Walks Nearly 3000 Miles Through China. His Before & After Photos Will Shock You. Man Walks Nearly 3000 Miles Through China. His Before & After Photos Will Shock You.

As with any class attribute, you can append it to the link by hand, or programmatically in your CMS with jQuery or JavaScript for example.  This makes it easier to include an embed form input for links to convert them to embeds. 

You can create Cards for any public link, such as Instagram, Vine, Youtube, and Vimeo media as well as your own blog posts.  You can test links here and see our list of providers.

3. Include the Button

To include the button add a link with an "embedly-button" class as follows:

You can include this button next to your social buttons to allow readers to embed specific posts. If you want to customize the button, you can find more information on button customization here, and an example of an integration here.

That's it!

Embedly will be presenting on the data and design behind Cards at tomorrow's Hacks/Hackers held at the Boston Globe.  

I'll describe the API and its applications in journalism, the process of building Cards, and finally some of the recent analytics we've been working on for Cards and media embeds. 

Product Cards now include an "Add to Cart" button.  You can see it live in this article.

Actions are an important aspect of the Cards UX.  They offer readers ways to further engage with the content- like clicking through to the original content or sharing. For Product Cards, the 'Add to Cart' button is a natural addition.

In January, Embedly released the Embed Button to offer bloggers and publishers easy embedding of their posts. If you add the Embed Button to your blog, your posts can be embedded anywhere that supports HTML and JavaScript, including Wordpress, Blogger, and Tumblr. This makes it easier for readers to share previews to your content on their own sites.

To include the button, add a JavaScript and HTML snippet to your site. Here is an example specific to Tumblr. You can see the default Embed Button here on the Embedly blog, right in the sidebar.

In this example, I add a custom Embed Button to a Tumblr blog. It is for the recent default theme, where the share buttons are displayed upon hovering over the post. You can see the Embed Button to the left of the share buttons below.

While the default Embed Button would work, the custom button integrates better with the theme. I'm following the steps outlined in this custom button page.

First, add the JavaScript snippet for the modal, platform.js.

Second, figure out where to add the button. If it is not the right spot, you can always adjust it later. I inspect the source of my Tumblr theme to find where the share buttons are in a post. (Click the image to enlarge)

In my case, the share buttons are under the "post-controls" section, so that is where I add the Embed Button. I'm using the 15x16 black button here. In the Tumblr theme editor, I add the HTML for the button snippet. 

There are a few things to note here:

The Button is under an a tag with an "embed-button" class. If you were to use "embedly-button" as the class, it would automatically become the default blue Embed Button. Since I don't want the default button, I change the class away from "embedly-button".

The img src links directly to the15x16 black button on the Embed Button on the custom page. That's okay, it is served on a CDN so it's fast.  

Finally, the modal code is included in the anchor tag onclick attribute with the permalink of the post. This way each post gets a button that opens up a modal for that post. '{Permalink}' is a specific syntax to get the permalink in a Tumblr theme.

I include some CSS to adjust the position of the Embed Button. It already inherits the styles from the post-controls section (like the hover styling).

.embedly-control{ top: -2px; left: 3px; }

I save the theme, and it's done! Now there is a custom Embed Button that fits with my theme. 

Now when the Embed Button is clicked, a modal pops up for that post with the associated Card for embedding. 

See an example post here.