워드프레스에서 미디어를 업로드할 때 파일 이름 지정하기

워드프레스에서 미디어 파일을 업로드할 때 파일 이름이 자동으로 지정됩니다. 예를 들어, Twenty Seventeen Theme.png 파일을 업로드하면 Twenty-Seventeen-Theme.png와 같이 공백이 대시로 '-'로 바뀌게 됩니다.

상황에 따라 이미지 파일을 업로드할 때 파일 이름을 직접 지정해주고 싶은 경우가 있습니다. 예를 들어, 디지털 카메라나 스마트폰에서 촬영하면 파일 이름이 SEO에 친화적이지 않는 형식(예: 2018_0319_123.jpg)으로 저장됩니다. 이런 경우에 파일을 업로드할 때 보다 알아보기 쉽고 SEO에 친화적인 파일 이름을 지정해주는 것을 고려할 수 있습니다.

Media File Renamer 플러그인

Media File Renamer는 미디어 파일을 업로드할 때 자동으로 이미지 이름을 지정해줍니다. 파일 이름은 글, 페이지, 커스텀 타입 및 메다데이터를 기준으로 자동으로 지정됩니다.

워드프레스 미디어 파일 이름 자동 지정 플러그인

무료 버전에서는 자동으로 이름이 지정되고 Pro 버전(유료)에서는 글 제목을 기준으로 파일 이름이 지정되도록 하는 옵션을 선택할 수 있는 것 같습니다.

이 플러그인은 본래 자동으로 이름을 지정하기 위한 목적으로 만들어졌지만, 2년 전에 수동으로 파일 이름을 지정하는 기능과 몇 가지 추가 기능을 추가하여 Pro 버전에서 제공하고 있습니다.

미디어 파일을 업로드할 때 한글을 자동으로 제거하는 방법

미디어 파일을 업로드할 때 한글이 파일 이름에 포함되어 있으면 파일 이름에 한글이 포함되게 됩니다. 예를 들어, 볼펜을 쥔 여자.jpg 파일을 업로드하면 볼펜을-쥔-여자.jpg와 같이 이름이 자동 지정됩니다.

워드프레스 미디어 파일 업로드 시 한글 문자 제거하기

이미지 파일 이름에 한글이 포함되더라도 보통 별 문제가 없습니다. 하지만 사이트를 이전할 때 Duplicator 같은 플러그인을 사용하면 한글이 포함된 파일 이름은 모두 깨지게 됩니다. 그리고 압축 파일로 백업을 받는 경우에도 대부분 파일 이름에서 한글이 깨지게 됩니다.

저는 이미지 파일 이름을 모두 영어로 지정하고 파일을 업로드할 때 "타이틀"과 "대체 텍스트"에 설명을 기입하고 있습니다.

하지만 여러 명의 글쓴이가 있는 경우 다른 작성자가 파일 이름에 한글이 포함된 미디어 파일을 업로드하는 것을 막을 수 없게 됩니다. 이런 문제를 방지하기 위해 UTF8 문자를 모두 제거하는 방법을 생각해볼 수 있습니다.

미디어 파일을 업로드할 때 한글 등 UTF8 문자를 자동으로 제거하려면 다음 코드를 사용할 수 있습니다.

/**
* Produces cleaner filenames for uploads, 업로드 시 파일 이름에서 한글 등 비영문 문자 제거하기
*
* @param string $filename
* @return string
*/
function wpartisan_sanitize_file_name( $filename ) {

$sanitized_filename = remove_accents( $filename ); // Convert to ASCII

// Standard replacements
$invalid = array(
' ' => '-',
'%20' => '-',
'_' => '-',
);
$sanitized_filename = str_replace( array_keys( $invalid ), array_values( $invalid ), $sanitized_filename );

$sanitized_filename = preg_replace('/[^A-Za-z0-9-\. ]/', '', $sanitized_filename); // Remove all non-alphanumeric except .
$sanitized_filename = preg_replace('/\.(?=.*\.)/', '', $sanitized_filename); // Remove all but last .
$sanitized_filename = preg_replace('/-+/', '-', $sanitized_filename); // Replace any more than one - in a row
$sanitized_filename = str_replace('-.', '.', $sanitized_filename); // Remove last - if at the end
$sanitized_filename = 'image-' . strtolower( $sanitized_filename ); // Lowercase

return $sanitized_filename;
}
add_filter( 'sanitize_file_name', 'wpartisan_sanitize_file_name', 10, 1 );
// 출처: Rename and clean WordPress media filenames

출처는 wpartisan.me 사이트인데요, ‘me’ 도메인은 지난 2006년 몬테네그로가 세르비아에서 독립하면서 2008년 7월 처음 허용된 국가 도메인이라고 하네요. me 도메인은 간결하고 개인적이며 인기도 높다는 과거 기사가 있네요(참고).

본래 코드에서 'image-'를 맨 앞에 붙이도록 약간 변경했습니다. 순수 한글만 포함된 파일 이름은 ".jpg"처럼 이름이 아예 지정되지 않는 문제가 발생하기 때문에 미봉책으로 'image-'를 추가했습니다.

위의 코드를 사용 중인 테마 함수 파일에 추가하면 영문이나 숫자는 그대로 유지되지만 한글 등은 파일 이름에서 제거됩니다. (가급적 차일드 테마를 만들어 작업하도록 합니다. 그렇지 않으면 테마가 업데이트되면 수정 사항이 초기화됩니다.)

워드프레스에서 alt와 title 속성 지정

이미지를 글에 삽입하면서 alt(대체 텍스트)와 title 속성을 지정하면 SEO에 유리해집니다.

 

워드프헤스에서 alt 및 title 속성 지정하기

이미지 상세에서 "대체 텍스트"와 "고급 옵션" 아래의 "이미지 타이틀 속성"을 지정해주도록 합니다.

저는 "대체 텍스트"만 지정해왔는데, 앞으로는 "이미지 타이틀 속성"도 함께 지정해주어야겠습니다.

Yoast SEO에서는 이런 작업을 귀찮게 여기는 것에 대해 '게으르다'고 지적하네요.ㅎㅎ

There’s no excuse for not doing this right, other than laziness.

몰라서 이때까지 이 부분을 소홀히 했다면 이제부터는 이미지를 올릴 때 alt title 속성을 지정하면 좋을 듯 합니다.

SEO(검색엔진최적화)는 결국 자신에게 이득이 되므로 다소 귀찮더라도 이런 부분까지 꼼꼼히 설정하면 구글 등의 검색엔진에서 검색되는 데 도움이 될 것입니다. (네이버에서는 도움이 될지 모르겠습니다.)

이미지 alt 태그와 title 태그 최적화에 대한 내용은 Yoast SEO 글을 참고해보세요.

참고:


1개 댓글

댓글 남기기

* 이메일 주소는 공개되지 않습니다.