social media

Optimizing Images in WordPress to Improve Performance and SEO

Posted on Updated on

At 11:20am on 4/29/2018, I attended Optimizing Images in WordPress to Improve Performance and SEO, Presented by Steve Mortiboy of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building I of North Carolina State University in Raleigh, NC.

Optimizing Images in WordPress to Improve Performance and SEO

This session is really aimed at beginners who want to understand how to leverage images to improve their website. I’m hoping we’ll take a hands-on look at things you should do when adding images and common mistakes to avoid that could negatively impact your site, especially with search engines.

Intended Audience:  Beginners

What we’re supposed to cover:

We need to think about performance, image optimazation, SEO, performance, etc.

Embedding Images

We’re doing this without proper sizes, etc. and we don’t really think about how it might affect performance, or adjust the layout.

Considerations

JPG, PNG, GIF. We cover this material, and its good content

File Size

this is the biggest problem. Taking an image from our phone or other device is huge, 10MB or more. High def is even worse. Before uploading into wordpress, we’ll want to adjust it. The smaller the better, with 100KB or smaller as ideal.

Dimensions

A 600px content area will not need 1000px width content. in Settings, Media you can adjust your content sizes. Your media may not convert to those sizes, even if supposed to. WordPresss does not know the content, it just crops the images as it feels the data tells it. Beware oversized images. Editing an image on the page allows you to set custom sizes

Image Resolution

DPI and PPI only apply to printing. It do affect image size in the file however. There is a myth of 72dpi. we don’t need to do that in our websites.

Images per page. The more images appear on a page, the more you need ot consider file sizes and page load times. Remember your mobile device users. Consider using a gallery or slideshow such as:

  • JetPack Tiles Galleries
  • JetPack Carousel

Do not load the image initially. Load only when requested.

Image Linking

Where should we link an image embedded? Should it load the media file. attachment page, custome URL, or nothing? LInking the media file should be reconsidered. That just loads the image in the browser. Google following that link only sees the file, no information, and the user must push the back button.

Consider instead an attachment page. This is an older forgotten page type. An attachment page is a wordpress page. You can add these theme pages with styles, links, back buttons, exit data, etc. It allows information such as MetaData to provide richer content to our customers in ways such as location and date. It allows us to add Meta tags, SEO, anything you’d like. You may not know you’re even on a page only for a photo. Google will index that page.

Custom URL is useful for custom button creators, etc.  Uploading a button linking to a particular page (such as contact us) allows you to create linkable, custom pages which can also be indexed.

An item with no reason to click on an image, you should just select none.

Image ownership

This is a big issue over the years. Big companies are seeking out smaller companies to Quash. Just because you found it doesn’t mean you can use it. There are different types of license. Consider using the Creative Commons Search Tools at: https://search.creativecommons.org

Stock Images

For the love of Pete, don’t do it. They’ve been done to death. Take your own photos, be real and be genuine. It brings nothing to the visitor to be seeing general images.

Optimization

Lossless compression reduces file size without losing quality. Lossy compression reduces file size with possible loss of quality. Your goal is to reduce a web image to 100KB or less. Granted, it always depends on the original image.

  1. Photoshop
  2. GIMP
  3. Imageoptim.com for mac
  4. tinyPNG at tinyPNG.com
  5. jpegmini at jpegmini.com
  6. EWWW image optimizer plugin

RETINA IMAGES

Retina schreens and displays are common.

Consider

  • using plugins, WPRetina 2x
  • using SVG
  • HTML method src=”image-800×600.jpg” width=”400″ height=”300″

Image SEO

1000+ line pages are boring. Images are sticky, they keep us there and easily tell us if we’re in the right place. Keep the visitor on the site, but also keep the visitor finding the site. Make your imagery search-engine friendly.

  1. Image Filename: DSC_005612987 doesn’t tell us anything. Rename your images to something which is helpful for search engines. You cannot rename the file once its uploaded because the images is posted in the server. If you’re using the same file on different pages, upload the same file with a different name. It may look the same, but it will be seen as different by search engines and computers which matter.
  2. Title attribute. Set the title and alt text to the content of the page, not the image. rather than describing the image, link it to the page and make it easier to find the page
  3. Alt text. Required for many governmental website.
  4. attachment page. Add the SEO title, the SEO description
  5. include images in your XML sitemap. AllInOneSEO automatically includes these items in the XML sitemap

Images for social media

Cathcing people’s information is really important, and a good high-quality image can really get you that click-through. Use a plugin to set that image. Create a custom image which is properly sized just for social media. Social media images can be shared and cached. It may only be for 7 days (facebook). Twitter and LinkedIn make it difficult to clear that cache.

Image sizes for social media

  • facebook images 1200px x 630px
  • twitter images 900px x 450px
  • pinterest images 236p x scaled height
  • instagram images 1080px x 1080px

Image Caching and CDN

  • JetPack Photon
  • WP Super Cache
  • W3 Total Cache
  • MaxCDN
  • Amazon CloudFront

Test using Google PageSpeed Insights:  https://developers.google.com/speed/pagespeed/insights

 

 


Steve Mortiboy

Steve Mortiboy is the COO and Service Delivery Manager for Semper Plugins. He leads the team that develops plugins such as All in One SEO Pack. He has been working with WordPress for over 8 years and devotes much of his time to helping people get the most from WordPress. He is also one of the co-organizers of WordCamp Raleigh and the Raleigh WordPress Meetup Group. When not hard at work he’s working on DIY projects at home or off traveling.

Advertisements

Social Media & Learning Engagement in Online Education

Posted on Updated on

At 9:00am On 11/8/16 I attended Social Media & Learning Engagement in Online Education presented by Laura McNeill at the 2016 USCA NDLW Virtual Conference.

Social Media & Learning Engagement in Online Education

This was a really echoey conversation, and the online venue made this very difficult to follow. I had to turn off sound for several portions of the training, but was able to follow the bulk of the conversation. I added the links provided to some of the most echoey portions of the presentation.

As colleges and universities continue to expand online learning opportunities, student engagement, interaction, and participation, as well as the prevention of attrition, will be crucial to the success and growth of such programs. Researchers have observed that the most well planned online and explicitly laid out instructional environment is not enough to sustain learner interest or support engagement. Some studies have suggested increasing student collaboration through a variety of technology tools that simulate to face to face interaction. Social media is one option that shows much potential for positively impacting online learning.

Social Media Explained in Donuts (https://vimeo.com/76290266)
YouTube Video (https://www.youtube.com/watch?v=cMLAEv2dcVE)
Blogging/Podcasting: (https://www.youtube.com/watch?v=pVu9a1IMh1Q)
Twitter: (https://www.youtube.com/watch?v=bgH-XhsUEuU)

As the BYOD (bring your own device) classroom becomes a more prevalent ideation, it will be interesting to see this approach continue.

Attrition in online classes tends to be a major, ongoing issue. Often this can be seen as an issue with the unreadiness of students for online classes. Again, this is a nod to our ELI and EPIC training on campus – well done team!

<h2>Reasons for attrition</h2>Low motivation and poor study habits, combined with confusion about course activities and deadlines, isolation from classmates and instructions, and slow internet connections often cause problems.

<h2>Crucial Collaboration</h2>Students can be less anxious and more connected when a variety of tools allow them to have the F2F interactions they desire. Student who collaborate and share: use more technology, have a better e-learning experience, and practice self-directed learning. In many cases, social media tools are the answer, but how can you integrate this in the classroom?

<h2>Social Media in the classroom</h2><ul><li>Facilitate informal discussion and collaboration<li>reflect on learning<li>enhance instruction with enrichment<li>Keep students engaged in a non-time-sensitive context.

All-in-all I thought this was pretty good, and pointed once again into what we can do for the classroom, but not a lot of good examples shown here.

Using Social Media to Enhance your Teaching Learning and Practice

Video Posted on Updated on

On March 10th 2016, I attended the NCCIA presentation at 9:00pm with Andy McPhee, Senior Acquisitions Editor with F.A. Davis, in RM219 in the 600 building at Rowan Cabarrus Community College in Salisbury, NC.

Tyler Dockery working with social media masters
Materials can be found at: bit.ly/1QGs45o

Using Social Media to Enhance your Teaching Learning and Practice

We would like to focus more on teaching rather than personal use, because we’re mostly familiar with that.
1.2 Billion on facebook, 1 billion on youtube, 150m on snapchat, 70m on pinterest, 232m on twitter. Now those numbers were from 2013.

WHy use social media? Spread infomation, educate students, interact with teachers and business owners, bloggers and community. Gain info and group collaboration. Never lose sight of the fact that you are always open and vulnerable. Keep everything on or above board. By and Large, hackers aren’t interested in us. We are unchallenging, and that’s our best security.

facebook.com/stella.bellman is a resusitation dummy. She is the face of a nursing program. Its a way to interact with students on social media without compromising privacy. Students interact like she’s real.

Main types of social media: Social network, microblogging, etc.

FACEBOOK
It is difficult to do facebook just for business. As soon as you open an account, they require you to add school, etc. Contacts come out of the woodwork. Its so easy to respond to a comment from the wrong accounts. It becomes difficult to keep the two worlds separate. Classmates create a group – a secret group so no one can see – only friend students and then unfriend students at the end of the semester. The profile becomes the problem.

GOOGLE+
Since community is built and small you get some nice stuff.

TWITTER
Its a good source for up to the minute news source and information-giving device. Andy is mainly using IFTTT to flip facebook posts to twitter.

LINKEDIN
Trying to become facebook. Losing some of its mission. Its still a fine way to network and find work. JOBS is a great feature if posting. Its a job networking site and SPAMMERS are coming on to become a connection.

SOCIAL BOOKMARKING with DIGG, REDDIT, STUMBLEUPON
all collect URL and show based on your interests. It will populate with information that are shared or digged most.

MEDIA SHARING
vimeo, youtube, instagram, Vine
THere are a million of these. Periscope for example is new, and there will be millions within the next few years.

TRAINING
Student project: Watch one, Do one, Teach one. It engages students in the process, and builds a community. They know they’re being recorded and the know they want to do it right. How do you know a video is reliable? The info is out there, but is it right? do you know anything about the host? What are your parameters and understanding.

PINTEREST
Pinterest is an oddball. You’re sharing only images – they link in the background, but goes well for fashion, shoes, jewelry, and recipe. Its mostly pushing for women, but that isn’t the only audience. Andy uses it for books. He gets lots of re-pins. Does it help the business? it is unknown. How might it be used in the classroom? For graphic design and social media statistics, it makes a nice research site available for students.

BLOGS AND REVIEWS
Wordpress, Blogger, Goodreads. Ongoing copywriting, ideas, representation, explanation. Getting students started is more than half the job.

Seven Basic Learning Styles

Learners come in 7 basics styles: Visual, Aural, Verbal, Physical, Logical, Social, Solitary. Visual: items in space. Aural: sound and music. Verbal: speech and writing. Physical: using body, hands, sense of touch. Logical: logic, reasoning, systems. Social: learning in groups or with people. Solitary: Prefering to work alone or self-study.

Real interactivity should look to children’s e-book! Most publishing companiestake a book and retrofit to a digital platform. Consider starting with a chapters summary: what’s the final takeaway. Students should then be able to wind their way through the learning pattern to assemble the material. Test them on the summary. Retrofitting does not solve this issue. Children’s books do this, because content is so limited.

Areas of the brain are involved in this. look to Occipital Lobe for graphic designers. Parietal lobe, frontal lobe, temporal lobe, cerebellum. [see slide for more information above at bit.ly address] In addition to this, there are learning styles

Using Social Media to Enhance Your Teaching, Learning, and Practice

Visual Learners
I learn by seeing.
YouTube
Vimeo
Pinterest
Vine

Aural Learners
I listen and learn
podcast
audio backed PPT
Youtube
VImeo

Social Learners
I enjoy learning in groups.
Google Docs or other simultanous-editing apps
Google+
Facebook
Twitter
Chat rooms
Synchronous or asynchronous discussion boards
Vine

Physical Learners
I learn by doing
Difficult on social media
demonstrate for video outlet

Logical Learners
I’m thankful for technology
scripting for youtube video (sequencing)
blogs
pinterest (grouping)

Verbal Learners
I enjoy learning in groups
google docs or simultaneous editing apps
google+
facebook
twitter
chat rooms
synchronous or synchronus discussion baords
vine
blogs and wiki

SOlitary Learners
I learn best on my own
blog
facebook
google+
twitter
vine

Working with Social Media
Plan, Produce, Give Back. Plan from the very beginning. What do you want SM to do for you? You literally can’t be in everything. Choose your battles.

  • Communicate with colleagues
  • Stay current
  • Promote self in professional community

Choose your outlets, and get everyone on board. Build Follow/Friend lists. Do this slowly. Search for the content that you like. Follow them. Set your accounts to follow an RT of every follower. Check outlets regularly to increase lists. Build your community. You cannot set this up to run on its own.

Produce with Social Media
Write and Share your knowledge. You are teachers, provide the content, but don’t get into arguments. Communicate, Listen and respond. Experiment

Give Back
Don’t just read, post
Help, don’t push
Follow the “rules”

11 Rules of Social Media Etiquette

  • Give more than you receive
  • Don’t be an idle chatterbox
  • Add value
  • Don’t interfere with other’s efforts
  • Remember that cheaters never win
  • Build quality relationships
  • Stop being too aggressive
  • Respect the community
  • Listen to others
  • Be accountable for your actions
  • Be nice

Words to the Wise

Be Careful With YOur Personal Information. Would you want your boss to see whatever you’re posting? If not, don’t bother writing it. NEVER post or repost student information. Never, Ever post a negative piece about a student, in fact, just post positive materials. No swearing. No criticizing individuals by name or other descriptors. Always professional, courteous, helpful

Above all… Have Fun. Play with it. The more you engage, the more you’ll be able to

What questions do you have?

Adobe Education Exchange: Social Butterfly Badge

Posted on Updated on

Tyler Dockery; Social Butterfly as recognized by AdobeAdobe Education Exchange: Social Media Badge

“As a contributing member of the Adobe Education Exchange, Tyler Dockery has received visible recognition for his level of commitment and participation. Adobe is proud to feature a leaderboard function and badge recognition to members who’s mission is to serve the community of educators by maintaining a high level of activity.”

I am an ongoing contributor to Adobe’s Education Exchange. In an effort to show milestones and fulfillment as part of this community, Adobe provides rewards and achievements in the form of badges. This badge was awarded for creating a new social network within Adobe EDEX.com with a minimum of twenty-five (25) individuals within the Adobe Social Community. It represents your willingness to contribute and collaborate as a member of the Adobe Education Exchange. I have no plan to stop anytime soon. 🙂

Alison.com — Diploma in Social Media Marketing Achieved!

Posted on Updated on

On April 26th, 2015 I achieved the Diploma in Social Media Marketing offered by Alison.com

Alison_CoursewareIntro_318

Alison.com — Diploma in Social Media Marketing Achieved!

This coursework was completed over several weeks. Social media marketing is of increasing importance to most businesses and organizations. This course from ALISON.com covered the concepts and application of social media marketing and equipped completers with the skills to plan and implement a successful social media marketing strategy.

Course topics included the use of email marketing, affiliate marketing, using social media tools such as Twitter, podcasting and blogging, and how to use Facebook to create fan pages and increase traffic to business pages. This material was very similar to the WEB214 (Social Media) course offered at Wake Tech Community College.

GDA Lecture: Dreamweaver, SEO and Social Media

Posted on Updated on

Tyler Dockery Talks on Dreamweaver, SEO & Social Media

Tyler Dockery speaks social media

Tyler Dockery came this month to talk with the GDA about the changing role of graphic and web designers.

Highlighting the workplace’s desire to understand each worker through their actions and feelings, we discussed how current employers can ask to have access to your facebook / twitter social media sites. While in many cases, this is under the guise of looking for gang-related materials or drug/alcohol use– it can also be used to monitor the language you use, the places you frequent, and what you say or have said about previous employers. Best bets: The internet will be around for a long, long time. Keep your social life clean, and ditch or remove any questionable material prior to any interviews.

We discussed seeking out followers and who to follow, as well as what to comment on in social media.

When discussing social media, we also noted that you should set some goals for yourself. Keep active with the big three: Facebook, Twitter, and LinkedIn. Use those channels for your business as well as your networking. Pinterest is making a big wave right now, but how much should a designer really take part in? Tyler states that you can’t spend all your time chasing down the newest social media site on the net and trying to get traction.

Pick a few sites and feel the vibe. Use those items to bolster your work and talk about your business. Social media and SEO go hand in hand, so use those keywords!

We also discussed blogging, and why blogs are so beloved by search engines. We discussed the top places SEO keywords can be used, the importance of link juice, and the real reason that content is truly king on the internet.

We also watched an educational video found below on the importance of twitter:

http://www.dockerydesign.com/video/twittersphere.html

Please watch at your own risk, and watch out for the Fail Whale!