Snippets

How to Control Rich Snippets on Social Media

How to Control Rich Snippets on Social Media

From a brand perspective, social media is the gift of a brand platform, a place to step up to the podium and let your voice ring out. There’s no better place to share content and be heard.

When we share a post on social media—particularly Facebook and LinkedIn—a title and summary of content from that hyperlink are pulled in right along with the link. These are called snippets. Snippets also show up in search engine results when a piece of content is listed (although Google occasionally rebels by replacing them with its own inexplicably bizarre findings).

Are snippets arbitrary? Nope. We can control the message.

Google snippet on Facebook

Snippets aren’t created by accident. They are pulled from the original piece of content, and that’s where you control what gets pulled. With a tiny bit of basic SEO knowledge, you have the ability to control the copy in your snippets. (highlight to tweet)

Why should you care what the snippet says? Because it determines shareability and clicks. Who shares something if the snippet doesn’t appeal to them, or if its missing? Nobody. A compelling snippet also drives readership and, ultimately, impacts conversion.

You may already know you can click on a snippet from within Facebook while creating a post, so why control it at the post level? Because it gives you control over the snippet others are sharing—total control over that message, its power to drive clicks and shares, and when a post is shared without editing options (LinkedIn, for example).

It’s also a brand message opportunity. If you blog for your personal brand, employer, or agency clients, you need to learn this. You can take control. Let’s talk about how to do it.

What Determines a Snippet’s Content

Social media snippets and search engine snippets are created the same way: via the page title and page description, also called meta titles and meta descriptions. In WordPress, you can use a plug-in or the built-in meta fields many themes have (located under the body copy area). Leaving those meta fields blank leaves you vulnerable to whatever the social media platform or search engine chooses to select for the snippet.

These meta tags tell the platform or search engine what to use. Not having these meta tags in place will result in arbitrary text being used, which we don’t want.

How to Customize Rich Snippets

Creating snippets is fairly simple, but not all platforms handle them the same, or even offer the ability to do them.

In WordPress

From within a WordPress dashboard, locate your meta fields. I use Yoast, but you can use any SEO plug-in or the fields provided by your theme.

Copy your page or post title, then paste it into the page title field. Be sure to look at the preview pane (normally right above the fields) to make sure your title isn’t too long. If it is, edit it down as necessary—don’t leave it too long. It will be cut off and replaced with an ellipsis. This can completely alter the meaning of your title, and the description summary can end up a mess of meaningless fragmented sentences.

Next comes the page description. I usually copy the first sentence of my post or a few sentences that are a nice summary of what the post is about, then paste it in the page description field, editing it down as needed to fit the maximum character count.

Once these are both in place, they’ll be published right along with your blog post, appearing in the source code for the page. They don’t appear anywhere on the post itself. They’re invisible to the viewer, until they appear in a snippet somewhere online.

Here’s an example from my own blog of how the above snippet was created for a Facebook post, showing the meta fields used.

SEO example

If you compare this image to the Facebook snippet above, you’ll see how they match. One feeds the other.

(The URL marked with a #2 is the permalink, a key piece of the essential SEO trifecta of permalink, page title, and page description. To learn more about this topic, reserve a copy of my book, now available for pre-order.)

On Guest Blogs (or Other Websites)

Guest blog posts handle snippets based on the platform used. If it’s a site where you upload your own post, such as a syndication site, it’s usually a WordPress platform, handled just like you would your own post. If not, it’s often something you can put in the “comments” or instructions field or via the email in which you first send the post.

If it’s a PR publication, and you are submitting a byline article, I don’t ask. Snippets are their business, because you’re not part of the publication or editorial team. You’re a guest. SEO and snippet requests may fall outside of that media relations area and is a bit delicate.

If I’m creating a guest post and have noticed on their social media page that they don’t manage their snippets, I’ll send a page title and description over with my post, asking them to use it. If they don’t, they don’t—but if they do, my snippets will look great. I use a character counter tool like this one to make sure my snippets don’t exceed the maximum number of characters allowed.

On Free Blogs

If you are writing content for a blog that is not self-hosted (a free blog platform, for example), you cannot do snippets because the functionality of your blog is extremely limited.

On SlideShare

If you are writing content for SlideShare, the site automatically creates a transcript of your content. Take care with the title of the content and what you upload, and be sure to completely fill out the “title” and “description” fields when you upload the file.

It seems that anything with those labels creates meta fields, although a quick look at the source code of a post doesn’t confirm this. (I’m hoping SlideShare has it on their “to-do” list for the near future.) The premium version might be different, but at this time, the free version doesn’t allow snippets to be created manually through obvious SEO meta fields.

Why pass up an opportunity to control how you content gets shared? Make snippet customization a habitual part of your content publishing process.

Convince and Convert: Social Media Strategy and Content Marketing Strategy

Best Web Animations So Far Part 2: How To – Code Snippets and Solutions

Recently we have been discussing the use of web animations in modern website UIs, having covered such popular choices as storytelling animations, subtle motion, typography animations, data animations and others. It is hard to argue that the Web slowly but surely is becoming more vivid, impressive and expressive place that relies on visual impact.

Developers opt in favor of dynamic solutions rather than static ones; and it not only concerns animations but also gifs, walkthroughs, cinemagraph, and videos. The SVG, JS, CSS3, HTML5 and several other progressive languages and techniques have prepared a solid foundation for that, solving plenty of problems and providing an optimal environment for allowing your ideas to come true.

How To Create and Apply Web Animations

Last time we listed 10 different types of web animations that are a popular choice of developers nowadays. Today we are going to show you some simple and straightforward ways of how to reproduce one at home. Of course, our collection is not all-embracing, there are numerous other viable, complex and feature-rich solutions on the wild that can be as helpful and beneficial to you as we have collected. We just want to give you a small boost in this area.

Storytelling Animation/Guiding Animation

Rocket

Rocket is a lightweight JavaScript plugin that adds sprucing up to the moving between two positions of the object. You can assign it to any class you need. The list of effects includes 8 various transitions that you can experience on the official page.

Rocket

Layzr.js

Layzr.js is an excellent solution for adding lazy animations that greatly enrich the general feeling of any website, especially those that feature a fully illustrated surrounding. Nevertheless, it also works with basic objects and components such as timeline charts or tables. Moreover, it does not overload the project.

Layzr.js

Animatron

Animatron is a sophisticated platform that lets you build various types of HTML5 animations from tiny to complex ones. It is well-suited for charging banners and infographics with motion and giving zest to mobile-friendly UIs. What’s more, you do not have to delve into development, the service provides you with an intuitive editor where you can do all the magic.

Animatron

Vivus

Vivus is intended to energize SVG objects, making a dramatic exit for them. It looks especially good in tandem with typography or line style illustrations or graphics. Its primary task is to smoothly draw the object. You can choose among a variety of animations and play with timing function in order to achieve impressive results.

Vivus

Opening Animation

Animsition

Animsition enables you to prettify transitions between pages adding a flash-like touch to a website. The plugin offers an unbelievable amount of effects, including regular ones such as fade-in, fade-out or rotate, and unconventional ones such as flip or overlay.

Animsition

AnimateTransition

AnimateTransition provides you with a list of basic animations that add to shifting between sections or pages a marvelous zest. The list embraces such effects as cover-in, cover-double-in, slide-in, slide-out, bounce-in and much more. Before selecting one, you can take a closer look at all of them.

AnimateTransition

Waiting Animation

Spin Kit

Spin Kit is a tiny plugin that features various flat nifty loading indicators. Each one is executed through CSS and can be a perfect finishing touch to your website. Although the solution works only in browsers that meet the latest standards of W3C, the author offers a simple fallback for IE9, and other outdated versions.

Spin Kit

Loaders and Spinners

This is a huge collection of lightweight progress indicators powered by JavaScript and styled with CSS3 by Tim Holman. Here you will find abstract, type-based, minimalistic, standard and unconventional ones. Choose the most suitable for your project.

Loaders and Spinners

Particle Animation

Starscape Particle Animation

Starscape Particle Animation by Benedikt Wolters looks simply amazing. This fantastic effect is achieved with the help of JS, CSS3, and HTML. Moreover, the artist has created a massive control center that lets you customize an effect and adapt it to your needs.

Starscape Particle Animation

CSS3 Random Particle Animation

CSS3 random particle animation By Jorge Epuñan can be an excellent tool for prettifying backgrounds. It is delicate, subtle and fascinating without being overwhelming. Pairing up LESS and HTML, the developer has managed to achieve such results.

CSS3 Random Particle Animation

Walkthroughs

Precomposed Touch Gestures

Precomposed Touch Gestures by Aaron Wade includes a series of common gestures that are appropriate for creating fantastic walkthroughs for apps created for touch screen devices such as iPad or iPhone. They are QuickTime files that can be customized in any basic video editor or simply in Photoshop.

Precomposed Touch Gestures

Radio Animation + Freebie

Radio Animation + Freebie by Pierre Bravoz includes an animation that represents a tiny interface for iWatch in action. It is an exquisite work with lots of tiny details that you can freely use for your purposes. It can be a perfect ground for building more complicated designs.

Radio Animation

Mouse Animation

jQuery Stars Cursor Animation

jQuery Stars cursor animation leaves a fantastic trace of subtle stars while the mouse is moving around the screen. It is a sterling jQuery-driven plugin that can be implemented into any website design right away. Moreover, you can always change stars to any other object just by updating the image folder.

jQuery Stars Cursor Animation

jQuery Awesome Cursor

jQuery Awesome Cursor enables you to change the standard shape of the cursor into any form presented in FontAwesome. It can be a question mark or a magic wand. However, if you do not find a perfect match in this font family, you can always use the other one. As expected, the solution works only in Chrome and Firefox.

jQuery Awesome Cursor

Type Animation

Blast.js

Blast.js provides you with a more freedom when it comes to manipulating and treating lettering. It allows adding animations, styling characters like never before, searching and analyzing the set more efficiently.

Blast.js

Lettering.js

Lettering.js is a small yet powerful plugin that offers you full control over symbols. It is an ideal way for making headlines or titles look more distinctive and eye-catching. You can add special CSS effects and dynamics.

Lettering.js

Data Animation

Chartist.js

Chartist.js is going to improve data presentation or infographic design with the help of CSS3 and JS, making standard graphs look attention-grabbing, interesting and stylish. The plugin covers various sorts of charts and graphs that are responsive, highly customizable, flexible and vibrant.

Chartist.js

jQuery Chart Plugins

jQuery Chart plugins lets you create simple bar or line charts and pie charts that smoothly adapt to various browser screens and give statistics a more appealing look. Each one is animated to enrich the overall presentation.

jQuery Chart Plugins

Subtle Motion

Dynamics.js

Dynamics.js is all about physics-based animations. Using a small control panel you can recreate the necessary effect for any desired object. It allows animating transition between two points, states or positions, making it look alive and attention-grabbing. The effect can come in handy not only in lavish projects that are based on illustrative approaches but also in simple and plain ones where important items such as CTA buttons need more focus.

Dynamics.js

Iconate

Although Iconate is created specifically to work with icons, it is a powerful instrument that makes a transformation between two icons an impressive event that holds the whole attention. Just choose the starting and final object and type of transformation, the rest will be done by the plugin.

Iconate

Conclusion

Nowadays creating animation or spicing up the UI with some subtle motion or eye-catching effect does not require special skills or a bulk of the experience. Just with a little help from the JS plugins that we have listed above, you can easily come up with something interesting and impressive that gives a page, object or the whole project a dramatic and expressive feel.

What kind of instruments do you use for such tasks? Share with us your experience and solutions.


Onextrapixel – Web Design and Development Online Magazine

33 Open Source Sass-Based CSS Code Snippets

Nothing says experienced frontend developer quite like Sass. From agencies to freelancers, it seems like everyone is talking about Sass/SCSS development. Although it may seem daunting at first, Sass is easy to learn with just a bit of practice and patience.

Once you understand SASS basics your dev workflow will improve dramatically. Beyond the basics you can build simple interfaces and code snippets using pure Sass and even compile your own mixins. This gallery includes 33 free code snippets written with Sass/SCSS code. Feel free to dig through these examples and reverse engineer the syntax. You might be surprised how much you can learn!

YAUI v2

purple ui yahoo gui

SCSS Cucumber

css cucumber open source sass

Microsoft Store Logo

ms microsoft store logo css

Red Pagination

red pagination ui interface

Animated Pokémon

pokemon animated pokeballs design

Light-Up Letters

cities world lightup scss

Vector Lion

open source scss lion

SASS Color Functions

sass color functions open source

Moving 3D Cube

3d cube moving effect animation

3D Text

3d text effect sass

Kaleidoscope

kaleidoscope pure css animation

Dot Matrix Paper

dot matrix paper design

SASS Mixin Buttons

sass buttons gradients mixin

HAML Login

haml sass login form

Pure SCSS Button

pure scss 3d button design

Sig-In Form

css sign in form design

Japanese Characters Table

japanese characters table scss

Striped Border

css striped border effect

CSS Bar Chart

css open source bar chart code

Personal Mark

css personal mark open source

iOS Toggle Mixin

css mixin sass ios toggle

Harsh Mixin

github open source harsh mixin

Sass UI Grid

custom sass css grids

Pure Loader

pure css loader effect

Letterpress Mixin

letterpress mixin bevel effect

Sass RGBa

rgba fallback for css code

Flat Buttons

pure sass code flat buttons effect

Sass Cloud

sass cloud simple code open source

UI Kit

modular uikit free open source

CSS Blur

css blur effect open source

Nexus Motion Blur

nexus motion blur effect

Custom Select Menu

custom select menu sass open source

Photo Albums

photo album gallery effect

Check out these related open source snippets:

36 Open Source Twitter Bootstrap Code Snippets

38 Free Open Source CSS Dropdown Navigation Menus

The post 33 Open Source Sass-Based CSS Code Snippets appeared first on SpyreStudios.


SpyreStudios

Simple jQuery-Free Snippets with JavaScript

You might have noticed lately there’s this whole thing with front-end developers using “pure” JavaScript (i.e JavaScript), rather than third-party libraries like jQuery. Maybe you’ve seen YouMightNotNeedjQuery.com – a snippet list of basic  jQuery-less JavaScript syntax. No doubt, JavaScript “purists” and advocates have been around for a long time, however jQuery is often considered the go-to . . .
Pencil Scoop | Web Design & Development