Tag Archive for: tutorial

A picture speaks a thousand words.

An image of SEO must speak. In my last three works, I made different consultancies for customers and I detected the same issue: the images.

How is this part important, images are important as relevant keywords. Nowadays we use more images and media to improve our websites. So this kind of content needs to be review and optimize.

The images are always forgotten. And Google likes images and users also.

 

Let’s start with a list of best practices to keep in mind.

3 Basics Tips SEO Images:

 

1. Name of images.

When we create a website we take care of the name of images. We always find projects with Incredibles names or numbers to images. I found images like DSC30303 or Screenshot22.01.2009 or Prueba. The name is so important because Google read the archive and the name of our image.
The images need to BE descriptive. Yes Descriptive, it’s mean the name must represent what we see.
It’s important to add relevant keywords also. If we review analytics we could see how customers search us and use the image naming process.

As Google says the Filename give clues about what is the image.

Example if the image is a green car:

Green car on the road

<img src=”https://exampleweb.com/images/green-car.jpg”>

 

Also if you have a brand you could ad your brand on the image like green-car-ebavs.jpg.

2. File size

I discovered 3GB for a Background image or images of 1Gb.

Bear in mind:

  • Consumers do not like to wait unless on mobile.
  • Google uses page load time as a factor in their algorithm. And now with the new Core Vitals, this is so important.

So review the file sizes, compress the images and optimize them. There are a lot of articles to do it:

 

Image optimization

Yoast SEO images optimization

The formats are relevant also use :

  • GIF, lower quality than JPEGS used for icons, transparency, animations.

    Green car on the road

    Gif – 317Kb

  • PNG, the alternative to GIFS, allow transparency more colours. But the sizes are bigger than JPG. PNG is better used on flat and colours images.

    Green car on the road

    PNG – 606kb

  • JPG: able to compress images considerably, could have nice quality and low file size. Not transparency is allowed.
    Green car on the road

    Jpg – 290Kb

     

  • And more with Guidelines Google images

3. Alt attribute
The alt attribute (text that describes an image) is the alternative text is used to:- highlight the identity of an image

  • appears when browsers have problems rendering
  • read by screen readers to help visually issues: improves accessibility for people not see images on the website
  • read by search engines
  • Google uses the alt text on the algorithm to understand the content of the website

That’s a normal code that I discovered:

<img src=”https://exampleweb.com/images/green-car.jpg”>

That’s a good code:

<img src=https://exampleweb.com/images/green-car.jpg alt=”A green car on the road”>

The alt attribute is also a descriptive text for the image, normally we use 8 words.

 

These are 3 basics tips to follow on your sites. Are very easy and common sense tips.

 

If you want to know more about SEO, we do Workshops and we are experts on it.

Git Workflow or GitFlow it’s a development model to work with code and git. We use extended in our code to make conflicts between developers less than possible. The reality is that Git Workflow is branch management for organizing code and developers. There are many ways you can manage branches, we only use 2 or 3 at least, but you can combine them (we do) into more possibilities.

 

If you don’t know about Git or Branch you can read our previous post:

 

Basic Workflow

Actually, a lot of developers works alone and git give them the security of know that their code is well organized in a lot of commits. If you are a little bit organized you will do push for every functionality, for example, add a delete button to code, and you know every commit is a function. Sometimes no, simply you are developing and every time you remember to do a commit. This other way too, because you are in fast mode and can’t stop to think some details. Anyway, imagine that you need help and someone comes to help with development tasks. You give them access to git and he/she clone code and begin the work. The most normal is both developers work in the same branch, master.

Let we see what happens. Two developers, Barbara and Victor. One repository with one branch. Victor begins to work:

Then create a basic PHP with some HTML inside:

(yes, I forgot one p tag)

Now I add a file and commit push:

Then Barbara comes to work and Victor give access to her (we use the same user in different folders, that is similar):

Yeah! we have now the same repo in two folders, it’s like Victor and Barbara works now. Then, Barbara begins to develop and add a new line to index.php:

She commits and pushes:

And like a good coworker, she tells to Victor and he pulls changes:

Then Victor review the changes editing index.php. Victor sees p tag mistake and decide to change the line and something else:

He commits and pushes:

And Barbara, see the same mistake and make similar changes:

And …

.. Fail. What the hell!? both of them changes the same lines and Barbara, second to push have a real problem. But isn’t the big problem, she tries to pull:

Git found a big conflict because changed lines are the same in two repositories. And Barbara decides to open index.php to see what happened:

Oh!! it’s terrible, a lot of awful code is new in the file. Ok, let’s see what we can do. Git divides conflicts into two areas, this is the area corresponding to code in our own machine repository:

And the other part is corresponding to the server repository:

Now Barbara needs to clean code deciding what part is correct and what isn’t (you can use some automatic tools, but that isn’t the purpose of this article). Finally, Barbara cleans the code:

And now we need to commit and push again:

The difficulty isn’t to modify 2 lines and decide what line is correct. Imagine one file with thousands of code lines and three or four developers. Or Worst, ten files with thousands of modifying code. The poor guy that gets merge problems has all loose day looking for the code problems.

 

Git Workflows Type

Now we saw the big problem working with the same repository and one branch. We discuss now different ways to avoid problems with different types of workflows.

Feature Branch Workflow

After the hell of Basic Workflow or Centralized Workflow, it’s easy to think to leave this kind of work. It’s a hell, a real hell. I participate in a 4 members team, a lot of years ago, working with Centralized Workflow and was really hell. Entire weeks loses merging code, it was a nightmare.

All of my problems could have been solved used this simple way of work. Making single Branch for every feature. The idea is simple, you make a new branch for every feature you need to implement.

Let’s explain and continue the Barbara and Victor history :)

After Victor review the code decides to move to Feature Branch Workflow then he decides to create two branches, one for add code and another for add HTML:

With git checkout -b new branch can create a new branch and change to them, the important is -b option that means “create a new branch. Now we are in feature-HTML and we need to add some HTML file to our index.php, Barbara begins their work:

We remove the commented PHP line and add a new one at the end. Now it’s time to commit and push.

Now time for Victor, he needs to add some code, first we change the branch and begin codification:

We have actually 3 branches with different codes and need this code altogether. Like Victor is a master developer, he controls now the merge ad code, first integrates the feature-code branch:

See the process, first change branch to master: git checkout master
Then pull code from the server, we need to have the latest code: git pull origin master
Then pull feature-code branch: git pull origin feature-code
Now we have merged code, we could do the same with git merge feature-code
After code merged we need to push: git push origin master

Now we can do the same process with the other branch:

It’s the same error as before, but here resides the difference: Victor, in this case, are Team Lead, knows what happens with code and how to resolve conflicts, indifferent to Barbara that just arrives at the project. Too we introduce new command: git mergetool

Maybe you haven’t configured the repository with any tool, but your system won’t let you alone:

I’m assuming that open diff is there and just hitting enter:

opendiff tool

This looks better than edit the directly file in the editor. The tool will be different depending on your Operating System, my case is Mac OS X then this is the default tool. Just arrange some lines and finish.

And:

Yes, we have completed our Feature Branch Workflow. If you use Bitbucket web page or Github web page for make merges is more easy and intuitive. I will talk about merge with bitbucket or GitHub in another post.

User Branch Workflow

User Branch development isn’t recommended for any. Just is to create a branch for every person in your team and all of them do merges to master. It’s also highly recommended to merge from the master te person branch. I worked before with this system in a big company with a little crazy Lead Developer. It’s not a bad idea if you are small teams (two persons), but with big teams it’s insane.

No examples here, just wanted to comment on the option.

GitFlow

GitFlow borns with nvie post.

He explains a way to organize branches to work. It’s easy, it’s organized, it’s cool, it’s fantastic, terrific! Nvie divides work into two main branches and supporting branches. Let’s see how it works.

Main Branches

After you init your repository and add some code you need to add one branch called to develop. You will have two main branches:

  • master: master branch will be the production branch. The code here is the same as will be on the production server. Every time you merge code from developing to here means you need to upload code (or push-pull) to production.
  • develop: this is the main branch where code comes to test before production. No one uses this branch, the code only come from merges.

It’s easy to understand. The Master branch is production, develop is where we test code. When you think the code is correct in development it’s time to merge to master and upload to production.

Supporting Branches

Are three types of auxiliary branches:

  • Feature Branches: Every time you need to make a new feature you can create a feature branch. You can name wherever you want, but in EBAVS/ we name with feature-* convention:

Is important to use –no-ff option. This means no fast forward. Fast Forward loses history when you do merge. Is important to maintain history.

  • Releases Branches: Releases Branches is where features go, you can prepare here a production release. They born in develop branch and You can name with a minor or revision number. After you finish release, you can merge with the master branch directly, create a tag with revision, merge release into develop and finally remove the release branch:

  • Hotfix Branches: Hotfix branches are branches that born from the master branch because code needs to fix urgently. After fixing the code you can merge again to master and develop. Naming is with revision number:

 

Finally

This tool is powerful, you can use it to organize your code or to ensure that you can develop in a quick and safe way. But if you use it in a bad way could convert into pain. GitFlow it’s a good workflow we can use actually. Maybe are others, but this one fits perfectly in our day to day coding.

In EBAVS/ we had to work with BETAHAUS creating intern Workshops (SEO and WordPress) for our beloved coworkers. The name “Members teach members”. This movement based on the community of Betahaus to helped all members and taught about what we are as experts.

We just did WORDPRESS Workshop with Víctor, and now it’s my turn to create a BASIC SEO WORKSHOP.

 

At first, we thought to do two Workshops, one of basic level, and the other for experts. Then we recognized that the level at Betahaus was more basic than expert, so we only do a session. We had only 2 hours and a half to do a quick and basic SEO Workshop, so, we decided to talk about basic concepts. We prepared a presentation shared with all the students and shared it at the final Workshop.

The SEO Workshop was:

  • SEM: definition of terms
  • Search Engines: how many search engines are, Google the king
  • SERPS: what is a SERP
  • SEO: definition SEO
  • PPC: definition PPC
  • PPC vs SEO
  • Why SEO
  • Google
  • Evolution SEO: from the beginning to natural searches
  • How to do SEO: analysis, objectives, benchmarks, keyword research…
  • OnPage: what is and how to do it, titles, meta descriptions, WPO, CSS, robots, sitemaps, google analytics, images – see our article of 3 Basic tips on image SEO
  • OffPage: what is and how to do it
  • Strategy SEO: what is a strategy SEO, content redaction
  • Tools SEO: reviewing tools for manage SEO: WebMasterTools, Google Keyword Tool
  • Case Study: activities with the coworkers to review their actions and the site.

See some of our charts of the workshop:
PPC Versus SEO
ppc-vs-seo-ebavs

What is a SERP?
que-es-una-serp-workshop-ebavs

The result was amazing, about 30 members of Betahaus were at the workshop. We also uploaded a SlideShare presentation:
Ebavs SEO – workshop de Barbara Casas

See us on Twitter our SEO Workshop: