How to Get Started Building Links for SEO

Posted by KameronJenkins

Search for information about SEO, and you’ll quickly discover three big themes: content, user experience, and links. If you’re just getting started with SEO, that last theme will likely seem a lot more confusing and challenging than the others. That’s because, while content and user experience are under the realm of our control, links aren’t… at least not completely.

Think of this post as a quick-and-dirty version of The Beginner’s Guide to SEO’s chapter on link building. We definitely recommend you read through that as well, but if you’re short on time, this condensed version gives you a quick overview of the basics as well as actionable tips that can help you get started.

Let’s get to it!

What does “building links” mean?

Link building is a term used in SEO to describe the process of increasing the quantity of good links from other websites to your own.

Why are links so important? They’re one of the main (although not the only!) criteria Google uses to determine the quality and trustworthiness of a page. You want links from reputable, relevant websites to bolster your own site’s authority in search engines.

For more information on different types of links, check out Cyrus Shepard’s post All Links are Not Created Equal: 20 New Graphics on Google's Valuation of Links.

“Building links” is common SEO vernacular, but it deserves unpacking or else you may get the wrong idea about this practice. Google wants people to link to pages out of their own volition, because they value the content on that page. Google does not want people to link to pages because they were paid or incentivized to do so, or create links to their websites themselves — those types of links should use the “nofollow” attribute. You can read more about what Google thinks about links in their webmaster guidelines.

The main thing to remember is that links to your pages are an important part of SEO, but Google doesn’t want you paying or self-creating them, so the practice of “building links” is really more a process of “earning links” — let’s dive in.

How do I build links?

If Google doesn’t want you creating links yourself or paying for them, how do you go about getting them? There are a lot of different methods, but we’ll explore some of the basics.

Link gap analysis

One popular method for getting started with link building is to look at the links your competitors have but you don’t. This is often referred to as a competitor backlink analysis or a link gap analysis. You can perform one of these using Moz Link Explorer’s Link Intersect tool.

Link Intersect gives you a glimpse into your competitor’s link strategy. My pal Miriam and I wrote a guide that explains how to use Link Explorer and what to do with the links you find. It’s specifically geared toward local businesses, but it’s helpful for anyone just getting started with link building.

Email outreach

A skill you’ll definitely need for link building is email outreach. Remember, links to your site should be created by others, so to get them to link to your content, you need to tell them about it! Cold outreach is always going to be hit-or-miss, but here are a few things that can help:

• Make a genuine connection: People are much more inclined to help you out if they know you. Consider connecting with them on social media and building a relationship before you ask them for a link.
• Offer something of value: Don’t just ask someone to link to you — tell them how they’ll benefit! Example: offering a guest post to a content-desperate publisher.
• Be someone people would want to link to: Before you ask anyone to link to your content, ask yourself questions like, “Would I find this valuable enough to link to?” and “Is this the type of content this person likes to link to?”

There are tons more articles on the Moz Blog you can check out if you’re looking to learn more about making your email outreach effective:

• Supercharge Your Link Building Outreach! 5 Tips for Success - Whiteboard Friday
  
• Link Building in 2019: Get by With a Little Help From Your Friends
• How We Increased Our Email Response Rate from ~8% to 34%
• Why You Should Steal My Daughter's Playbook for Effective Email Outreach

Contribute your expertise using services like HARO

When you’re just getting started, services like Help a Reporter Out (HARO) are great. When you sign up as a source, you’ll start getting requests from journalists who need quotes for their articles. Not all requests will be relevant to you, but be on the lookout for those that are. If the journalist likes your pitch, they may feature your quote in their article with a link back to your website.

Where do I go from here?

I hope this was a helpful crash-course into the world of link building! If you want to keep learning, we recommend checking out this free video course from HubSpot Academy that walks you through finding the right SEO strategy, including how to use Moz Link Explorer for link building.

Watch the video

Remember, link building certainly isn’t easy, but it is worth it!

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

from The Moz Blog https://ift.tt/2MgvF0L
via IFTTT

The Differing Perspectives on CSS-in-JS

All the New ES2019 Tips and Tricks

The ECMAScript standard has been updated yet again with the addition of new features in ES2019. Now officially available in node, Chrome, Firefox, and Safari you can also use Babel to compile these features to a different version of JavaScript if you need to support an older browser.

Let’s look at what’s new!

Object.fromEntries

In ES2017, we were introduced to Object.entries. This was a function that translated an object into its array representation. Something like this:

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

Object.entries(students) 
// [
//  [ 'amelia', 20 ],
//  [ 'beatrice', 22 ],
//  [ 'cece', 20 ],
//  [ 'deirdre', 19 ],
//  [ 'eloise', 21 ]
// ]

This was a wonderful addition because it allowed objects to make use of the numerous functions built into the Array prototype. Things like map, filter, reduce, etc. Unfortunately, it required a somewhat manual process to turn that result back into an object.

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = {}
for (let [name, age] of DrinkingAgeStudents) {
    DrinkingAgeStudents[name] = age;
}
// { beatrice: 22, eloise: 21 }

Object.fromEntries is designed to remove that loop! It gives you much more concise code that invites you to make use of array prototype methods on objects.

let students = {
  amelia: 20,
  beatrice: 22,
  cece: 20,
  deirdre: 19,
  eloise: 21
}

// convert to array in order to make use of .filter() function
let overTwentyOne = Object.entries(students).filter(([name, age]) => {
  return age >= 21
}) // [ [ 'beatrice', 22 ], [ 'eloise', 21 ] ]

// turn multidimensional array back into an object
let DrinkingAgeStudents = Object.fromEntries(overTwentyOne); 
// { beatrice: 22, eloise: 21 }

It is important to note that arrays and objects are different data structures for a reason. There are certain cases in which switching between the two will cause data loss. The example below of array elements that become duplicate object keys is one of them.

let students = [
  [ 'amelia', 22 ], 
  [ 'beatrice', 22 ], 
  [ 'eloise', 21], 
  [ 'beatrice', 20 ]
]

let studentObj = Object.fromEntries(students); 
// { amelia: 22, beatrice: 20, eloise: 21 }
// dropped first beatrice!

When using these functions make sure to be aware of the potential side effects.

Support for Object.fromEntries

Chrome	Firefox	Safari	Edge
75	67	12.1	No

🔍 We can use your help. Do you have access to testing these and other features in mobile browsers? Leave a comment with your results — we'll check them out and include them in the article.

Array.prototype.flat

Multi-dimensional arrays are a pretty common data structure to come across, especially when retrieving data. The ability to flatten it is necessary. It was always possible, but not exactly pretty.

Let’s take the following example where our map leaves us with a multi-dimensional array that we want to flatten.

let courses = [
  {
    subject: "math",
    numberOfStudents: 3,
    waitlistStudents: 2,
    students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']]
  },
  {
    subject: "english",
    numberOfStudents: 2,
    students: ['Wilson', 'Taylor']
  },
  {
    subject: "history",
    numberOfStudents: 4,
    students: ['Edith', 'Jacob', 'Peter', 'Betty']
  }
]

let courseStudents = courses.map(course => course.students)
// [
//   [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
//   [ 'Wilson', 'Taylor' ],
//   [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
// ]

[].concat.apply([], courseStudents) // we're stuck doing something like this

In comes Array.prototype.flat. It takes an optional argument of depth.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let flattenOneLevel = courseStudents.flat(1)
console.log(flattenOneLevel)
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

let flattenTwoLevels = courseStudents.flat(2)
console.log(flattenTwoLevels)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

Note that if no argument is given, the default depth is one. This is incredibly important because in our example that would not fully flatten the array.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let defaultFlattened = courseStudents.flat()
console.log(defaultFlattened)
// [
//   'Janet',
//   'Martha',
//   'Bob',
//   [ 'Phil', 'Candace' ],
//   'Wilson',
//   'Taylor',
//   'Edith',
//   'Jacob',
//   'Peter',
//   'Betty'
// ]

The justification for this decision is that the function is not greedy by default and requires explicit instructions to operate as such. For an unknown depth with the intention of fully flattening the array the argument of Infinity can be used.

let courseStudents = [
  [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ],
  [ 'Wilson', 'Taylor' ],
  [ 'Edith', 'Jacob', 'Peter', 'Betty' ]
]

let alwaysFlattened = courseStudents.flat(Infinity)
console.log(alwaysFlattened)
// [
//   'Janet',   'Martha',
//   'Bob',     'Phil',
//   'Candace', 'Wilson',
//   'Taylor',  'Edith',
//   'Jacob',   'Peter',
//   'Betty'
// ]

As always, greedy operations should be used judiciously and are likely not a good choice if the depth of the array is truly unknown.

Support for Array.prototype.flat

Chrome	Firefox	Safari	Edge
75	67	12	No

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	No	No	67

Array.prototype.flatMap

With the addition of flat we also got the combined function of Array.prototype.flatMap. We've actually already seen an example of where this would be useful above, but let's look at another one.

What about a situation where we want to insert elements into an array. Prior to the additions of ES2019, what would that look like?

let grades = [78, 62, 80, 64]

let curved = grades.map(grade => [grade, grade + 7])
// [ [ 78, 85 ], [ 62, 69 ], [ 80, 87 ], [ 64, 71 ] ]

let flatMapped = [].concat.apply([], curved) // now flatten, could use flat but that didn't exist before either
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

Now that we have Array.prototype.flat we can improve this example slightly.

let grades = [78, 62, 80, 64]

let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

But still, this is a relatively popular pattern, especially in functional programming. So having it built into the array prototype is great. With flatMap we can do this:

let grades = [78, 62, 80, 64]

let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
// [
//  78, 85, 62, 69,
//  80, 87, 64, 71
// ]

Now, remember that the default argument for Array.prototype.flat is one. And flatMap is the equivalent of combing map and flat with no argument. So flatMap will only flatten one level.

let grades = [78, 62, 80, 64]

let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
// [
//   78, [ 85 ],
//   62, [ 69 ],
//   80, [ 87 ],
//   64, [ 71 ]
// ]

Support for Array.prototype.flatMap

Chrome	Firefox	Safari	Edge
75	67	12	No

Chrome Android	Firefox Android	iOS Safari	IE Mobile	Samsung Internet	Android Webview
75	67	12.1	No	No	67

String.trimStart and String.trimEnd

Another nice addition in ES2019 is an alias that makes some string function names more explicit. Previously, String.trimRight and String.trimLeft were available.

let message = "   Welcome to CS 101    "
message.trimRight()
// '   Welcome to CS 101'
message.trimLeft()
// 'Welcome to CS 101   '
message.trimRight().trimLeft()
// 'Welcome to CS 101'

These are great functions, but it was also beneficial to give them names that more aligned with their purpose. Removing starting space and ending space.

let message = "   Welcome to CS 101    "
message.trimEnd()
// '   Welcome to CS 101'
message.trimStart()
// 'Welcome to CS 101   '
message.trimEnd().trimStart()
// 'Welcome to CS 101'

Support for String.trimStart and String.trimEnd

Chrome	Firefox	Safari	Edge
75	67	12	No

Optional catch binding

Another nice feature in ES2019 is making an argument in try-catch blocks optional. Previously, all catch blocks passed in the exception as a parameter. That meant that it was there even when the code inside the catch block ignored it.

try {
  let parsed = JSON.parse(obj)
} catch(e) {
  // ignore e, or use
  console.log(obj)
}

This is no longer the case. If the exception is not used in the catch block, then nothing needs to be passed in at all.

try {
  let parsed = JSON.parse(obj)
} catch {
  console.log(obj)
}

This is a great option if you already know what the error is and are looking for what data triggered it.

Support for Optional Catch Binding

Chrome	Firefox	Safari	Edge
75	67	12	No

Function.toString() changes

ES2019 also brought changes to the way Function.toString() operates. Previously, it stripped white space entirely.

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
//'function greeting() {\nconst name = \'CSS Tricks\'\nconsole.log(`hello from ${name} //`)\n}'

Now it reflects the true representation of the function in source code.

function greeting() {
  const name = 'CSS Tricks'
  console.log(`hello from ${name}`)
}

greeting.toString()
// 'function greeting() {\n' +
//  "  const name = 'CSS Tricks'\n" +
//  '  console.log(`hello from ${name}`)\n' +
//  '}'

This is mostly an internal change, but I can’t help but think this might also make the life easier of a blogger or two down the line.

Support for Function.toString

Chrome	Firefox	Safari	Edge
75	60	12 - Partial	17 - Partial

---

And there you have it! The main feature additions to ES2019.

There are also a handful of other additions that you may want to explore. Those include:

• Symbol description
• Sort stability
• ECMAScript as JSON superset
• JSON.stringify

Happy JavaScript coding!

The post All the New ES2019 Tips and Tricks appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2ZZhkZJ
via IFTTT

How to Get a Customer to Edit Their Negative Review

Site Monetization with Coil (and Removing Ads for Supporters)

In Search of a Stack That Monitors the Quality and Complexity of CSS

"Study Finds:" How Data-Driven Content Marketing Builds Links and Earns Press Mentions